6

I would like to prevent a user from creating more than one shape on the map. For example if the user creates a polygon, then all shape icons on the toolbar should be disabled. When the user deletes the previously created shape, then icons on the toolbar should get enabled.

How can I do this? I tried removing the toolbar on the draw:created event and adding a new toolbar on draw:deleted event but it lead to errors (see attached screenshot).

Error screenshot

Community
  • 1
  • 1
codejunkie
  • 908
  • 2
  • 21
  • 34

1 Answers1

5

Leaflet enables us to remove and add the toolbars with remove() and addTo() methods.

What you need to do is to create two toolbars. One is a default L.Control.Draw and the other one is without the 'draw' component:

self.drawControlFull = new L.Control.Draw();

self.drawControlEdit = new L.Control.Draw({
  edit: {
    featureGroup: editableLayers,
    edit: false
  },
  draw: false
});

map.addControl(drawControlFull);

Then you just listen to the draw:created and draw:deleted events and you add/remove them as needed:

map.on('draw:created', function(e) {
  var type = e.layerType,
    layer = e.layer;

    self.drawControlFull.remove();
    self.drawControlEdit.addTo(map);

  editableLayers.addLayer(layer);
});

map.on('draw:deleted', function (e) {
    self.drawControlEdit.remove();
    self.drawControlFull.addTo(map);
});

This solution maybe doesn't cover all the use cases but it's just an example. I have also created a jsFiddle for this so you can see how it works.

Marko Letic
  • 2,460
  • 2
  • 28
  • 34
  • I had tried this approach earlier. But I was getting the error shown in the attached screenshot. (I've updated the question) – codejunkie Sep 06 '16 at 11:29
  • Can you maybe create a jsFiddle and reproduce your error (try to update mine)? My solution works with the latest version of leaflet and leaflet-draw. Maybe you are using an older version. If this is the case you need to change couple of things but it's similar. – Marko Letic Sep 06 '16 at 12:20
  • Here's how you can duplicate it in your code. Create a shape. Then click on edit -->you get an error. Then click on cancel -->you get another error. (Use chrome debugger) – codejunkie Sep 07 '16 at 04:11
  • It doesn't seem to be the same error as the one you are having and also in the question you didn't mention editing of the drawn layer. As I've said this is just an example that covers add/delete case. You would need to have other event listeners to cover all cases. – Marko Letic Sep 07 '16 at 08:17
  • Ok! Lets take editing shapes out of the picture. Can you help me out then? – codejunkie Sep 07 '16 at 09:30
  • I have edited the jsFiddle and now it hides the 'edit' control. You can now add and delete only one layer without any exceptions. If you can reproduce the same error in a live working example you have logged in the console, I will check it out. – Marko Letic Sep 07 '16 at 09:39
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/122812/discussion-between-marko-letic-and-codejunkie). – Marko Letic Sep 07 '16 at 09:42