CODEWITHSUNDEEP
javascriptangularleafletleaflet.markercluster
Gopal Badariya
Gopal Badariya

Reputation: 149

How to use leaflet markerclusterGroup?

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

Upvotes: 14

Views: 50326

Answers (2)

Jo&#227;o Pimentel Ferreira
Jo&#227;o Pimentel Ferreira

Reputation: 16233

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>

Upvotes: 7

Iavor
Iavor

Reputation: 2077

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.

Upvotes: 36

Related Questions