Phonegap 3.0 + Leaflet + Offline maps

I am working on an app that requires offline maps for a known region, in my case the city of Ottawa. I am using Phonegap 3.0 for app development, Leaflet.js as my mapping library, and MobileAtlasCreator to download my tile package.

I have my code working and have created a git repo here:

Step 1: Create Map Tiles
Download MobileAtlasCreator:
Save Atlas as OSMdroid ZIP.
This will create a zip folder of the image tiles you need in the format: {atlas_name}/{z}/{x}/{y}.png

Step 2: Add Mapt Tiles to PhoneGap
Extract this folder of map tiles into your Phonegap’s www/img folder

Step 3: Point Leaflet map to offline location
Change your leaflet code to point to local files. For example:

Original online map code

  {    maxZoom: 18  }).addTo(map);


New offline code

  {    maxZoom: 16  }).addTo(map);



Geolocation Plugin added to project on another computer, developing for iOS, doesn’t work on my computer, developing for android. I don’t have a perfect .gitignore for my Phonegap 3.0 projects yet, so there may be artifacts specific to my computer.
Solution: Run uninstall command for that plugin. Then re-install it.

Research ToDo

Research tradeoffs of database vs separate files.

Post Tagged with ,

3 Responses so far.

  1. […] Phonegap 3.0 + Leaflet + Offline maps | David Rust-Smith […]

  2. […] In addition, you´ll probably need Internet connection to show a map. There are not much solutions for offline maps. Just artisan ones: […]

  3. […] in addition, you´ll need net connection show map. there not much solutions offline maps. artisan ones: […]

Leave a Reply