ERROR TypeError: layer.addEventParent is not a function while setting markers for marker cluster in angular

Question

I'm using ngx-leaflet-markercluster in angular for showing cluster of markers sharing same location.While setting markers ,it gives error addeventparent is not a function .

//ts

const data: Marker[] = res.map(loc => {
      if (loc.STATUS === this.appConstantsService.OUTAGE_STATUS.INACTIVE) {
        return { lat: loc.location_details_lat, lon: loc.location_details_lon, icon: '/assets/icons/marker-0.png' };

      } else {
        return { lat: loc.location_details_lat, lon: loc.location_details_lon, icon: 'assets/icons/marker-1.png' };
      }
});
this.markerClusterData = data;

//html

<div leaflet style="height: 600px;" 
[leafletOptions]="options"
[leafletBaseLayers]="baseLayers"

[leafletMarkerCluster]="markerClusterData"
[leafletMarkerClusterOptions]="markerClusterOptions"
(leafletMarkerClusterReady)="markerClusterReady($event)"
>
</div>

I want markers to appear in cluster when it have same lat and long ,and when I click the cluster it should zoom in and show the markers.First I was working with agm map.I got an issue when two markers share same lat and long .I used agm-marker-cluster and agm-maker-spider but there was no solution in it.Is there any other way to solve it

which versions are you using (leaflet / markercluster) ? there could be a conflict there, see stackoverflow.com/questions/40028929/… — rebecca
@rebecca "@types/leaflet": "^1.4.6", "@types/leaflet.markercluster": "^1.4.0" — Krazy
Correct me if i am wrong, but shoudlnt you use the the marker class to instantiate the markers: marker([long, lat], configObject)? — Qellson
also, as far as i understand, you need to use addLayer() to add a marker? see: stackoverflow.com/questions/49333263/leaflet-markerclustergroup — rebecca
@rebecca Yeah your right marker class must be used for adding markers .I want to show customized information window for every marker .every marker has different data.Can It be done — Krazy

Krazy Krazy · Accepted Answer · 2019-07-18T04:56:35

We have to use marker class for adding markers

const data: Marker[] = res.map(loc => {
    if (loc.STATUS === this.appConstantsService.OUTAGE_STATUS.INACTIVE) {
        const icon = L.icon({ iconUrl: '/assets/icons/marker-0.png' });
        return marker([loc.location_details_lat, loc.location_details_lon], { icon });
    } else {
        const icon = L.icon({ iconUrl: '/assets/icons/marker-1.png' });

        return marker([loc.location_details_lat, loc.location_details_lon], { icon })
    }
});

ERROR TypeError: layer.addEventParent is not a function while setting markers for marker cluster in angular

1 Answers