L.markerClusterGroup is not a function - Angular Directives not worked #90
Description
Description: I followed all the necessary steps to install ngx-leaflet and ngx-leaflet-markercluster to implement a map with marker clustering in my Angular application. Despite the correct installation and configuration, I keep encountering the following error in the console:
ERROR TypeError: L.markerClusterGroup is not a function at _LeafletMarkerClusterDirective.ngOnInit
Environment:
- Angular 18 (simple installation without SSR/Hydration)
- ngx-leaflet and ngx-leaflet-markercluster installed as described in the documentation.
Code Setup:
app.component.ts
import { Component, OnInit } from '@angular/core';
import { LeafletModule } from '@bluehalo/ngx-leaflet';
import { LeafletMarkerClusterModule } from '@bluehalo/ngx-leaflet-markercluster';
import * as L from 'leaflet';
import 'leaflet.markercluster';
@Component({
selector: 'app-root',
standalone: true,
imports: [
LeafletModule,
LeafletMarkerClusterModule
],
templateUrl: './app.component.html',
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit{
options: L.MapOptions = {
center: [51.505, -0.09],
zoom: 13,
layers: [
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap'
})
]
};
markerClusterData: L.Marker[] = [];
markerClusterOptions!: L.MarkerClusterGroupOptions;
ngOnInit(): void {
this.initializeMarkers();
}
private initializeMarkers(): void {
const markerLocations = [
[51.505, -0.09],
[51.515, -0.1],
[51.525, -0.11],
[51.535, -0.12],
[51.545, -0.13],
[51.555, -0.14],
[51.565, -0.15],
[51.575, -0.16],
[51.585, -0.17],
[51.595, -0.18]
];
const markerClusterGroup:any = L.markerClusterGroup(this.markerClusterOptions);
markerLocations.forEach((location:any) => {
const marker = L.marker(location);
markerClusterGroup.addLayer(marker);
});
this.markerClusterData = [markerClusterGroup];
}
}
app.component.html
<div
style="width: 100%; height: 400px;"
leaflet
[leafletOptions]="options"
[leafletMarkerCluster]="markerClusterData"
[leafletMarkerClusterOptions]="markerClusterOptions"
></div>
Problem: When trying to load the map with marker clusters using Angular directives, the error L.markerClusterGroup is not a function at _LeafletMarkerClusterDirective.ngOnInit is thrown. This prevents the map from rendering correctly with clusters.
Workaround: The only workaround that seems to avoid this issue is to directly initialize the map using an ID for the map container:
this.map = L.map('id_of_target_div_without_angular_directives', this.options);
However, this approach bypasses the Angular directives, which is not ideal.
Workaround: Is there a way to use ngx-leaflet-markercluster with Angular directives without encountering this error?