JSFiddle - React, Tailwind, and code Playground

by amrana83

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<link rel="stylesheet" href="http://leaflet.github.io/Leaflet.markercluster/example/screen.css">
<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">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://matchingnotes.com/javascripts/leaflet-google.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.50000.1.js"></script>
<script src="http://leaflet.github.io/Leaflet.markercluster/example/realworld.50000.2.js"></script>
<div id="map"></div>
<a href="javascript: void(0)" onclick="resetMap()">Reset map</a>

CSS

#map {
    height: 500px;
    width: 800px;
    margin: 0px;
    padding: 0px
}
.leaflet-map-pane {
    z-index: 2 !important;
}
.leaflet-google-layer {
    z-index: 1 !important;
}

JavaScript

var map, markers, markerList;
map = new L.Map('map', {center: new L.LatLng(-37.813381951114046, 175.27171716665), zoom: 18});
var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
markers = L.markerClusterGroup();
markerList = [];
for (var i = 0; i < 5; i++) {
    var a = addressPoints[i];
    var title = a[2];
    var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
    marker.bindPopup(title);
    markerList.push(marker);
}
for (var i = 0; i < 5; i++) {
    var a = addressPoints[i];
    var title = a[2];
    var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
    marker.bindPopup(title);
    markerList.push(marker);
}
markers.addLayers(markerList);
map.addLayer(markers);
function resetMap() {
    markers.clearLayers();
    markerList = [];
    for (var i = 0; i < 5; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
        marker.bindPopup(title);
        markerList.push(marker);
    }
    for (var i = 0; i < 5; i++) {
        var a = addressPoints[i];
        var title = a[2];
        var marker = L.marker(L.latLng(a[0], a[1]), { title: title });
        marker.bindPopup(title);
        markerList.push(marker);
    }
    
    markers.addLayers(markerList);
    map.addLayer(markers);
}