I truly like the design of markercluster, that's why I would like to use it for my application, but all my data are already clustered, I can get them under any format (tree, dict of lists, etc).
I tried to reuse the markercluster class with fake markerclustergroup, like this
That a small example of what I tried to do:
var map = L.map('map', {
zoom: 0,
center: [0,0],
minZoom: -6,
maxZoom: 30,
crs: L.CRS.Simple,
});
// {0: {1: {3: {}}, {4: {}}}, {2: {5: {}}, {6: {}}}}
var root = 0;
const dNode = {
3: [[], [-2, -1], 2],
4: [[], [-1, -2], 2],
5: [[], [2, 1], 2],
6: [[], [1, 2], 2],
1: [[3,4], [-1, -1], 1],
2: [[5,6], [1,1], 1],
0: [[1, 2], [0,0], 0],
};
map.fitBounds([[-2, -2], [2, 2]]);
for (var node of [3,4,5,6,1,2,0]) {
var info = dNode[node];
var children = info[0];
if (children.length!=0) {
var a = Object.create(Object);
a._featureGroup = new L.featureGroup();
for (child of children) {
dNode[child][3].addTo(a._featureGroup);
}
a.options = {
clusterPane: L.Marker.prototype.options.pane,
iconCreateFunction: function (h) {
return new L.divIcon({html: "AhA", iconSize: "auto"});
}
};
a._map = map;
var markers = new L.MarkerCluster(a, info[2], L.LatLng(...info[1]));
info[3] = markers;
} else {
info[3] = new L.marker(info[1]);
}
}
dNode[root][3].addTo(map);<!DOCTYPE html>
<html>
<head>
<title>Layers Control Tutorial - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%;
width: 100%;
background: white;
}
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>But it didn't seem to work, because when I click on the 'AhA' cluster, nothing happened...
May you know how I can do it ? (I'm not too good at javascript ^^')