Making maps with Leaflet.js

Steve Signell, Instructor (signes@rpi.edu)Robert Poirier, TA (poirir@rpi.edu)

School of ScienceRensselaer Polytechnic Institute

Monday, March 31, 2014

GIS in the SciencesERTH 4750 (38031)

Leaflet.js

• Leaflet.js: An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps: http://leafletjs.com

• Javascript is embedded in an .html file• What is an .html file?

Before we start, we must:

Download & Install the Sublime Text 3 text editor:http://www.sublimetext.com/3

Next we will create a webserver on your machine:• What is a webserver? A folder on your machine

that can be viewed accessed via a web browser.

PgAdmin/Postgres Installed?

Open Application Stack Builder and select Web DevelopmentApache/PHP.

Direct your browser to ‘localhost:800’– does it show a message from Apache? If not, ask for help and we’ll find it.

The folder containing your web server MAY be something like ‘Program Files\ApachePHP\apache\www’ If not, ask for help and we’ll find it.

Copy the ‘giscience_leaflet_template’ folder into your webserver folder.

Now open up your browser again and paste ‘/ giscience_leaflet_template ‘ onto the end of the URL: You should see something like this:

OpenGeo Suite installed?

Open up your OpenGeo Suite Dashboard and note the URL. It will probably be something like ‘localhost:8080’

On windows, the folder containing your web server MAY be something like ‘Program Files\Boundless\OpenGeo\jetty\webapps.’ If not, ask for help and we’ll find it.

Copy the ‘giscience_leaflet_template’ folder into your webserver folder.

Now open up the OpenGeo Dashboard again and paste ‘/ giscience_leaflet_template ‘ onto the end of the URL: You should see something like this:

Explore your folder

Open the helloworld.html file, and then right-clickView Page Source

Do the same with leaflet_template.html

Open the data and img folders and explore their contents.• how are GeoJSON files structured? (‘JSONView’ is a nice little

Chrome/Firefox extension that helps you decipher GeoJson files.)

Parts of a Leaflet Map

Script files

Map area

Zoom tool

layerControl

data

Edit your html

Open your helloworld.html in Sublime Text 3, and modify the text between the ‘title’ and ‘body’ tags. Make sure you save it, and then reload the webpage in your browser. Did anything change?

Open leaflet_template.html in Sublime Text, and make the following changes. After each step, save the file and then check the effect by refreshing the page in your browser. • Change the title (line 5)• Make the map a square shape (line 16)• Change the initial zoom from 9 to 8 (line 26)• Change the color of the borough boundaries from black to red (line 47)• Change the default basemap from OpenStreetMap to NAIP (line 63)• Change the name of the boroughs in the layerControl from ‘Boroughs’

to ‘NYC Boroughs’ (line 73)

Add another overlay layer

Add another overlay layer by adding the following text to leaflet_template.html, after the boroughs data gets loaded (line 60): //make a variable for the museums layer and set the style

var museums = L.geoJson(null, {

pointToLayer: function (feature, latlng) {

return L.marker(latlng, {

icon: L.icon({

iconUrl: "img/museum.png",

iconSize: [24, 28],

iconAnchor: [12, 28],

popupAnchor: [0, -25]

}),

title: feature.properties.NAME,

riseOnHover: true

});

}

});

//load the museums data from geojson

$.getJSON("data/museums.geojson", function (data) {

museums.addData(data);

});

Also add the ‘museums’ layer to the overlays in your layerControl.

Add your own layer

1) Use QGIS to save the nyc_subway_stations layer as a GeoJSON file in your /data folder. Make sure you reproject the data from UTM18N to WGS84 (EPGS:4326).

2) Add the subways stations layer to the map by copying and modifying the code from the previous slide.

3) Don’t forget to your new layer to the layerControl. Optionally, you can also load it onto the map by default.

4) Find a more appropriate .jpg or .png image for subway stops and save it to your /img folder. Then change the ‘iconURL’ so it points to this new image.

5) If you want some text to appear when you hover over the feature, you’ll have to change the ‘title: feature.properties.NAME’ to point to a field name that exists in your geojson (this is case sensitive).

Homework

11

Experiment with adding more layers and with the tutorials at leaflet.js.com.

Create a new .html file that creates a leaflet map of the RPI area and include one or more layers from your group project.