JSFiddle - React, Tailwind, and code Playground

by Leon Alvarez Del Canto

HTML

<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css">
<div id="mapContainer">

</div>

CSS

#mapContainer {
  height: 300px;
  margin-top: 50px;
  position: relative;
}

JavaScript

var map = L.map('mapContainer').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
  .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')

  var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map)

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);

var popup = L.popup();

function onMapClick(e) {
    marker.openPopup()
}

marker.on('mouseover', onMapClick);