First marker is duplicated

[Pisak]

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.

[Iván Sánchez Ortega]

No reproducible example, no versions of anything, and no actual code... this means there's no way to diagnose.

[Pisak]

`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:
          '&copy; <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();
  }
}
`