1. #1
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default Ext.ux.Leaflet (with offline tiles)

    Ext.ux.Leaflet (with offline tiles)


    Hey everyone, thought I'd upload an extension we've been using internally to integrate Leaflet with Sencha. I've uploaded some examples to our demo page. It includes the following examples:

    - Main: Standard usage
    - Geo: Has continuous location polling (so the user can walk around and still see where they are on the map)
    - Markers: Shows basic marker support (with nice pretty canvas pop-ups)
    - Layers: Group markers into layers and turn them on and off (ie: only show 'Restaurants' on your map)
    - Offline: Offline tile support (serves tiles that you saved locally, only useful for PhoneGap as you can include the tiles with the app)

    We use Leaflet as it allows us to have offline tiles in our phonegap applications (you are not allowed to use offline tiles with google without paying the licence). Plus you can also edit the tiles in your favourite graphics editor and make your own beautifully looking maps.

    We use our own modified version of Sencha to enable modelling support (based on ActiveRecord) so the model code in the extension may not be the best as we are used to our own. Let me know if there are any improvements to make!

    We will be submitting the leaflet changes we've made (to support the extra controls), but for the moment consider our leaflet.js file a fork of the main leaflet system.
    Attached Files

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

      0  

    Default Thanks

    Thanks


    This is great, thank you. So do you think it will be possible to store the tiles offline without using PhoneGap? I've been experimenting with GeoExt and have had some success storing tiles offline. I think that version has a datastore which can store the tiles locally.

    Thanks again,

    Digeridoopoo

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default


    I suppose you could dump them in an HTML 5 data store, but then you'd probably run into size limits pretty quickly. Not sure how GeoExt does it, but assuming you can store them on the client side you'd have to create a new L.TileLayer that can handle pulling the info from the data store (or wherever it is). The current system only allows you to pull images via a URL (and with phonegap we can load internal resources via a URL).

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    395
    Vote Rating
    17
    digeridoopoo will become famous soon enough

      0  

    Default Store...

    Store...


    Thanks....I'm not looking at a very detailed map, but I wanted the ability to zoom but have the whole thing stored offline. Will compare yours and GeoExt and see how they differ. I like your implementation of Leaflet though, it looks nice :-)

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    2
    Vote Rating
    1
    mahdi.heydari is on a distinguished road

      0  

    Default What about for sencha touch 2

    What about for sencha touch 2


    Hello
    I want to use your extension with sencha touch 2.
    Do you have any implementation for this version?

  6. #6
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default


    You need to download the map tiles and then save them in a folder within your app (In the example they are stored in the geo_images folder. It's up to you where you get them from, but you can run this quick and dirty python script to get some tiles (you will need a cloudmade API key to complete the download). You need to know in advance the tiles you want to download. I found the easiest way is to look at the 'Web Inspector' in Safari and see what images are loaded when you normally zoom around and look at your map.

    Code:
    #!/usr/bin/env python
    
    import urllib
    import re
    import os
    import sys
    
    def retrieveImage( path, name ):
        url = "http://a.tile.cloudmade.com/<api key>/997/256" + name
        folders = name.split('/')
        act_path = path
        for f in folders:
            if not f == '' and f.find('.png') == -1:
                act_path += '/' + f
        if not os.path.exists(act_path):
            os.makedirs(act_path)
        if not os.path.exists(path + name):
            print "Creating " + path + name
            urllib.urlretrieve( url, path + name)
    
    # Record the images you want
    imgs = ["/16/59916/39641.png", "/16/59915/39641.png", "/16/59917/39641.png"]
    
    path = "geo_images" #The path where you want to store the downloaded images
    for img in imgs:
        retrieveImage(path , img)
    As for Sencha Touch 2, it's still in beta so when it's done we may consider porting it across. We haven't worked out how we are going to upgrade to Sencha Touch 2 as a lot of things have changed and our internal framework code is broken (I don't like all the decisions ST2 has made, like why do we now have to use Ext.Date instead of just using the good old Date prototype? Anyway, off topic!)

  7. #7
    Sencha User
    Join Date
    Sep 2011
    Location
    Italy
    Posts
    24
    Vote Rating
    0
    kermit136 is on a distinguished road

      0  

    Default


    Hi, thanks for sharing.
    The action 'onMarkerClick' of popup doesn't work on iphone and android.
    How can I solve?

  8. #8
    Sencha User
    Join Date
    Sep 2011
    Location
    Italy
    Posts
    24
    Vote Rating
    0
    kermit136 is on a distinguished road

      0  

    Default


    Ok, I solved using css3. thank you

  9. #9
    Sencha User
    Join Date
    Sep 2009
    Posts
    27
    Vote Rating
    1
    Joel is on a distinguished road

      0  

    Default


    Hey kermit136, how did you fix it. I noticed the problem too, but it doesn't affect our production code, so it must be something I left out in the demo.

  10. #10
    Sencha User
    Join Date
    Sep 2011
    Location
    Italy
    Posts
    24
    Vote Rating
    0
    kermit136 is on a distinguished road

      0  

    Default


    I simply used the original L.Popup code of leaflet (not your code), changing the function ;onMarkerClick'

    Code:
    ///add (leaflet) popup to marker  
     popup.setContent('<p><font color="#FFFFFF">' + feature.data.name + '</font></p>', ActiveSupport.curry(app.leaflet.onMarkerClick, marker));
    popup.options.id = feature.data.id;
    marker._popup = popup;
    marker.on('click', marker.openPopup, marker);
    I override _onCloseButtonClick function of L.Popup :

    Code:
    ///
    _onCloseButtonClick: function(e) {
            Ext.dispatch({
               controller: app.controllers.controller,
               action: 'show_item',
               feature: myStore.getById(this.options.id).data 
            });
                             
            this._close();
    	L.DomEvent.stop(e);
    }
    finally I changed the css relative to the close button

    Code:
    /* Visual appearance */
    
    
    .leaflet-container {
    	background: #ddd;
    	}
    .leaflet-container a {
    	color: #000000;
    	}
    
    
    .leaflet-popup-content-wrapper, .leaflet-popup-tip {
    	background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#4BB243), to(#002616));
    	
    	box-shadow: 0 1px 10px #fff;
    	-moz-box-shadow: 0 1px 10px #888;
    	 -webkit-box-shadow: 0 1px 14px #999;
    	}
    .leaflet-popup-content-wrapper {
    	//border:groove 3px #000000;
        -moz-border-radius: 8px;
        -webkit-border-radius: 8px;
        border-radius: 8px;
    	}
    .leaflet-popup-content {
    	font: 14px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
    	}
    .leaflet-popup-close-button {
    	background: black url("myimage.png");
    
    ............