JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://leafletjs.com/examples/sample-geojson.js"></script>
<script src="https://jawj.github.io/OverlappingMarkerSpiderfier-Leaflet/bin/oms.min.js"></script>
<div id="map" style="width: 600px; height: 400px"></div>
JavaScript
var map = L.map('map').setView([39.74739, -105], 10);
var oms = new OverlappingMarkerSpiderfier(map);
// Base layer
var basemap = L.tileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
}).addTo(map);
var features = L.geoJson(bicycleRental, {
style: function (feature) {
return feature.properties && feature.properties.style;
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 800,
fillColor: "#ff7800",
color: "#ff0000",
weight: 10,
opacity: 1,
fillOpacity: 0.8
});
},
onEachFeature: function (feature, latlng) {
oms.addMarker(latlng);
}
}).addTo(map);
var popup = new L.Popup();
oms.addListener('click', function(marker) {
popup.setContent(marker.feature.properties.popupContent);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});