How to use leaflet markerclusterGroup?

javascript angular leaflet leaflet.markercluster
Gopal Badariya picture Gopal Badariya · Mar 17, 2018 · Viewed 18.5k times · Source

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

Answer

Iavor picture Iavor · Mar 17, 2018

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.

Related questions

Can't bind to 'ngModel' since it isn't a known property of 'input'

I've got the following error when launching my Angular app, even if the component is not displayed. I have to comment out the <input> so that my app works. zone.js:461 Unhandled Promise rejection: Template parse errors: Can't …

Read More
Angular: conditional class with *ngClass

What is wrong with my Angular code? I am getting: Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ... HTML <ol class="breadcrumb"> <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li&…

Read More
(change) vs (ngModelChange) in angular

Angular 1 does not accept onchange() event, it's only accepts ng-change() event. Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing. What's the difference? which one is best for performance? …

Read More