How to use leaflet markerclusterGroup?
Question
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/leaflet.markercluster@1.0.3/dist/MarkerCluster.css">
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
<script src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js'></script>
var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
map.addLayer(markers);
2 answers
solution1
19 ACCPTED 2018-03-17 15:33:31
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/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/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.
solution2
3 2021-03-13 17:04:28
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.