I am trying to work around the issue where a map is just part of the page, and on a mobile if you scroll down to the map, it fills the screen and you can't scroll the page anymore - you scroll the map instead.
so I changed the draggable option to have two finger map scrolls. This works.
var mymap = L.map('mapid', {
center: [latitude,longitude],
zoom: 17,
layers: [streetmap], //default layer
dragging: !L.Browser.mobile, tap: !L.Browser.mobile //twofinger map controls, one finger page scrolling
});
But I want to still have the map auto-follow the player, unless they have deliberately dragged the map away (and then a button to snap back to automove). The code of relevance for that stuff is here:
var panbtn = L.easyButton({
states: [{
stateName: 'pauseAutoMove',
icon: 'fa-sign-in fa-lg',
title: 'Centre display at current Player', //Tooltip
onClick: function(btn, map) { //if you click the button whilst it is in pauseAutoMove, recentre map and unpause
currentAutoMove = true; //Set flag, that currently map is being moved to recentre
mymap.panTo([latitude,longitude]);
currentAutoMove = false; //Remove flag again
pauseAutoMove = false; //set flag to stop Auto moving map
panbtn.state('AutoMove');
}
},{
stateName: 'AutoMove', //clicking the button once it is doing AutoMove does nothing
icon: 'fa-crosshairs fa-lg',
}]
}).addTo(mymap);
mymap.on("zoomstart", function (e) { currentAutoMove = true }); //Set flag, that currently map is moved by a zoom command
mymap.on("zoomend", function (e) { currentAutoMove = false }); //Remove flag again
mymap.on('movestart',(e)=>{ //Check if map is being moved
if(!currentAutoMove){ //ignore if it was a natural PlayerLoc or programmatic update
pauseAutoMove = true; //set flag to stop Auto moving map
panbtn.state('pauseAutoMove'); //change button style to remove crosshairs and have a arrow-in icon
}
});
and elsewhere
function updatemap() { // Update the current player location on map
playerLoc.setLatLng([latitude,longitude]); //update current player marker instead of creating new ones
//other stuff goes here to update too
if(!pauseAutoMove){ //pan the map to follow the player unless it is on pause
currentAutoMove = true; //Set flag, that currently map is moved by a normal PlayerLoc Auto update
mymap.panTo([latitude,longitude]);
currentAutoMove = false; //Remove flag again
};
mymap.invalidateSize(); //reset map view
}; // end updatemap
Now that I have two-finger map-dragging, on the mobile, it does NOT register the change of state to panbtn. The map snaps back again and I can't stop it now. (Still works as intended on a PC screen).
So, my question: It seems mymap.on('movestart',(e)=>{... is NOT being triggered by a two-finger drag? Is there a way to re-enable that?
Leaflet events for touch interaction, including touch zoom (which is what happens when you use 2 fingers, even just for panning) are "touchstart", "touchmove" and "touchend".
However, these events will likely fire even with 1 finger touch, so you may need to add a check similar to Leaflet TouchZoom hamdler: https://github.com/Leaflet/Leaflet/blob/v1.7.1/src/map/handler/Map.TouchZoom.js#L68
So you could combine with what you have with something like:
function mayDisableAutomove() { //Check if map is being moved
if(!currentAutoMove){ //ignore if it was a natural PlayerLoc or programmatic update
pauseAutoMove = true; //set flag to stop Auto moving map
panbtn.state('pauseAutoMove'); //change button style to remove crosshairs and have a arrow-in icon
}
});
mymap.on('touchmove', (e) => {
if (!e.touches || e.touches.length !== 2) { return; }
mayDisableAutomove();
});
mymap.on('movestart', mayDisableAutomove);