support for on('touchstart') for map.on events?

[Jordan B]

Hi,

        I have my click/tap-and-hold-to-add-marker code working on desktop but not on mobile. I am using the hammer.js library with this code:

        

        var lastmousedown = new L.LatLng(0, 0);
map1.on('mousedown', function(e) {
lastmousedown = e.latlng;
});
map1.on('touchstart', function(e) {
alert('touchstart');
lastmousedown = e.latlng;
});
var hammertime = $("#map1").hammer();
hammertime.on("hold", function(ev){
var asdf = new L.marker(lastmousedown);
asdf.addTo(map1);
});

        So the first part of the code saves the lat/long of the last mousedown event, and then hammertime uses that to detect a click/tap hold event and then creates a new marker with that lat/long. It works fine for desktop, but map1.on('touchstart') never fires on mobile. Is there a way for map.on to support touchstart events?

        Thanks,

        Jordan

[Jordan B]

I managed to get it working with this code:

L.Map.mergeOptions({

touchExtend: true

});

L.Map.TouchExtend = L.Handler.extend({

initialize: function (map) {

this._map = map;

this._container = map._container;

this._pane = map._panes.overlayPane;

},

addHooks: function () {

L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this);

},

removeHooks: function () {

L.DomEvent.off(this._container, 'touchstart', this._onTouchStart);

},

_onTouchStart: function (e) {

if (!this._map._loaded) { return; }

var type = 'touchstart';

var containerPoint = this._map.mouseEventToContainerPoint(e),

   layerPoint = this._map.containerPointToLayerPoint(containerPoint),

   latlng = this._map.layerPointToLatLng(layerPoint);

this._map.fire(type, {

latlng: latlng,

layerPoint: layerPoint,

containerPoint: containerPoint,

originalEvent: e

});

}

});

L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend);

[Adam Klein]

The code above didn't work for me because this._map.mouseEventToContainerPoint(e) didn't work on touch events.

Instead (coffeescript):

L.Map.mergeOptions

  touchExtend: true

L.Map.TouchExtend = L.Handler.extend

  initialize: (map) ->

    this._map = map

    this._container = map._container

    this._pane = map._panes.overlayPane

  addHooks: ->

    L.DomEvent.on(this._container, 'touchstart', this._onTouchStart, this)

    L.DomEvent.on(this._container, 'touchend', this._onTouchEnd, this)

    L.DomEvent.on(this._container, 'touchmove', this._onTouchMove, this)

  removeHooks:  () ->

    L.DomEvent.off(this._container, 'touchstart', this._onTouchStart)

    L.DomEvent.off(this._container, 'touchend', this._onTouchEnd)

    L.DomEvent.off(this._container, 'touchmove', this._onTouchMove)

  _onTouchEvent: (e, type) ->

    return unless this._map._loaded

    touch = e.touches[0]

    containerPoint = L.point(touch.clientX, touch.clientY)

    layerPoint = this._map.containerPointToLayerPoint(containerPoint)

    latlng = this._map.layerPointToLatLng(layerPoint)

    this._map.fire type, 

      latlng: latlng

      layerPoint: layerPoint

      containerPoint: containerPoint

      originalEvent: e

  _onTouchStart:  (e) ->

    @_onTouchEvent(e, 'touchstart')

  _onTouchEnd:  (e) ->

    return unless this._map._loaded

    this._map.fire 'touchend', 

      originalEvent: e

  _onTouchMove:  (e) ->

    @_onTouchEvent(e, 'touchmove')

L.Map.addInitHook('addHandler', 'touchExtend', L.Map.TouchExtend)