Skip to content

Latest commit

 

History

History
129 lines (109 loc) · 3.58 KB

README.md

File metadata and controls

129 lines (109 loc) · 3.58 KB

Leaflet.markerprecluster

npm version

Change the behavior of the MarkerCluster plugin to use pre-clustered data.

Using the plugin

Download the markerprecluster-min.js file and add the following lines in the header of your html file:

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/[email protected]/markerprecluster-min.js"></script>

Nota Bene: You need to import the leaflet package and markerclusterpackage before using that plugin

Example

image

Click here to see the result!

Usage

It behaves almost exactly like the MarkerCluster plugin, with only one difference: L.leaf

Instead of adding markers to markerClusterGroup, you will add leaves that will give information to build the tree.

<!DOCTYPE html>
<html>
<head>
	<title>MarkerPreCluster - Demo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<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://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
    	<script src="https://unpkg.com/[email protected]/markerprecluster-min.js"></script>
	<style>
		body {
			padding: 0;
			margin: 0;
		}
		html, body, #map {
			height: 100%;
			width: 100%;
			background: white;
		}
		#map .leaflet-div-icon {
			width:0;
			height:0;
			border: 0;
			padding: 0;
		}
		#map .leaflet-div-icon div {
			display:inline-block;
			padding: 3px;
			border: 1px solid #666;
			border-radius: 3px;
			background:#fff;
			transform:translate(-50%, -50%);
			text-align: center;
		}
	</style>
</head>
<body>
<div id='map'></div>
<script>

const dNode = {
	1: "You",
	2: "ok?",
	0: "Hi!",
};
const lLeaf = [
	[[0,1], [2, -2], "Hope"],
	[[0,1], [1, -1], "you"],
	[[0,1], [0, 0], "like"],
	[[0,2], [-1, 1], "that"],
	[[0,2], [-2, 2], "Plugin :-)"],
];

const maxDepth = 2;
const bounds = [[-2, -2], [2, 2]];


var map = L.map('map', {
	zoom: 0,
	center: [0,0],
	crs: L.CRS.Simple,
});
map.fitBounds(bounds);

var zoomOffset = map.getZoom();
map.options.minZoom = zoomOffset-maxDepth;
map.options.maxZoom = zoomOffset;
map.options.zoom = zoomOffset;

var leafs = L.markerClusterGroup({
	spiderfyOnMaxZoom: false,
	showCoverageOnHover: false,
	zoomToBoundsOnClick: true,
	singleMarkerMode: false,
	iconCreateFunction: function(cluster) {
		return L.divIcon({ html: "<div><b>"+ dNode[cluster.nodeID] + '</b><br>(' + cluster.getChildCount() + "children)</div>", iconSize: "auto"});
	},
});
for (var info of lLeaf) {
	var hierarchy = info[0];
	var position = info[1];
	var popup = info[2];
	var leaf = L.leaf(position, hierarchy).bindTooltip(popup, {permanent: true});
	leafs.addLayer(leaf);
}
map.addLayer(leafs);
map.setView([0,0],map.options.minZoom);
</script>
</body>
</html>

Explications

As you see, the path (hierarchical path) explained how the leaf must fusion to create nodes.

So when you use L.leaf(position, hierarchical_path), just like the exemple.