Touch events

[jrjdavidson]

hi,

trying to play with touch events on map and having issues with touch events -appears to not pass coords in events so that event.getTouchCoords returns [0,0]

[jrjdavidson]

here is a snippet and a working example can be found here :

https://www.holoceneadventures.com/ivft2/ash3.html

click events work fine, touch events returns 0,0

`
browser.ui.getMapElement().on('mouseup', onMouseUp); browser.ui.getMapElement().on('touchend', onTouchEnd); function onMouseUp(event) {

const map = browser.map

if (dragged) return;
if (map && event.getMouseButton() == 'left') {
    var coords = event.getMouseCoords();
    console.log(coords);
    //set map to hover cusor over provided coordinates permanently
    map.click(coords[0], coords[1], true);
}    

}

function onTouchEnd(event) { const map = browser.map

if (dragged) return;
if (map) {
    var coords = event.getTouchCoords();
    console.log(coords,event);
    //set map to hover cusor over provided coordinates permanently
    map.click(coords[0], coords[1], true);
}    

}`

[davidmtech]

Hi,

function event.getTouchCoords() has parameter event.getTouchCoords(touchIndex). Here is a link to documentation:

https://github.com/melowntech/vts-browser-js/wiki/VTS-Browser-UI-API#event-methods

Without this parameter it will always return fallback value [0,0].

Touches works little bit different then mouse. There can be more then one touch and therefore you have to specify touch index.

You can check number of of touches by function event.getTouchesCount(). In case of 'touchend' event it can return 0 touches and in that case it will return [0,0] even when you specify touch index as 0. In case you are looking for click functionality, it is better practice to use 'touchstart' for reading coordinates (it will be more responsive).

[jrjdavidson]

Thanks David.

I'm a little confused between the two event functions event.getMouseCoords() and event.getTouchCoords() . Did you mean that event.getTouchCoords has parameter touchIndex?

In any case, I ran few more tests. It appears that that both event functions (mouse and touch) returns the correct coordinates on touchstart ( if you add the touchIndex parameter to getTouchCoords), however both functions return [0,0] on touchend.

The script I'm working on passes the coords to map.click() in order to process another function that adds a point where the user clicks. I don't want the point to be added if the user drags the map, hence the use of touchend.

I guess a workaround is to get the coords from the touchstart event, and pass them to a variable to the touchend event where the map.click function fires. if the user drags the map, the function will return before firing map.click() .

As an afterthought - any reason to use getTouchCoods over getMouseCoords over the other? In waht scenario can you get multiple touchCounts?

[davidmtech]

Sorry for the confusion, I meant to write event.getTouchCoords. (getMouseCoords was copy paste error) I have edited my previous answer so it makes more sense now. For touch events always use touch related functions getTouchCoords, getTouchesCount. Function getTouchesCount returns value bigger then one when you are touching screen with more fingers then one. Storing storing touch coordinates when during touchstart event is good practice because during touchend event there is no finger touching screen.