Leaflet Markercluster TypeError: Cannot read properties of undefined (reading 'lat')

Viewed 607

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: '&copy; <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?

0 Answers
Related