JSFiddle - React, Tailwind, and code Playground

by nathansnider

HTML

<script src="http://leafletjs.com/examples/us-states.js"></script>
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css">
<div id="map"></div>
<button id="buttonLosAngeles">Los Angeles</button>
<button id="buttonDenver">Denver</button>

CSS

#map {
    height: 500px;
}

JavaScript

var map = L.map("map");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png").addTo(map);

map.setView([37, -110], 8);

document.getElementById("buttonLosAngeles").addEventListener("click", function () {
	map.flyTo([34.05, -118.25], 7, {
        animate: true,
        duration: 2 // in seconds
    });
});

document.getElementById("buttonDenver").addEventListener("click", function () {
	map.flyTo([39.73, -104.99], 7, {
        animate: true,
        duration: 2 // in seconds
    });
});

var statesLayer = L.geoJson(statesData, {
    style: function (feature) {
        return {};
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.name + "</br>" + "  " + Math.round(feature.properties.density) + ' people / sq mile');
    }
}).addTo(map)