Mobile Map with Leaflet.js

20 Jan

In my last post, I used Leaflet.js to create a map and place a marker using a QR Code. In this post, I want to show how simple it is to build a map using Leaflet.js for mobile devices.

First, download Leaflet.js and extract it.  To get it to run, all I have needed was the Dist directory. Put the Dist directory on your web server in the same folder you will write your web page. When you write your webpage you will just add:

link rel=”stylesheet” href=”dist/leaflet.css”

script src=”dist/leaflet.js”

The code for the website will look like this:

This  code will work on an iPhone, should work on Droid, and will work in newer browsers. To display the basemap, you need a developer key. In the code, you will see a line with: BC9A493B41014CAABB98F0471D759707 This is the key I grabbed from the examples section. To get your own key, go to Cloudmade.com.

I have commented the code to explain what is happening on the major lines.  For more examples – how to draw polylines and polygons – head over to the Leaflet.js page.

To see my sample map which shows all the New Mexico School Districts I have worked for, go to: educationalfacilityplanning.com/iphone.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: