Problem with Click-Event on a Leaflet-Map

[tschortsch]

Hello everybody

I've just spotted a problem when using a Leaflet map in a Sencha Touch 2 application. It seams that the click event on a map or a marker always fires twice instead of once.

I've created a minimal Sencha Touch application which shows the problem. You can find it here:
http://jsfiddle.net/tschortsch/2VuGU/
As soon as you click anywhere on the map the click event fires a console.log message appears.

Here is another example of a Leaflet map without the Sencha Touch application:
http://jsfiddle.net/tschortsch/xCJ4F/

Is this a problem with Sencha Touch or a problem of the Leaflet map library?

Thank you for your help!
tschortsch

[digeridoopoo]

How are you using leaflet with sencha, did you add the code yourself or did you use one of the plugins from GitHub?

Last time I checked there were a few different ones on there and one worked better than the other one

I would reccommend using the plugin from GitHub (I forget the name but search for leaflet I posted it in a previous post).

:-)

[tschortsch]

I know there are some plugins for Leaflet out there but non of them is fully implemented. So I have written a Sencha component for myself. I tried to offer the same features as the official Ext.Map component.
I've submitted my component (Ext.ux.LeafletMap) to the Sencha Marker (http://market.sencha.com) but it still waits for approval. In the mean time you can get it from my github repository: https://github.com/tschortsch/Ext.ux.LeafletMap.
There is also a ZIP-package you can download with generated JSDuck documentation to the class: https://github.com/tschortsch/Ext.ux.LeafletMap/downloads

But I think the plugin isn't the problem. The bug exists also in my mini-example posted above where I didn't use any plugins.

Greetings
tschortsch

[pbettler]

tschortsch,
Any update on this one?

[tschortsch]

Not really. I fixed my problem with the following workaround:

When creating a new Marker I'm adding a lastClickTimestamp property to it:

addMarker: function(record) {    [...]
    marker = L.marker([record.get('latitude'), record.get('longitude')], {
        icon: icon
    });
    marker.lastClickTimestamp = 0;
    marker.on('click', me.onMarkerClick, me);
}

In the click handler I can check the time difference to the last click:

onMarkerClick: function(e) {
    var marker = e.target,
        CLICK_TOLERANCE = 400,
        timeDifference;

    timeDifference = e.originalEvent.timeStamp - marker.lastClickTimestamp;

    // LEAFLET BUGFIX: only execute click if there is a certain time between last click
    if(timeDifference > CLICK_TOLERANCE) {
        marker.lastClickTimestamp = e.originalEvent.timeStamp;
        
        // handle click event
    }
},