Leaflet: Uncaught TypeError: L.markerClusterGroup is not a function

Question

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.

Answer 1

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 2

I think you miss a quote in your declaration

script(src='/javascripts/leaflet.markercluster-src.js')