4/9/2018 Phonegap 3.

0 + Leaflet + Offline maps | David Rust-Smith

Past Employers My Projects Education & Skills Blog PhoneGap

Home » tech » Phonegap 3.0 + Leaflet + Offline maps

Phonegap 3.0 + Leaflet + Offline maps I started CraigIt

21 Aug
David Rust-Smith 3 Comments. tech

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. I just launched my free hyper-local
This will create a zip folder of the image tiles you need in the format: {atlas_name}/{z}/{x}/{y}.png Craig's List notifications. Buy the things
you want, but don't need cheap and
Step 2: Add Mapt Tiles to PhoneGap down the street.
Extract this folder of map tiles into your Phonegap’s www/img folder davidrs.github.io/craigit/client/

Step 3: Point Leaflet map to offline location About Me

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);

My passion is designing and developing

software for social benefit. I specialize
Troubleshooting in JS rapid prototyping.

Geolocation Plugin added to project on another computer, developing for iOS, doesn’t work on my I think Clean Code is a beautiful book
computer, developing for android. I don’t have a perfect .gitignore for my Phonegap 3.0 projects yet, so and social entrepreneurship is the
there may be artifacts specific to my computer. coolest thing ever.
Solution: Run uninstall command for that plugin. Then re-install it.

david@davidrs.com
Research ToDo
Research tradeoffs of database vs separate files. Search
Post Tagged with leaflet, PhoneGap
Search

← Previous Post Next Post →

3 Responses so far.
Leaflet | Pearltrees says:
March 21, 2014 at 6:19 pm
[…] Phonegap 3.0 + Leaflet + Offline maps | David Rust-Smith […]

http://davidrs.com/wp/phonegap-3-0-leaflet-offline-maps/ 1/2
4/9/2018 Phonegap 3.0 + Leaflet + Offline maps | David Rust-Smith
how capturing geolocation with device offline - cordova - DexPage says:
June 28, 2015 at 2:27 am
[…] 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/ […]

javascript - how capturing geolocation with device offline - cordova - CSS PHP says:
January 17, 2016 at 11:37 pm
[…] 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 Comment

Leave a Reply

You must be logged in to post a comment.

David Rust-Smith david@davidrs.com Ottawa, Canada

Apps 4 Good Dzonia - Wordpress Theme by InkThemes.com

http://davidrs.com/wp/phonegap-3-0-leaflet-offline-maps/ 2/2