elmarquis / leaflet.gesturehandling Goto Github PK

To avoid zooming the whole page, when mouse cursor happens to be on a popup, you should add this to css:

.leaflet-popup-pane {
	pointer-events: none;
}

.leaflet-popup-close-button {
	pointer-events: all;
}

Hi the last version generate an error in lighthouse :

Does not use passive listeners to improve scrolling performance

More info here : https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools

At certain points I would like to temporarily disable interactions. Typically this would be done like so map.dragging.disable() and then map.dragging.enable() is it possible to do the same thing with this plugin installed?

Hi Guys

I'm getting pretty poor performance using this on mobile. I created a stackoverflow post here but did not any inputs.

Post copied below:

"I'm using leaflet.gesturehandling with react to support two finger scroll and ctrl+scroll-wheel with leaflet.

Testing this feature using the demo i see that on desktop all is well. On mobile however, i find the behaviour is pretty eratic. the page will scroll when trying to use two finger gestures. zooms are mixed with pans and it is just plain unpredictable. I've included my implementation which i think follows the authors guidance.

see screengrab here:

I'm wondering, have i done something wrong here? Do i need to disable page scrolling while two fingers are in contact with the leaflet container?

has anyone come accross this?

import React from "react"
import PropTypes from "prop-types"

![](https://i.stack.imgur.com/sBds8.gif)

import { MapContainer, TileLayer, Marker, GeoJSON } from "react-leaflet"
import "./leafletMap.css"
import * as L from "leaflet";
import { GestureHandling } from "leaflet-gesture-handling";

import "leaflet/dist/leaflet.css";
import "leaflet-gesture-handling/dist/leaflet-gesture-handling.css";

const proj4 = typeof window !== `undefined` ? require("proj4leaflet") : null

class LeafletMap extends React.Component {
  static propTypes = {
    bounds: PropTypes.array,
    startMarker: PropTypes.array,
    endMarker: PropTypes.array,
    route: PropTypes.object,
  }

  static defaultProps = {
    position: [51, -1],
    zoom: 13,
    markerText: "",
  }

  render() {
    /* Required by gatsby build, works fine witohut in develop since window is defined browser? */
    if (typeof window !== "undefined") {
      // Setup the EPSG:27700 (British National Grid) projection.
      var crs = new proj4.CRS(
        "EPSG:27700",
        "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs",
        {
          resolutions: [
            896.0,
            448.0,
            224.0,
            112.0,
            56.0,
            28.0,
            14.0,
            7.0,
            3.5,
            1.75,
          ],
          origin: [-238375.0, 1376256.0],
        }
      )

      // Initialize the map.
      var mapOptions = {
        crs: crs,
        minZoom: 0,
        maxZoom: 9,
        attributionControl: false,
        //gestureHandling: true
      }

      L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);

      return (
        
        <MapContainer bounds={this.props.bounds} {...mapOptions}>
          <TileLayer
            attribution='&copy; &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=4O65KRx7pDwdZq98W173UDKX1OSUNOAq"
          />

          <GeoJSON data={this.props.route} />
          <Marker position={this.props.startMarker} />
          <Marker position={this.props.endMarker} />
        </MapContainer>
      )
    }
    return null
  }
}

export default LeafletMap

Hi,

Very nice to have wrapped your solution in a Leaflet plugin!

When trying the demo page, I am still getting stuck in map navigation after having single touched the map twice successively, whereas touch panning is expected to be enabled only for 2 simultaneous touches.

I am using Chrome mobile on Android 7.

Scroll the page as instructed, scrolling at least once starting the scroll in the map viewport. As expected, the map does not pan, but the whole page scrolls. Release the finger.

I have not seen any overlay message at this point, not sure if it is already implemented.

Then continue trying to scroll, starting the touch again on the map viewport. This time, the map pans like the standard Leaflet behaviour.

Currently the language of the browser is used to show the overlay text on the map, but some people do have a basic browser in 1 language they can't (or don't bother to) change.
This would be useful in sites where the js used to show the map is built dynamically (and the user language choice is taken into account). Personally I'm thinking about a number of wordpress site where I use leaflet as the tool to show maps.

my system

Android 7.0

tested browser

• Firefox
• Android standard browser

aditional info

