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:
https://github.com/davidrs/phonegap-3.0-leaflet

Step 1: Create Map Tiles
Download MobileAtlasCreator: http://mobac.sourceforge.net/
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

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
  {    maxZoom: 18  }).addTo(map);

 

New offline code

L.tileLayer('img/mapTiles/{z}/{x}/{y}.png',
  {    maxZoom: 16  }).addTo(map);

 

Troubleshooting

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: http://davidrs.com/wp/phonegap-3-0-leaflet-offline-maps/ […]

  3. […] in addition, you´ll need net connection show map. there not much solutions offline maps. artisan ones: http://davidrs.com/wp/phonegap-3-0-leaflet-offline-maps/ […]

Leave a Reply