How to use leaflet markerclusterGroup?

Asked 17/3, 2018 at 6:39 Answered 13/3, 2021 at 17:4

Solved javascript angular leaflet leaflet.markercluster

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);

Gyronny answered 17/3, 2018 at 6:39 Comment(0)

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.

Pulchi answered 17/3, 2018 at 15:33 Comment(2)

why do you include two CSS files for markers cluster lib.? – Bottali 13/3, 2021 at 16:43

@JoãoPimentelFerreira Not entirely sure but it seems to work without the MarkerCluster.css import as well. – Pulchi 2/4, 2021 at 14:26

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>

Exogenous answered 13/3, 2021 at 17:4 Comment(0)

Recommended topics

Hot tags