Phonegap 3.0 + Leaflet + Offline maps
- 21
- Aug
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.
[…] Phonegap 3.0 + Leaflet + Offline maps | David Rust-Smith […]
[…] 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/ […]
[…] 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/ […]