No support for moving markers

[maximzavadskiy]

When a marker is moved, e.g. via setLatLng, 'move' event is not catched in the plugin, so it's marker['_omsData'].usualPosition is not updated accordingly, which results in wrong marker location after unspiderfying it.

[jawj]

I have a feeling that it wasn't possible to listen for move events in Leaflet when I first ported the library from the Google Maps API, hence why this isn't done.

I guess it would be nice to add it in, but it's not a priority for me at the moment. If you fancy trying it, you can take the source of the Google Maps library as a model.

If not, you can get the exact same effect by just calling oms.unspiderfy() before you move any markers.

[wwwizzarrdry]

For my use case, I enable marker dragging on the contextmenu event of a photo marker, which allows them to overwrite/update the exif gps data of the underlying image associated with the marker icon (useful for times when your camera has poor gps accuracy and you want to correct it when an image is added to the map in the wrong location).

Anyway, I found using the oms.removeMarker(myMarker) and oms.addMarker(myMarker) methods yielded a better result. These methods invoke the underlying unspiderfy/spiderfy functions anyway, but for me, on the dragend event, the image markers would just pop back to their original spiderfied positions, even though the coordinates were updated correctly.

Create the Photo Marker

const popup = `<img style="width: 200px" src="${src}"/>`
const marker = L.marker(latLng, {icon: imgIcon, riseOnHover: true})
.bindPopup(popup)
.on('contextmenu', $vue.enableMarkerDragging)
.on('dragstart', $vue.markerDragStart)
.on("dragend", $vue.saveMarkerPosition); 

Handle Moving/Spiderfying the Marker

enableMarkerDragging(event){
      event.target.dragging.enable()
},
markerDragStart(event) {
      $vue.oms.removeMarker(event.target)
},
saveMarkerPosition(event){
      var newPos = event.target.getLatLng()
      event.target.dragging.disable()
      $vue.oms.addMarker(event.target);
}