JSFiddle - React, Tailwind, and code Playground

by aidankirrane

HTML

<script src="//api.tiles.mapbox.com/mapbox.js/v1.5.1/mapbox.js"></script>
<link rel="stylesheet" href="//api.tiles.mapbox.com/mapbox.js/v1.5.1/mapbox.css">
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">
<div id='map'></div>

CSS

#map {
    width: 100%;
    height: 500px;
}

JavaScript

var map = L.mapbox.map('map', 'cronym.gfdb822b');

var testMarkers = new L.markerClusterGroup();
var coords = [
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998],
    [37.4219985, -122.08395439999998]
];

for (var i = 0; i < coords.length; i++) {
    var marker = L.marker(new L.LatLng(coords[i][0], coords[i][1]), {
        icon: L.mapbox.marker.icon({
            'marker-symbol': 'a',
            'marker-color': '#009CEC'
        }), draggable: true
    });

    testMarkers.addLayer(marker);
}

var bounds = testMarkers.getBounds();
//map.fitBounds(bounds);

map.addLayer(testMarkers);