Leaflet / Leaflet.draw

Vector drawing and editing plugin for Leaflet
https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html
MIT License
1.96k stars 992 forks source link

Duplicate event using custom toolbar #1027

Open adamleemiller opened 3 years ago

adamleemiller commented 3 years ago

How to reproduce

What behaviour I'm expecting and which behaviour I'm seeing

I have a custom toolbar that allows to drop a marker and draw a polygon. Once the marker is dropped or the polygon is placed, I add the object to the map and then I call another function to put some data into my database via an API request. At this point, if I create another marker and / or polygon, both the new object and the previously drawn object are both passed as event thus, creating duplications.

const draw = new this.$leaflet.Draw.Marker(this.map.object)

draw.enable()

this.map.object.on('draw:created', (event) => {
  event.layer.addTo(this.map.object)
  this.doCreateAnnotation(event)
})

Which then calls:

doCreateAnnotation (event) {
  console.log(event)
}

Which console logs to different objects when I expect only the newest one. I have tried using removeHooks() however when I do this, I get the following error:

Uncaught TypeError: can't access property "dispose", this._tooltip is null

Minimal example reproducing the issue

The example is not easy to reproduce since I am using a custom toolbar. If no one can help because I did not provide an example, I understand and you can close this. I assume this should be pretty simple but I have struggled for 2 hours trying to figure out how to reset everything. I even tried map.removeControl(draw) but I get an error that removeControl does not exist presumably because I am not using L.Control.Draw and instead I am using L.Draw? I am not sure why I cannot use L.Control.Draw but when I do it is also undefined.

Any help is appreciated. Thank you.