map.on("click") on touch when using touch screen

[bribrah]

mapbox-gl-js version: 1.6.0

browser: Electron (chromium)

Steps to Trigger Behavior

1. instantiate map (in electron app)
2. map.on("click", () => console.log("blarg")
3. touch map and blarg does not get logged in console

Expected Behavior

touching map triggers on click events

Actual Behavior

touching map does not trigget map.on("click") events

[ryanhamley]

This appears to be a known issue with Electron. See electron/electron#8725. I'm not sure if there's anything we can do on our end. Are you seeing this all the time or is it environment specific?

[bribrah]

Actually as of now, click events are being triggered by touch events on every element except the map element. Ie document.addEventListener("dblclick", () => console.log("blarg")); gets triggered by double touch if I hit any element except the map

[ryanhamley]

Is this happening on Windows, Linux, Mac or all 3?

cc @vakila

[bribrah]

Only tested on windows (don't have access to other OS's). The app is meant for windows

[vakila]

@bribrah Without more information I'm not sure how much we can help. Can you let us know:

• Do any of the explanations/workarounds in Click events not working properly on touch screen devices electron/electron#8725 help?
• Is this happening on click, dblclick, or both? Does it happen with touch* events too?
• If you directly attach a listener to the map container element, rather than using map.on(), do you receive touch* and/or click events?
• Can you provide a minimal code example that reproduces your issue?

[bribrah]

for clarification: touch events are triggering click events on literally every other element in my app except the map, so I am confident that electron is not the issue here...

touch is failing to trigger "dblclick" and "click" events on the map

map.on("touchend") is triggered on map. "touchmove and "touchstart" are as well

If I do a document.addEventListner("click", ()=> console.log("blarg")) then touching any other element (including just white space) except the map causes blarg to get logged, but when I touch map nothing gets logged. If I use a mouse to click anywhere (including the map) blarg gets logged

The minimal code is just map.on("click", () => console.log("blarg")) The map is instatited in the normal way like so

map = new mapboxgl.Map({
		container: "map",
		style: "mapbox://styles/cheesemas46/ck12humts05971ct8gg4558rc",
		// center: [radarLocation[1], radarLocation[0]],
		center: [
			(parseFloat(mapBounds[0][0]) + parseFloat(mapBounds[1][0])) / 2,
			(parseFloat(mapBounds[0][1]) + parseFloat(mapBounds[1][1])) / 2
		],
		zoom: 15
	});

[bribrah]

This may be an issue with draw because once I get rid of

map.addControl(draw, "bottom-right");

touches register as clicks on the map
my draw object looks like this:

draw = new MapboxDraw({
		// modes: modes,
		// displayControlsDefault: false,
		controls: {
			polygon: true,
			trash: true
		}
	});

[bribrah]

I managed to fix this by using this version: https://gist.github.com/godismyjudge95/a4ea43263db53b90b05511c911cd0034

of mapboxdraw

[ryanhamley]

Oh interesting. This is apparently a known issue with GL Draw mapbox/mapbox-gl-draw#617

Thanks for pointing this out

[ArmandBahi]

In case someone like me wanted to make it without using MapboxDraw there is a possible trick using events touchstart and touchend.

Here is how I've handled

if (this.isMobile) {
  let touchEndPosition: any;
  let touchStartPosition: any;
  this.map.on('touchstart', (e) => {
    touchStartPosition = e.point;
  });
  this.map.on('touchend', (e) => {
    touchEndPosition = e.point;
    if (touchStartPosition.x === touchEndPosition.x &&
      touchStartPosition.y === touchEndPosition.y) {
      this.onMapClick_(touchEndPosition.x, touchEndPosition.y);
    }
  });
} else {
  this.map.on('click', (e: any) => {
    this.onMapClick_(e.point.x, e.point.y);
  });
}

this.isMobile is a shortcut of lib https://www.npmjs.com/package/is-mobile

So if I am on a mobile device it memorizes the position on touchstart and if the position is the same when touchend it knows this is not a scroll. Then just have to call the same method we call whe using the onclick event.

Hope it helps