Have you ever noticed that when you're using a mobile device and scrolling down a webpage with a Google map, the map goes dark and prompts you to "Use two fingers to move the map"? https://i.stack.imgur.com/4HD1M.jpg
I am interested in incorporating this feature into my Leaflet map. Unfortunately, Leaflet does not currently offer this functionality out of the box.
Google calls this feature Gesture Handling. By setting it to "Cooperative," you can achieve the effect I mentioned earlier. https://developers.google.com/maps/documentation/javascript/interaction
Detecting the number of fingers being used and displaying the message, as shown in my code example, is relatively straightforward. (To see it in action, you will need to run this on a mobile device or emulator)
If only one finger is detected, I disable the touchmove event and display a warning. If multiple fingers are detected, the event is allowed to apply to the map. However, I am looking for a way to transfer that single-fingered touch event to the parent document after canceling it on the map so that the user can scroll the page instead.
Do you have any good ideas on how to accomplish this? I considered using dispatchEvent to relay the received touchmove event object directly to the parent document. For example: document.dispatchEvent(touchmoveevent); But unfortunately, that did not work. Maybe there's a better overall approach.
var myMap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19
}).addTo(myMap);
$("#mapid").on("touchmove", function(e) {
if (e.touches.length !== 2) {
$('.mask').fadeIn();
return false;
}
});
$("#mapid").on("touchend", function(e) {
if ($('.mask').is(':visible')) {
$('.mask').fadeOut();
}
});#mapid {
height: 600px;
}
.mask {
display: none;
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 400;
}
.message {
color: #ffffff;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9a5aca8afa5acbd89f8e7fae7f8">[email protected]</a>/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93fff6f2f5fff6e7d3a2bda0bda2">[email protected]</a>/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<head>
<body>
<h1>Leaflet Map</h1>
<div id="mapid"></div>
<div class="scroll-shield"></div>
<div class="mask">
<div class="message">
<p>Use two fingers to move the map</p>
</div>
</div>
<h2>Stuff below</h2>
<ul>
<li>Here</li>
<li>is</li>
<li>some</li>
<li>stuff</li>
<li>below</li>
</ul>
</body>