mouseup on mobile?

[Christian Herzog]

Hi,

I'm using leaflet for my mobile app (phonegap 2.5) for iOS and Android.
I'm having quite some trouble being able to listen to touch events ...

The docs only talk about mouseup, down, and in the comments, it says something about touchstart e.g.: http://leafletjs.com/reference.html#events

Now I tried
        map.on('ontouchstart', function(e) {
            alert(e.latlng);
        });

and touchstart, etc. but this didn't appear to affect anything.
Also, the mouse-events arent fired on the device.

Any way to listen to touch events?

I have to recalculate some markers after every touching/panning.

Thanks!

[Christian Herzog]

I'm currently trying to workaround with creating my own touch listeners on the map div and somehow stuff that point into leaflet to get the latlong coords ... keep you posted.
If anybody else has a tip, please!

[Christian Herzog]

This is my current solution. Working on Android 4. Haven't tested 2.3 or iOS.

Register for the event:

document.getElementById('map').addEventListener('touchend', myTouchStop, false);

The callback:

        function myTouchStop(event) {


            //alert( "touch stop");
            var touches = event.changedTouches,
                    first = touches[0],
                    type = "";
            switch(event.type)
            {
                case "touchstart": type = "mousedown"; break;
                case "touchmove":  type="mousemove"; break;
                case "touchend":   type="mouseup"; break;
                default: return;
            }

            //initMouseEvent(type, canBubble, cancelable, view, clickCount,
            //           screenX, screenY, clientX, clientY, ctrlKey,
            //           altKey, shiftKey, metaKey, button, relatedTarget);

            var simulatedEvent = document.createEvent("MouseEvent");
            simulatedEvent.initMouseEvent(type, true, true, window, 1,
                    first.screenX, first.screenY,
                    first.clientX, first.clientY, false,
                    false, false, false, 0/*left*/, null);

            //first.target.dispatchEvent(simulatedEvent);
            //event.preventDefault();

            var c = map.getContainer();

            //get container point:
            var p = L.DomEvent.getMousePosition( simulatedEvent, c);
            //alert("touch p:" + p.x + "/"+p.y);

            var latlng = map.containerPointToLatLng(p);
            alert("lat:" + latlng.lat + " lng:" + latlng.lng);
        }

 

Not: the code is hacked together, not cleanedup yet ...