i have also this problem on windows 10 with google chrome Version 66.0.3359.181 (Offizieller Build) (64-Bit) and active developer tools

Hi there,

Thanks for this great plugin to Leaflet that makes it easy to display simple gestures.
We are actively using this plugin in our Angular 9 application and recently updated Leaflet to the newest version which we had to downgrade again due to Leaflet.GestureHandling not working with that version.

The latest version of Leaflet has been released on September 4, 2020, and comes with some fixes to touchscreens that might affect the use of this plugin. See release here: https://leafletjs.com/2020/09/04/leaflet-1.7.1.html

Steps to reproduce:

1. Update Leaflet package from 1.6.0 to 1.7.1
2. See that no error's occurred but Leaflet.GestureHandling no longer works.

Looking forward to seeing the plugin getting updated :)

Hi,

I am getting this error after calling map.remove(); and creating a new L.map:

Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined

If I remove the plugin in the map initialization everything is working fine.

Thanks!

Steps to reproduce:
Tested on Windows 10 desktop Firefox.

1. Initialize a map. For example: https://elmarquis.github.io/Leaflet.GestureHandling/examples
2. run console command map.remove()
3. Initialize map again with original init code
4. Try to drag the map
5. You'll get a TypeError null

What is the correct way of enabling fadeout for the message, exactly as it fades in?
I got the css class of the message .leaflet-gesture-handling-scroll-warning:after
And I'm trying to manipulate

-webkit-animation: leaflet-gestures-fade 0.8s forwards;
animation: leaflet-gestures-fade 0.8s forwards;

without success

First thanks a lot for creating this plugin - it is great that there is finally a solution to the dragging issue on mobile devices for leaflet.js!

I wonder if the code could be enhanced to also support different languages for the text which is currently added in the CSS file via content: '...' attribute? I search for possible solution and found this: https://stackoverflow.com/questions/29743156/reading-internationalized-content-from-css-file/29743624#29743624

Do you think this could be a possible approach to add i18n support to your plugin?

I am submitting:

• an Issue
• Feature request.

It would be nice if you can show example about how to use this plugin with ngx-Leaflet.
I am using ngx-leaflet in a poc project using Angular 6, and would like to use GestureHandling library to avoid scroll trapping in map control when scrolling the page.

I tried all steps explained under

Use as a module

section in Readme file.
I added gestureHandling: true flag in MapOptions under ngOnInit function like so:

ngOnInit(){
   ...
    this.initialBounds = L.latLngBounds(corner1, corner2);
      
    this.options  = {
      layers: [
        this.darkGrayBaseLayer,
      ],
      zoom: 4,
      center: this.initialBounds.getCenter(),
      gestureHandling: true,
    };
}

and tried to compile I got following error with application failing to compile:

Type '{ layers: Layer[]; zoom: number; center: [number, number]; gestureHandling: boolean; }' is not assignable to type 'MapOptions'.
  Object literal may only specify known properties, and 'gestureHandling' does not exist in type 'MapOptions'.

Also I am hooking in GestureHandler in onMapReady function like so:

onMapReady(map: L.Map) {
    L.Map.addInitHook("addHandler", "gestureHandling", GestureHandling);
 ......
} 

is this correct place to hook-in GestureHandling?
I am not able to verify as application fails to compile

I would appreciate it very much if you could point me in the right direction.

I have a layer with feature mouseover

 const onEachFeature = (feature, layer) => {
  layer.on({
    mouseover: highlightFeature,
    mouseout: resetHighlight,
    click: zoomToFeature
  });
}

 this.countryLayer = L.geoJson(countriesGeoJson, {style: countryStyle, onEachFeature: onEachFeature});
 this.countryLayer.addTo(this.map);

When the mouseover key is present, dragging (with or without CTRL) is only possible when the mouse entered the map by sea. If it was entered by land, dragging is not possible.

Even when highlightFeature is an empty function.

The libary is multilangue but use the wrong (system) default. Is it possible to use the language (if available) defined in the html attribute? It's not allowed to use several languages in one html page without lang attribute. This is a WCAG 3.1.2 failure.

Hello!

Would it be possible to make it compatible out of the box with the ACF Openstreetmap Plugin ?

It has the option to output the working Leaflet js, which makes it easy to use (also for non developers). Is it possible to create a hook or maybe even simpler add a checkbox on the settings page of the aforementioned plugin to enable gesture handling?

