Leaflet – maps in html…

Download PDF

[Cross-posted from ICanHazDataScience]

Maps are a very fast way to display data that’s spatial – i.e. has a physical position associated with it.  But doing this your own way in a webpage without using Ushahidi, Google, ESRI or a Python link to QGIS etc. means finding some open-source mapping code. I’m hearing a lot about the Leaflet mapping tool, so I thought I’d have a play with it.

First, to the Leaflet quick start guide, where you create a .html file, and get a map when you click on the html file.   Usual problem here with the instructions not quite working and not detailed enough for newbies… I found it useful to click on their example map and “view source” (right-click on the page, then select “view source” in most browsers) to see what I might be missing.

One part of which is the API key for Cloudmade.  It’s also sensible to cut and paste the example code from Leaflet, because they’ve hidden a lot of text in there (like the OpenStreetMap license text).

Back to the Cloudmade API key.  You need to register for a cloudmade developer key to obtain this: I just clicked “get api key”, then “register” without filling in the name, URL or description fields. Put the API key  into the Leaflet code snippet (instead of “API-key”) and you’re away.

Of course, if you mistype the “http://cdn… ” address for leaflet.js, then you’ll spend a little while working out why your map doesn’t appear.  If this happens, then deep breath, then go back and check everything that you’ve typed into your file.