Leaflet markerClusterGroup 'undefined is not a function'

Question

I have to create a map with more than 5000 points from a geojson. So I would like to use markercluster plugin with Leaflet.

I wrote the following code with help from the documentation and from other posts (I'm new to webmapping and to programming languages) and the chrome console returns that "L is not defined" for the leaflet.markercluster.js file and that "undefined is not a function" for my line of code with L.markerClusterGroup().

Here is the code :

var clusterGroup = new L.markerClusterGroup();

var points = L.geoJson(gares, {
    pointToLayer: function (feature, latlng) {
      return L.marker(latlng)
      .bindPopup(feature.properties.NOM);
    }
});

clusterGroup.addLayer(points);

map.addLayer(clusterGroup);

Is there someone to help me understanding why it doesn't work ?

Answer 1

You should add the script that loads the markercluster plugin after you've loaded the core leaflet application. The markercluster functionality is based on extended/new classes from Leaflet, so it has to read Leaflet first. So, put this line:

 <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>

After this one:

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

Answer 2

import * as L from 'leaflet';
import * as L1 from 'leaflet.markercluster'

this.map = L.map('map', {
      center: [ 51.5, -0.09 ],
      zoom: 3
    });  
    const tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

tiles.addTo(this.map);

var marker_group =new **L1**.MarkerClusterGroup();

 marker_group.addLayer(L.marker([51.5, -0.09]));
 marker_group.addLayer(L.marker([55.5, -0.09]));
 marker_group.addLayer(L.marker([58.5, -0.09]));

    this.map.addLayer(marker_group);

Answer 3

Working with angular 8, I had to do:

Add css and js files to angular.json:

"styles": [
  "node_modules/leaflet/dist/leaflet.css",
  "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
  "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
],
"scripts": [     
  "node_modules/leaflet/dist/leaflet.js",
  "node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"
]

In my component.ts, I had to import leaflet before leaflet.markercluster:

import * as L from 'leaflet';
import * as L1 from 'leaflet.markercluster';

Finally I was able to create MarkerClusterGroup object using L1 alias and other leaflet objects with L. Example that works for me:

var markersCluster = new L1.MarkerClusterGroup();
var my_marker = L.marker([43.607378, 1.429010]);
markersCluster.addLayer(my_marker);

Pretty similar to the response from @anonym but without ** around L1 alias.

Answer 4

This was a simple import mistake with angular, changing imports to the following, resolves this issue:

import * as L from 'leaflet';
import 'leaflet.markercluster';

// Compile & run = OK
private myClusterGroup = L.markerClusterGroup();

Tested using Angular 7, leaflet 1.6.0 and leaflet.markercluster 1.4.1

Answer 5

It is because you are missing the reference of the markercluster.js file. And as @Alexandru mentioned you have to add the reference of the markercluster.js.

Also for the CSS you need to add the marker cluster CSS as well.

@*load map*@
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

@*load marker clusters*@
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js"></script>

Answer 6

Firstly, you use import * as L from "leaflet";

Secondly, for grouping markers or clustering markers, use "MarkerMuster" instead of "markerClusterGroup"

Add your project "react-leaflet-muster" via npm or yarn.

import { MarkerMuster } from "react-leaflet-muster";

...code..