Skip to content

Undefined markerData in asymmetrick-ngx-leaflet-markercluster.mjs:23:1 #80

@vinceclicks

Description

@vinceclicks

I have no issues running ngx markercluster, but I keep getting a nagging error in my console.

 ERROR TypeError: Cannot read properties of undefined (reading 'getLatLng')
    at NewClass.addLayer (leaflet.markercluster-src.js:104:1)
    at NewClass.addLayers (leaflet.markercluster-src.js:208:1)
    at LeafletMarkerClusterDirective.setData (asymmetrik-ngx-leaflet-markercluster.mjs:37:1)
    at LeafletMarkerClusterDirective.ngOnInit (asymmetrik-ngx-leaflet-markercluster.mjs:23:1)
    at callHook (core.mjs:2549:1)
    at callHooks (core.mjs:2518:1)
    at executeInitAndCheckHooks (core.mjs:2469:1)
    at refreshView (core.mjs:9514:1)
    at refreshComponent (core.mjs:10670:1)
    at refreshChildComponents (core.mjs:9295:1)

I'm not quite sure why but for some reason the markerData in the following code is getting read as undefined, even if I default the input of [leafletMarkerCluster]. markerData is undefined on the first pass of ngOnChanges, followed by ngOnInit, and finally it is defined on the second pass of ngOnChanges. This throws 2 of the above errors in the console.

class LeafletMarkerClusterDirective {
    constructor(leafletDirective) {
        // Hexbin data binding
        this.markerData = [];
        // Fired when the marker cluster is created
        this.markerClusterReady = new EventEmitter();
        this.leafletDirective = new LeafletDirectiveWrapper(leafletDirective);
    }
    ngOnInit() {
        this.leafletDirective.init();
        const map = this.leafletDirective.getMap();
        this.markerClusterGroup = L.markerClusterGroup(this.markerClusterOptions);
        // Add the marker cluster group to the map
        this.markerClusterGroup.addTo(map);
        // Set the data now that the markerClusterGroup exists
        this.setData(this.markerData);
        // Fire the ready event
        this.markerClusterReady.emit(this.markerClusterGroup);
    }
    ngOnChanges(changes) {
        // Set the new data
        if (changes['markerData']) {
            this.setData(this.markerData);
        }
    }

Could this be fixed by adding a check for undefined in the spots where this is called? For now I'll just have to let my developers know not to worry about the errors.

"dependencies": {
    "@angular/animations": "~13.2.7",
    "@angular/cdk": "^13.0.0",
    "@angular/common": "~13.2.2",
    "@angular/compiler": "~13.2.2",
    "@angular/core": "~13.2.7",
    "@angular/forms": "~13.2.2",
    "@angular/platform-browser": "~13.2.2",
    "@angular/platform-browser-dynamic": "~13.2.2",
    "@angular/router": "~13.2.2",
    "@asymmetrik/ngx-leaflet": "^13.0.2",
    "@asymmetrik/ngx-leaflet-markercluster": "^13.0.0",
    "@ngx-formly/core": "^5.10.18",
    "@ngx-formly/primeng": "^5.10.18",
    "@types/esri-leaflet": "^2.1.9",
    "@types/leaflet": "^1.9.0",
    "@types/leaflet.markercluster": "^1.5.1",
    "chart.js": "^3.8.0",
    "esri-leaflet": "^3.0.9",
    "leaflet": "^1.9.3",
    "leaflet.markercluster": "^1.5.3",
    "lottie-web": "^5.9.6",
    "ngx-lottie": "^8.2.0",
    "ngx-mask": "^12.0.0",
    "primeflex": "^2.0.0",
    "primeicons": "^5.0.0",
    "primeng": "^13.4.1",
    "rxjs": "~7.4.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions