Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
vinceclicks opened this issue Jan 6, 2023 · 0 comments

Comments

@vinceclicks
Copy link

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"
  }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant