Search code examples
leafletleaflet-geoman

keep focus on canvas Layer after map drag


I have a L.canvasMarker from leaflet-canvas-markers

When in editing mode with Leaflet-Geoman I can move the marker without any issue. But if I drag the map then try to drag the marker, it does not work (it has lost focus). To be able to drag it again I have to click it first, then I can drag it normally again.

My attempt of fixing this was to get the DOM element of the marker then fire focus() event. But I dont know how to get access to a leaflet layer DOM element.

my attempt of fixing below:

map.on('moveend', function(e) { 
    marker.getContainer() //getContainer does not work on layer
    marker.getContainer().setAttribute('tabindex', '0')
    marker.getContainer().focus()
    })

Also snapping from leaflet-geoman does not work, but I guess a change in the snapping calculation has to be made for this to work. Which is a complete seperate issue.

Here is a fiddle: move the marker -> Drag the map -> try to move the marker again.

https://jsfiddle.net/nkmtLdc5/


Solution

  • This is a issue of leaflet v1.6.0 and only is not working in chrome.

    When you update the leaflet to v1.7.1 it works.

    Replace your leaflet.js cdn url with this: https://unpkg.com/[email protected]/dist/leaflet.js