Question

59

How to use leaflet markerclusterGroup?

rated 0 times [ 63] [ 4] / answers: 1 / hits: 37225 / 6 Years ago, sat, march 17, 2018, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryderalfonsos

Add To Favorites

Follow

Total Points: 655

Total Questions: 88

Total Answers: 91

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

ryderalfonsos questions

1 React application with Service Worker - Force update of browser cache on new version

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Call Action Method on button click ASP.NET MVC

Mon, Sep 9, 19, 00:00, 5 Years ago

1 Customizing the JS/CSS in a TrustPilot widget

Wed, Feb 13, 19, 00:00, 5 Years ago

1 How to display a string javascript in HTML

Tue, Feb 12, 19, 00:00, 5 Years ago

1 How to make an undo function in canvas?

Fri, Dec 28, 18, 00:00, 6 Years ago

View All

answered 6 Years ago harrisa · Accepted Answer

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.