JSFiddle - React, Tailwind, and code Playground

by CorFlamberg

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/MarkerCluster.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.5/MarkerCluster.Default.css">
<body>
  <div id="map">
  </div>
</body>

CSS

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

.myClusterRed{
  background:red;
  height:40px;
  width:40px;
  border-radius:100%;
  text-align:center;
  vertical-align:middle;
  font-size:18px;
}

.myClusterYel{
  background:yellow;
  height:40px;
  width:40px;
  border-radius:100%;
  text-align:center;
  vertical-align:middle;
  font-size:18px;
}

JavaScript

//map creation
var map = L.map('map').setView([44,5], 6);
		
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    		maxZoom: 18
		}).addTo(map);


//custom panes with different z-index
var lowPane = map.createPane("lowlevel");
map.getPane('lowlevel').style.zIndex = 610;

var midPane = map.createPane("midlevel");
map.getPane('midlevel').style.zIndex = 630;

var hiPane = map.createPane("hilevel");
map.getPane('hilevel').style.zIndex = 650;


//2 marker cluster groups
var clustRed = L.markerClusterGroup({pane:'hilevel',
	iconCreateFunction: function(cluster) {
		return L.divIcon({ 
    html: '<span style="line-height: 40px;">fuck</span>',
    className: 'myClusterRed',
    iconSize: L.point(40, 40)
    });
	}
});

var clustYellow = L.markerClusterGroup({pane:'lowlevel',
	iconCreateFunction: function(cluster) {
		return L.divIcon({ 
    html: '<span style="line-height: 40px;">' + cluster.getChildCount() + '</span>',
    className: 'myClusterYel',
    iconSize: L.point(40, 40)
    });
	}
});


//adding markers to the cluster groups
clustRed.addLayer(L.circleMarker([44,5]));
clustRed.addLayer(L.circleMarker([44,6]));
map.addLayer(clustRed);

clustYellow.addLayer(L.circleMarker([44,7]));
clustYellow.addLayer(L.circleMarker([43,6]));
map.addLayer(clustYellow);


//a single marker, not belonging to a cluster group
L.circleMarker([45,5],{pane:"midlevel"}).addTo(map);