1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Winterthur, Switzerland
    Posts
    22
    Answers
    2
    Vote Rating
    1
    tschortsch is on a distinguished road

      0  

    Default Unanswered: Problem with Click-Event on a Leaflet-Map

    Unanswered: Problem with Click-Event on a Leaflet-Map


    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

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Answers
    17
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Which plugin?

    Which plugin?


    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).

    :-)

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Winterthur, Switzerland
    Posts
    22
    Answers
    2
    Vote Rating
    1
    tschortsch is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    1
    Vote Rating
    0
    pbettler is on a distinguished road

      0  

    Default


    tschortsch,
    Any update on this one?

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Location
    Winterthur, Switzerland
    Posts
    22
    Answers
    2
    Vote Rating
    1
    tschortsch is on a distinguished road

      0  

    Default Used a workaround

    Used a workaround


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

    When creating a new Marker I'm adding a lastClickTimestamp property to it:
    Code:
    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:
    Code:
    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
        }
    },

Thread Participants: 2

Tags for this Thread