Leaflet map marker dragging is not working properly on mobiles when disabling scrolling

user_15776494 0
Viewed 837

I added an OpenStreetMap map on my project using Leaflet. I wanted to disable scrolling on mobiles and wheel scroll on desktops. I used the following options found here and managed to achieve this.

const mymap = L.map('theMap', {
    dragging: !L.Browser.mobile, //disables dragging on mobiles
    tap: !L.Browser.mobile,      // mobile functionality??
    scrollWheelZoom: false       //disables wheel scrolls on desktops
}).setView([lat, lon], 13);

Also, a marker is displayed:

let marker = new  L.marker([lat,lon],{ 
draggable: true, 
dragging:true, 
autoPan: true , 
autoPanPadding: [100,100] }).addTo(mymap);

Everything works as expected on desktops, but the issue is with the marker on mobiles. It can't be dragged more than a couple of pixels and freely. Any options that I'm missing? Thanks in advance!

EDIT: The problem seems to be related with Leaflet 1.7 . Use the previous version.

leaflet openstreetmap geolocation jquery javascript
1 Answers

It seems like you might have some unnecessary properties set. All you need is the following

const mymap = L.map('theMap', { scrollWheelZoom: false }).setView([lat, lon], 13);

let marker = new L.marker([lat,lon], { draggable: true });

I have a codepen for you that demonstrates it working properly https://codepen.io/the-gis-guy/pen/LYxwpKW

user_63919150
Related