7

I am trying to add markercluster into leaflet. 

var markers = L.markerClusterGroup();

My header file include:

   script(src='https://unpkg.com/[email protected]/dist/leaflet.js')
   link(type='text/css', rel='stylesheet', href='/stylesheets/MarkerCluster.css')
   link(type='text/css', rel='stylesheet', href='/stylesheets/MarkerCluster.Default.css')        
   script(src=/javascripts/leaflet.markercluster-src.js')

But I keep getting the error of : L.markerClusterGroup is not a function

I am not sure why I get that error.

Improve this question

4 Answers 4

Reset to default
11

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

Improve this answer
1
  • 1
    for your first line I did use instead import * as L from 'leaflet/dist/leaflet'; and it's perfect!
    – tontonCD
    Commented Dec 26, 2022 at 15:08
2

I think you miss a quote in your declaration

script(src='/javascripts/leaflet.markercluster-src.js')
Improve this answer
6
  • I actually have like what you said, but it still doesnt work
    – Tenz
    Commented Oct 12, 2016 at 13:49
  • The script is likely not found. Did you check your javascript console ?
    – YaFred
    Commented Oct 12, 2016 at 16:06
  • Yes. It is in there.
    – Tenz
    Commented Oct 12, 2016 at 16:31
  • I dont know why, but when I put "var markers = L.markerClusterGroup();" inside the window.onload = function(){}. it doesnt show the problem anymore.
    – Tenz
    Commented Oct 12, 2016 at 16:34
  • maybe it has to do with the functions you are using script() and link(). Why are you not using <script> and <link> elements ?
    – YaFred
    Commented Oct 12, 2016 at 17:07
0

I spent 2 hours on this and i could not get it to work any other way. the only option was using the "Wrong" types. (wrong because i am using angular, not react)

yarn add "@types/react-leaflet-markercluster": "^3.0.4"

This makes the error types of typescript disappear and also the error on the console of the browser

versions:

"leaflet": "^1.9.4"

"leaflet.markercluster": "^1.5.3"

"@types/leaflet": "^1.9.12"

Improve this answer
-4

Try

var markers = new L.markerClusterGroup();

instead of 

var markers = L.markerClusterGroup();
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.