JSFiddle - React, Tailwind, and code Playground

by nathansnider

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<div id="map"></div>
<button id="buttonAnimate">Animate</button>

CSS

#map {
    height: 500px;
}

JavaScript

ACCESS_TOKEN = 'pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ';
		MB_ATTR = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
			'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
			'Imagery © <a href="http://mapbox.com">Mapbox</a>';
		MB_URL = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + ACCESS_TOKEN;

var littleton = L.circleMarker([39.61, -105.02]).bindPopup('This is Littleton, CO.'),
    denver    = L.circleMarker([39.74, -104.99]).bindPopup('This is Denver, CO.'),
    aurora    = L.circleMarker([39.73, -104.8]).bindPopup('This is Aurora, CO.'),
    golden    = L.circleMarker([39.77, -105.23]).bindPopup('This is Golden, CO.');

var cities = L.layerGroup([littleton, denver, aurora, golden]);

    var grayscale = L.tileLayer(MB_URL, {attribution: MB_ATTR, id: 'mapbox.light'}),
	    streets = L.tileLayer(MB_URL, {attribution: MB_ATTR, id: 'mapbox.streets'});

var map = L.map('map', {
    center: [39.73, -104.99],
    zoom: 5,
    layers: [grayscale, cities]
});

var baseMaps = {
    "Grayscale": grayscale,
    "Streets": streets
};

var overlayMaps = {
    "Cities": cities
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

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