12 Dec 2011 3:00 PM #1
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.
21 Dec 2011 4:04 AM #2
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.
21 Dec 2011 1:23 PM #3
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).
23 Dec 2011 11:17 AM #4
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 :-)
4 Jan 2012 6:52 AM #5
What about for sencha touch 2
I want to use your extension with sencha touch 2.
Do you have any implementation for this version?
4 Jan 2012 1:34 PM #6
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.
#!/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)