JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.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">
<script src="https://cdn.rawgit.com/Leaflet/Leaflet.markercluster/v0.5.0/dist/leaflet.markercluster-src.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

var map = L.map("map").setView([48.86, 2.35], 12),
  tiles = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map),
  markerClusterLayer = L.markerClusterGroup({
    disableClusteringAtZoom: 13
  }).addTo(map);

// Create a new vector type with getLatLng and setLatLng methods.
L.RectangleClusterable = L.Rectangle.extend({
  _originalInitialize: L.Rectangle.prototype.initialize,
  
  initialize: function (bounds, options) {
    this._originalInitialize(bounds, options);
    this._latlng = this.getBounds().getCenter();
  },
  
  getLatLng: function () {
    return this._latlng;
  },
  
  // dummy method.
  setLatLng: function () {}
});

// Add vectors of the new type directly to MCG.
for (var i = 0; i < 10; i += 1) {
  new L.RectangleClusterable([
    randomCoords(),
    randomCoords()
  ]).addTo(markerClusterLayer);
}

function randomCoords() {
  return [
    48.86 + 0.1 * Math.random() - 0.05, 2.35 + 0.16 * Math.random() - 0.08
  ];
}