First marker is duplicated
MichalPisanczuk opened this issue · comments
Hi, i found a bug with first marker
I have an array of points [{{ lat: 52.229827082, lon: 21.011731518, label: 'Warsaw', reportNumbers: 0 }]
On map i see one group. When i click this group, i see two markers with the same address.
- I'm reporting a bug, not asking for help
- I'm sure this is a Leaflet.MarkerCluster code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
- I've searched through the issues to make sure it's not yet reported
How to reproduce
- Leaflet version I'm using:
- Leaflet.MarkerCluster version I'm using:
- Browser (with version) I'm using:
- OS/Platform (with version) I'm using:
- step 1
- step 2
What behaviour I'm expecting and which behaviour I'm seeing
Minimal example reproducing the issue
- this example is as simple as possible
- this example does not rely on any third party code
Using http://leafletjs.com/edit.html or any other jsfiddle-like site.
No reproducible example, no versions of anything, and no actual code... this means there's no way to diagnose.
`import { Component, AfterViewInit, Renderer2, ElementRef } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet-routing-machine';
import 'leaflet.markercluster';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'],
})
export class MapComponent implements AfterViewInit {
constructor(private renderer: Renderer2, private el: ElementRef) {}
private map: any;
private markerClusterGroup: any;
private routeMarkers: any;
private routingControl: any;
distance: any;
time: any;
serviceCarCoordinates = { lat: 51.6915722, lon: 18.9763949 };
endPointCarServiceCoordinates = { lat: 51.6377719, lon: 19.2923455 };
waypoints: L.LatLng[] = [];
allLockers = [
{ lat: 0, lon: 0, label: '', numberReports: 0 },
{
lat: 52.341493,
lon: 21.058743,
label: 'Warszawa Białołęka, ul. Modlińska 8, 03-216 Warszawa',
numberReports: 3,
},
{
lat: 52.341493,
lon: 21.258743,
label: 'Warszawa',
numberReports: 8
}
];
private initMap(): void {
this.map = L.map('map', {
center: [51.9189046, 19.1343786],
zoom: 7,
});
const tiles = L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
maxZoom: 18,
minZoom: 1,
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
}
);
// Inicjalizacja klastra
this.markerClusterGroup = L.markerClusterGroup({
iconCreateFunction: (cluster) => {
console.log(cluster.getAllChildMarkers());
return L.divIcon({ html: '<b>' + cluster.getChildCount() + '</b>', className: this.getMarkerClass(cluster.getChildCount()) });
}
});
this.routeMarkers = L.layerGroup().addTo(this.map);
this.allLockers.forEach((locker) => {
const customIcon = L.divIcon({
className: 'custom-marker',
html: `<div>${locker.numberReports}</div>`,
iconSize: [20, 20],
});
const marker = L.marker([locker.lat, locker.lon], {
icon: customIcon,
});
marker.bindPopup(`${locker.label}`);
marker.on('click', () => {
this.addWayPoint(locker);
});
// Dodanie znacznika do klastra
this.markerClusterGroup.addLayer(marker);
});
tiles.addTo(this.map);
// Dodanie klastra do mapy
this.map.addLayer(this.markerClusterGroup);
}
getMarkerClass(numberReports: number): string {
if (numberReports === 0) {
return 'zero';
} else if (numberReports < 3) {
return 'low';
} else if (numberReports >= 3 && numberReports <= 6) {
return 'medium';
} else if (numberReports >= 7 && numberReports <= 10) {
return 'high';
} else {
return 'emergency';
}
}
updateMarkers(): void {
this.allLockers.forEach((locker) => {
const customIcon = L.divIcon({
className: 'custom-marker',
html: `<div>${locker.numberReports}</div>`,
iconSize: [20, 20],
});
const marker = L.marker([locker.lat, locker.lon], {
icon: customIcon,
});
marker.bindPopup(`${locker.label}`);
marker.on('click', () => {
this.addWayPoint(locker);
});
this.markerClusterGroup.addLayer(marker);
const markerElement = marker.getElement();
const markerClass = this.getMarkerClass(locker.numberReports);
this.renderer.addClass(markerElement, markerClass);
});
}
ngAfterViewInit(): void {
this.initMap();
this.updateMarkers();
}
}
`