Thanks very much

I'd like to see this package published on https://npmjs.com to keep up to date with this nice Plugin 👍

https://docs.npmjs.com/getting-started/publishing-npm-packages

Is there anyone that can go through some of the PRs?

.leaflet-container:after has z-index too high!!! in responsive site navbar doesen't work correctly

Hi Everybody! First of all thanks a lot for the amazing library. I've searched to find how I can use this library for React Leaflet. I couldn't make it work on React leaflet. I'll be very thankful if someone has any solution for React. leaflet:
my react leaflet version is:
"react-leaflet": "^3.0.5",

Imagine someone is using the map like below as the react-leaflet docs:

<MapContainer center={position} zoom={13} scrollWheelZoom={false}> <TileLayer attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <Marker position={position}> <Popup> A pretty CSS3 popup. <br /> Easily customizable. </Popup> </Marker> </MapContainer>

We have implemented 'Leaflet.GestureHandling' in a map and it shows the warning overlay with text as planned, but somehow it is also triggered when touching/clicking on the UI buttons on mobile (iOS). We are using 'Leaflet.EasyButton for the buttons.

We thought that by adding the following classes from EasyButton to the 'ignorelist' would make Leaflet.GestureHandling work but it did not:

       var ignoreList = [	
         ...	   
    "button-state",
        "easy-button-button",
        "easy-button-container",
         ...			

Any inputs on which step we may be missing?

I have updated Leaflet to version 1.7.1 and now Leaflet.GestureHandling has no functionality. The message does not come and you can scroll on the map.

First time that Ctrl+Mouse-wheel-scroll is used, the event seems to be caught by the Internet browser and the result is a change in the zoom level of the whole browser window, not in the zoom level of the map. The following scrolls are changing the map zoom level, as expected.

I am using Windows 10 and it happens both in Firefox and Chrome.

A simple test page I have made is at http://www.dxmaps.com/prueba.html

Am I doing something wrong or is there some workaround?

Hi there,

I have the Problem that the Map sometimes is not draggable when I reload the Website with STRG +R or STRG + SHIFT + R. The cursor switches not to the hand symbol but remains as an arrow.

I can't see any error in the console output and there is absolutely no recognizable pattern. A few times it works and suddenly it doesn't.

When i disable the plugin all works fine. I'm using the latest version.

Any Ideas?

Thank you :)

You can not interact with the map, when u are browsing with the "SamsungBrowser".
This browser can be downloaded on any Android-Device through the PlayStore

Issue:
Interactions are not working after scroll page + touch the map, on mobile.

How to reproduce:

1. Scroll the page by touching the map with one finger. The "Use 2 fingers to move the map" appear.
2. Touch the map before the message disappear.
3. The interactions are disabled and are never re-enabled. This causes issues such as clickable map elements such as polygons are no longer clickable, the zoom out button zoom the map in when double click, etc.

NOTE: The bug is also reproducible with Google Chrome desktop, when mobile device is turned on in the developer tools.

Solution:
Add the following line:

this._enableInteractions();

