bluehalo / ngx-leaflet-markercluster

MIT License
61 stars 24 forks source link

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

Open vinceclicks opened 1 year ago

vinceclicks commented 1 year ago

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"
  }