I'm trying to build a simple map with leaflet (V 1.7.1) and the Markercluster Plugin (V 1.5.1). The libraries are loaded from node_modules.
import * as L from 'leaflet';
import "leaflet.markercluster/dist/leaflet.markercluster";
export default class LeafletMapControl {
private readonly settings: any;
private readonly map: L.Map;
// MarkerClusterGroup
private markerClusterGroup: L.MarkerClusterGroup;
public constructor(settings: any) {
this.settings = settings;
// Create map
this.map = L.map('eventsdiv', {
doubleClickZoom: false,
});
this.map.setView([51, 9], 6);
// Create tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(this.map);
// Initialize MarkerClusterGroup
this.markerClusterGroup = L.markerClusterGroup({
showCoverageOnHover: false,
maxClusterRadius: 60,
});
const marker1: L.Marker = L.marker([49.3426023, 12.1303503]);
const marker2: L.Marker = L.marker([54.3093069, 13.0380009]);
this.markerClusterGroup.addLayer(marker1);
this.markerClusterGroup.addLayer(marker2);
this.markerClusterGroup.addTo(this.map);
}
}
But unfortunately i get the following error message from:
Uncaught TypeError: Cannot read properties of undefined (reading 'lat')
at LatLngBounds.intersects (leaflet-src.js:1277)
at i._recursively (leaflet.markercluster.js?v=1:1)
at i._recursivelyAddChildrenToMap (leaflet.markercluster.js?v=1:1)
at i.<anonymous> (leaflet.markercluster.js?v=1:1)
at i.addLayers (leaflet.markercluster.js?v=1:1)
at i.onAdd (leaflet.markercluster.js?v=1:1)
at i._layerAdd (Layer.js:114)
at NewClass.whenReady (leaflet-src.js:4428)
at NewClass.addLayer (leaflet-src.js:6629)
at i.addTo (Layer.js:52)
If i'm using the exact same code with plain JavaScript and the downloaded libraries (without npm), it works. So it might be a bug with the leaflet library. Has anyone an idea to make this code running?