Delete a marker

[JePedrosa]

Hi, , I am trying to create a button to remove a marker from the layer, so I thought that when we pressed the button, we would examine all the elements and put the event that when clicking on an element it would be deleted, but this does not work for me. single element. Then I leave my code:

    alumbrados.PrepareLeafletMarker = function(leafletMarker, data) {
        leafletMarker.on('click', function(){

            alumbrados.RemoveMarkers([leafletMarker]);
            });
    };

[fungiboletus]

Hei,

Have you tried to call alumbrados.ProcessView(); after you removed the markers ? The library is a bit low level and to save performances, the operations must be committed manually.

[JePedrosa]

Yes, I was making some modifications and did not pass the final code I had, this is what I do:

  alumbrados.PrepareLeafletMarker = function(leafletMarker, data) {
      leafletMarker.setIcon(data.icon);
      leafletMarker.on('click', function(){
          alumbrados.RemoveMarkers([leafletMarker]);
          alumbrados.ProcessView();
          });
  };

[fungiboletus]

Oh I see. leafletMarker is an instance of L.Marker object. But RemoveMarkers accepts arrays of PruneCluster.Marker instances.

I'm sorry, but you don't have access to the PruneCluster.Marker instance in PrepareLeafletMarker. The API should probably be improved to add a reference to it, but meanwhile you will have to retreive the PruneCluster.Marker yourself, by using an ID in data or something similar.

[JePedrosa]

Perfect, thanks for the information, in case someone has help to fix it in the following way:

The first thing, when creating the elements, I put an id:

    var marker = new PruneCluster.Marker(geom.coordinates[1], geom.coordinates[0], {
        icon: L.icon({
            iconUrl: datos[i][2],
            iconSize: [10, 10]
        }),
        id: i
    });
    markers.push(marker);
    alumbrados.RegisterMarker(marker);

i is a variable of a for. Then create the following two functions in the PruneCluster.js file:

     RemoveMarkersId: function (markers) {
         this.Cluster.RemoveMarkersId(markers);
     }

    PruneCluster.prototype.RemoveMarkersId = function (markers) {
         var newMarkersList = [];
         for (i = 0, l = this._markers.length; i < l; ++i) {
             if (! (this._markers[i].data.id == markers)) {
                newMarkersList.push(this._markers[i]);
             }else {
                 delete this._markers[i];
             }
        }
        this._markers = newMarkersList;
         };

And finally I execute the following:

    alumbrados.PrepareLeafletMarker = function(leafletMarker, data) {
        leafletMarker.setIcon(data.icon);
        leafletMarker.on('click', function(){
                alumbrados.RemoveMarkersId(data.id);
                alumbrados.ProcessView();
            });
    };