leaflet-geoman: [Bug] Problem with PM and MarkerCluster

Hi Sumit 😃

First of all, thank you for your great contribution of this awesome plugin for Leaflet. I really appreciate the work you do here.

I have the following problem with the combination of Leaflet.PM and Leaflet.markercluster:

  • The edit mode is disabled for a single marker by pmIgnore: true -> so far so good
  • If I remove one marker, all of them are getting deleted -> that should not happen, especially because I don’t wont to be able to delete marker at all.

Fiddle to reproduce: http://jsfiddle.net/tc7xwqz0/20/

In the end, I’m not sure if it is a problem of PM or MarkerCluster. Perhaps you can have a look and let me know what you think.

Best regards, Jan

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 6
  • Comments: 25 (8 by maintainers)

Most upvoted comments

I’m using the following workaround, right after importing markerCluster. This extends the leaflet class that draws the cluster markers and simply adds the pmIgnore option:

(L as any).MarkerCluster = (L as any).MarkerCluster.extend({
  options: { pmIgnore: true, ...L.Icon.prototype.options }
});

It would be a nice addition to add the possibility of passing options to the base of the marker cluster in the same way that you pass them to the bounding polygons and the spider leg polylines.

Hope it helps.

Thanks @Falke-Design hope for it to be merged in and deployed with next version of geoman. With angular I’m using a package.json to restore npm packages which runs on deployment so cant bring the code in myself but will wait on a new deployment of geoman. Thank you again

@Rosscotini after merging #1035 (or you build the code by your self from the branche) you can use following with Markercluster 1.5.3:

// Extends / Overwrite the default L.MarkerCluster and add pmIgnore
      L.MarkerCluster = L.MarkerCluster.extend({
        options: { pmIgnore: true, ...L.MarkerCluster.prototype.options }
      });

      // Create a cluster group with pmIgnore options
      const clusterMarker = L.markerClusterGroup({
        pmIgnore: true,
        spiderLegPolylineOptions: {
          pmIgnore: true,
          weight: 1.5,
          color: '#222',
          opacity: 0.5
        },
        polygonOptions: {
          pmIgnore: true,
        }
      });

      function pmDragEnd(e){
        if (map.pm.globalDragModeEnabled()) {
          map.pm.disableGlobalDragMode();
          map.pm.enableGlobalDragMode();
        } else if (map.pm.globalEditModeEnabled()) {
          map.pm.toggleGlobalEditMode();
          map.pm.toggleGlobalEditMode();
        }
      }
      clusterMarker.on('layeradd',(e)=>{
          e.layer.on('pm:dragend',pmDragEnd);
      });

      map.on('pm:remove',(e)=>{
        if(clusterMarker.hasLayer(e.layer)) {
          clusterMarker.removeLayer(e.layer);
        }
      });

Hi everyone, I need help for testing.

With the code below Geoman should be compatible with MarkerCluster and it would be nice if you can help me to test it.

// Extends / Overwrite the default L.MarkerCluster and add pmIgnore
L.MarkerCluster = L.MarkerCluster.extend({
    options: { pmIgnore: true, ...L.MarkerCluster.prototype.options }
});

// Create a cluster group with pmIgnore options
const clusterMarker = L.markerClusterGroup({
    pmIgnore: true,
    spiderLegPolylineOptions: {
        pmIgnore: true,
        weight: 1.5,
        color: '#222',
        opacity: 0.5
    },
    polygonOptions: {
        pmIgnore: true,
    }
});

clusterMarker.on('spiderfied', ()=>{
    // Don't call the disable-functions while drawing
   if(!map.pm.globalDrawModeEnabled()) {

        // get enabled states
        var edit = map.pm.globalEditEnabled();
        var drag = map.pm.globalDragModeEnabled();
        var removal = map.pm.globalRemovalEnabled();

        // disable all -> to remove listeners and co
        map.pm.disableGlobalEditMode();
        map.pm.disableGlobalDragMode();
        map.pm.disableGlobalRemovalMode();

        // reinit the current mode
        if (edit) {
            map.pm.enableGlobalEditMode();
        } else if (drag) {
            map.pm.disableGlobalDragMode();
            map.pm.enableGlobalDragMode();
        } else if (removal) {
            map.pm.enableGlobalRemovalMode();
        }
    }
});

map.on('pm:remove',(e)=>{
    // remove the layer also from the markerClusterGroup
    if(e.layer.__parent && e.layer.__parent._group) {
        e.layer.__parent._group.removeLayer(e.layer);
    }
})

http://jsfiddle.net/falkedesign/kvu24t6L/

If we have enough tests and reviews we can implement it in the main Library or we create a offical Sub-Library

@JanLoebel is this the expected behavious for global edit mode and marker cluster? markercluster

(I’m still working on removal mode)

Hi guys, I’m back from vacation and looked into this today. It seems hard to identify layers from markercluster. The state of my work on this can be seen in this PR: https://github.com/codeofsumit/leaflet.pm/pull/321

I’ve also opened an issue at the markercluster repo regarding the identification of layers created by markercluster. https://github.com/Leaflet/Leaflet.markercluster/issues/905

Any help is greatly appreciated - feel free to comment in the PR about possible solutions. https://github.com/codeofsumit/leaflet.pm/pull/321