Leaflet: basics

In this part we'll look at a client-side replacement for GoogleMaps that offers more flexibility: Leaflet. We'll build a map to display data from our Postgres table (which previously we returned in text format). Later in the course we'll look at changing the basemap and using Leaflet to upload new data.

Leaflet is an Open Source JavaScript mapping library that produces flexible maps for the web across multiple platforms, including mobile phones. Although it is simple to set it up with data from OpenStreetMap, the crowdsourced map site, you can also serve your own data and maps to it.

Leaflet ties together HTML, JavaScript, and styling of maps using CSS in a way that is data-provider agnostic.

Although Leaflet comes with an API and extensive other documentation, the best way to learn it is to jump right in. With this in mind, we'll start with a quick tutorial on the basics of Leaflet, and then we'll build a map that displays some data served out from Postgres/PHP.

First, let's get used to Leaflet by running through the Quickstart Tutorial. This tutorial walks you through the key areas: mapping, adding markers, and responding to events. It uses data from the popular commercial mapping group MapBox. MapBox supply commercial mapping products, but come from a non-profit-supporting background with a real Open Source ethos, and their developers have made big contributions to a number of Open Source environments. The other thing they do is supply joined up / reworked / beautified versions of open datasets like OpenStreetMap, which is what this tutorial uses. However, using MapBox requires various developer keys. Instead, we're going to use OpenStreetMap data directly; it's not quite as attractive, but it is easier. Anyhow, here's the Leaflet Quickstart Tutorial: work through it, building it into a fresh map.html webpage. You should be able to run this from a local directory in a browser (no need to upload to dialogplus at this point - unless you want to). A few hints:

1. Remember that DIV tags would go inside the BODY.
2. Remember you link to a stylesheet thus:
   <LINK rel="stylesheet" type="text/css" href="style.css" title="Style">
3. Remember that JavaScript needs to go inside a set of <SCRIPT type="text/JavaScript"></SCRIPT> tags; for this part we'd recommend just putting them in the BODY somewhere after the DIV you set up for the map.
4. When embedding the basemap data, Leaflet recommend going into MapBox and setting up your own map referenced by a ID, which you use in the tileLayer URL to replace the word {id}. Alternatively, you can use OpenStreetMap tiles:
   
   L.tileLayer('http://tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution:
'Map data ©OpenStreetMap contributors, CC-BY-SA, Imagery ©CloudMade',
   maxZoom: 18
}).addTo(mymap);


5. Note that lots of objects' methods return the container object as a default behaviour. This is a common pattern in JavaScript, and allows this kind of nice clear code:
   
   var marker = L.marker([51.5, -0.09]);
marker.addTo(map);
marker.bindPopup("<b>Hello world!</b><br />I am a popup.");
marker.openPopup();
   
   to be treated like this:
   
   var marker = L.marker([51.5, -0.09]);
marker1 = marker.addTo(map);
marker2 = marker1.bindPopup("<b>Hello world!</b>");
marker3 = marker2.openPopup();
   
   and then to be "method chained" into something like this:
   
   L.marker([51.5, -0.09]).addTo(map).bindPopup("<b>Hello world!</b>").openPopup();
   

Once you've finished, come back here.

---

If you've got all that working, you should have a map.html page that has a pointer, circle and polygon on it, and responds to mouse clicks. Take a copy of the page and then remove the overlayed and event elements, just leaving the map. If you are struggling, grab a copy of the map.html file here. We'll now play around with a few basic elements.

The first thing we might want to think about is resizing the map. You can do this in the DIV tag, thus:

<DIV id="map" style="width: 600px; height: 400px"></DIV>

You can also set the initial zoom by setting the last figure in the view, and the lat / long with the first two figures respectively (try [0,0],2):

var map = L.map('map').setView([0.00,0.00], 2);

If you want to try a different basemap, then Andy Allan at Thunderforest (see terms and pricing) provides some nice examples.

The other thing we might want to do is add multiple layers. One option is to change the basemap, or add extra basemap layers that you can either turn on/off or with some transparency. This could include a Web Map Service (WMS) layer published by a third party, see the Leaflet WMS tutorial for further information on how to add a WMS layer to your map.

We'll leave it as a project for you to get layers to turn on and off using checkboxes or similar, but as a help, here's a good starting point.

Instead, we'll look at adding our Tweet data to Leaflet as points directly from our Postgres database using PHP.

---

[ Next: Postgres data ]

---