in method _handleTouch

        _handleTouch: function (e) {
            //Disregard touch events on the minimap if present
            var ignoreList = ["leaflet-control-minimap", "leaflet-interactive", "leaflet-popup-content", "leaflet-popup-content-wrapper", "leaflet-popup-close-button", "leaflet-control-zoom-in", "leaflet-control-zoom-out"];

            var ignoreElement = false;
            for (var i = 0; i < ignoreList.length; i++) {
                if (L.DomUtil.hasClass(e.target, ignoreList[i])) {
                    ignoreElement = true;
                }
            }

            if (ignoreElement) {
                if (L.DomUtil.hasClass(e.target, "leaflet-interactive") && e.type === "touchmove" && e.touches.length === 1) {
                    L.DomUtil.addClass(this._map._container, "leaflet-gesture-handling-touch-warning");
                    this._disableInteractions();
                } else {

                    // ###### HERE ######
                    this._enableInteractions();

                    L.DomUtil.removeClass(this._map._container, "leaflet-gesture-handling-touch-warning");
                }
                return;
            }
            ...

Hi

I have an issue when i attach an event click popup to the marker.

var map = L.map('road-map', {scrollWheelZoom: true, minZoom:6, maxZoom:16, gestureHandling: true});

$.each(POINTS_INFOS, function(index, value) {
marker.on('click', function(e){
console.log(e);
});
....................
});

The function is call twice with gestureHandling: true, it's work if i do gestureHandling: false

Thank a lot

I'm using the leaflet dragend event handler in my code as below
this.map.on('dragend', () => {
this.filters.page = 1;
this.businesses = [];
this.loadBusinesses(this.map.getCenter());
});

This continues to work fine on desktop as you move the map the loadBusinesses() function gets fired it used to work just the same on mobile as well however when I added leaflet gesture handling it stopped. I haven't tried this on android but I presume it's the same. Everything else has worked great so far and it was very simple to integrate into my leaflet maps. Any help with this issue though would be greatly appreciated.

Hi,
First of all thanks for the wonderful plugin!!!
Noticed that the 2 finger drag of the map works on Android 8.0 (HTC 10 Phone).
Tested it also on Asus Zenpad 8.0 Android 6.01 there it works a 100%.
But doesn't work on Android 7.0 (HTC 9 Phone).
Also tested it on an old Samsung Tab 10.1 Android 4.4 and there it works perfect.
All tests are done in Chrome mobile browser.
Regards,
David

Google Maps aligns the overlay text to the center, but Leaflet.GestureHandling does not.

This becomes noticeable at narrow map widths and looks off considering the text box itself is centered at wider map widths.

Google Maps:

Leaflet.GestureHandling:

Hello,
in version 1.1.5 some changes of pull request https://github.com/elmarquis/Leaflet.GestureHandling/pull/16/files have been not includes. This changes fix problem with message in Android.
The code:

if (e.target.classList.contains('leaflet-interactive') && e.type === 'touchmove' && e.touches.length === 1){
      this._map._container.classList.add('leaflet-gesture-handling-touch-warning');
      this._disableInteractions();
 } else {
      this._map._container.classList.remove('leaflet-gesture-handling-touch-warning');
 }

fix this problem removing the class 'leaflet-gesture-handling-touch-warning'. Your previous code for this, does not remove the class correctly e.target.classList.remove('leaflet-gesture-handling-touch-warning');
Could you include this in a new version?

Thanks!!

I've been using this plugin for the first time and followed the instructions of the readme file. When initializing the map, I've set gestureHandling: true and set the following options:

gestureHandlingText: {
     scroll: 'Test scrolling',
     touch: 'Test touch',
     scrollMac: 'Test scrolling on mac'
}

after I've set those options, nothing appears. Not even the background tho the scroll behaviour is fine.

As in the documentation mentioned, for "older" versions gestureHandlingText should work too, which it does but I'm using the most recent version of this plugin. So both versions should work perfectly fine.

Is this just me or can someone reproduce this problem?

Hi,
I think the text about Ctrl + scroll would be more clear if you say:
"Use Ctrl and scroll to zoom the map!"
Now it looks like you have to use Ctrl and + and scroll. "Ctrl +" and "Ctrl -" are zoom functions on multiple applications.
Regards,
David

Hi there - thanks for the code.

I'm getting this occasionally:

I'm not specifying any options, just gestureHandling: true. I'm not sure whether this is a bug if no options are provided, and/or whether it is due to the map being destroyed under the feet of the code (which can happen during page transition).

Is it possible to use the 'worldCopyJump' functionality in combination with gestureHandling?
worldCopyJump does not work on mobile device after setting gesturehandling:true

https://codepen.io/MiGo70/pen/jOayNjr

This problem is similar to what has been described in issue #5.

It can be reproduced with the plugin demo page https://elmarquis.github.io/Leaflet.GestureHandling/examples, but also with others, e.g. https://avalanche.report

It happens in Microsoft Edge and Internet Explorer (tested with ie 11), Firefox and Chrome are working as expected.

The first scroll with the mouse wheel zooms the map, then the text "Use ctrl + scroll to zoom the map" ist displayed.
The second scroll with the mosue wheel works as expected, the map is NOT zoomed.
If you then move the mouse pointer off the map and over it again and use the mouse wheel to scroll, the map is zoomed and then the text "Use ctrl + scroll to zoom the map" is displayed.
This can be repeated until the map is fully zoomed in (or out).

On mobile, when moving the map with two fingers I get a strange unwanted behavior of the map getting dragged and zoomed at the same time.
I want to disable zooming the map when dragging it, so I tried to accomplish that the way doccumented in the official website of leafletjs which is using "touchZoom: off" option.
For some reason it's not working for me, when disabling touchZoom option the map isn't dragable anymore.
What is the correct way for fixing that?

This error happens because the classList property is missing on elements in SVG-namespace in IE.

Can be easily fixed by using L.DomUtil.hasClass instead.

if (L.DomUtil.hasClass(e.target, ignoreList[i]) { 

Example:
https://plnkr.co/edit/5LzfHxAfO6qZG7cmkf4R?p=preview

In order to minimise the file size of the plugin, consider omitting the language translations from the js and instead load them over ajax after the plugin is initialised.

Since the plugin is now an NPM module, the language files could be loaded from unpkg.

It gives this error
Multiple definitions of a property not allowed in strict mode
File: leaflet-gesture-handling.js, Line: 543, Column: 21

Even the demo link doesn't work in IE.

Thank you!

Thanks Elmarquis for your work on this plugin.

I have noticed an issue (on PC using mouse, not tried mobile with touch) when dragging the map that affects when dragging the map near a marker or polygon, and so for a map with many markers it is significant.
The dragging will start as expected but if the mouse is moved such that the mouse goes over a marker then the dragging will stop, despite continuing to hold the mouse button down.
I imagine that when the mouse goes over the marker or polygon it somehow triggers one of the events you use to disable dragging.

I'm not sure if there is a way to detect if currently dragging and if so prevent the event triggering in some way?

Hi,
Nice plugin this one, almost essential if using on a mobile site. I have one issue though, I’m using on a map in conjunction with the Marker Cluster plugin https://github.com/Leaflet/Leaflet.markercluster and whenever I tap a cluster, it brings up the overlay which doesn’t go until I tap it again. Works fine on desktop.
Any ideas?

Hi there,

in my Map the overlay is only Visible as small bar on the left (mobile and desktop).
There is also no text visible.
Screenshot Desktop: https://ibb.co/JyTqJhn
Screenshot Mobile: https://ibb.co/YWN2sSr

I've tested it in iOS Safari (iOS 13.5 & iPadOS 14.1) and MacOS Safari and Firefox.

I'm using leafletjs 1.7.1 and GestureHandling (leaflet-gesture-handling.css & leaflet-gesture-handling.js from dist folder)

What can I do to fix this issue?

Kind regards,
Kai

The warning message "Use ctrl + scroll to zoom the map" stays after the duration period on shadow DOM. That is the case because document.getElementsByClassName is used, which will not find elements in the shadow DOM. There is a pull request that may resolved the problem :
#38

Example: https://jsfiddle.net/ea1xou73/1/

How to reproduce:

1. Try to drag map
2. Try to mouseover marker
3. Try to mouseout marker
4. Try to drag map again
5. Oups.
6. Try to mouseout the map
7. Try to drag again
8. It works.

Maybe duplicate #11

As we can see from the demo page, the gestures handling overlay message disappears too much abruptly (without fading-out) from the map.

It would be great to add some kind of transition for the opacity (from 1 to 0), before removing the .leaflet-gesture-handling-scroll-warning class (which should be responsible for the sudden disappearance of the scroll message).

please add an option to enable or disable the gestureHandling dynamically for example when entering full-screen.

this.map. gestureHandling.enabled(); // return bool
this.map. gestureHandling.disable();
this.map. gestureHandling.enable();

Hi,

We're stuck on Leaflet v1.6.0 because if we update to v1.7.1 then marker popups can no longer be clicked open when using Gesture Handling on https://ryesussex.uk (map is at the bottom of the page).

Has anyone else experienced this?

Oliver

Hi!

When i switch to the mobile device view in google chrome on windows (switch to the "examine"-Toolbar, then use "Toggle Device Toolbar" (Ctrl + Shift + M)) i get the following error message:

Uncaught TypeError: Cannot read property 'dragging' of undefined
at HTMLDivElement._handleTouch (leaflet-gesture-handling.min.js:1)
_handleTouch @ leaflet-gesture-handling.min.js:1

It still works (though it IS a little buggy on mobile devices). but i'm wondering if this also happens on chrome on android phones.