Menu
I want to create a leaflet marker cluster group and I want to add all the markers, and for that I have written the below-mentioned code. But I am getting the error TypeError: L.markerClusterGroup is not a constructor
I am not getting that there is an error in the scripting or in the code that I have written
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src='https://unpkg.com/[email protected]/dist/leaflet.markercluster-src.js'></script>
var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
map.addLayer(markers);
947
Use the addPopups() function to add standalone popup to the map. A common use for popups is to have them appear when markers or shapes are clicked. Marker and shape functions in the Leaflet package take a popup argument, where you can pass in HTML to easily attach a simple popup.
You do not need to include both leaflet.markercluster.js and leaflet.markercluster-src.js; you just need one of them.
In the head section of your HTML, include the following:
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
</head>
Then, in your JavaScript, create a marker cluster group:
var markers = L.markerClusterGroup();
create some markers:
var marker = L.marker(new L.LatLng(0, 0));
add the markers to the cluster group:
markers.addLayer(marker);
and finally add the cluster group to the map:
map.addLayer(markers);
Take a look at this JSBin to see a working example.
77
Here you have a simple working example with Open Street Maps, just try it by running this snippet.
As you may see we need to include two CSS files from markercluster, namely MarkerCluster.css and MarkerCluster.Default.css. We must include the CSS and JS files from markercluster only after the inclusion of the leaflet files.
var map = L.map('map').setView([38, -8], 7)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
var markers = L.markerClusterGroup();
for (let i=0; i<1000; i++) {
const marker = L.marker([
getRandom(37, 39),
getRandom(-9.5, -6.5)
])
markers.addLayer(marker)
}
map.addLayer(markers);
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}#map {height: 400px}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.0/MarkerCluster.Default.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script>
<div id="map"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
