Making maps with Leaflet.js Part II

Making maps with Leaflet.jsPart II

Steve Signell, Instructor ([email protected])Robert Poirier, TA ([email protected])

School of ScienceRensselaer Polytechnic Institute

Monday, April 3, 2014

GIS in the SciencesERTH 4750 (38031)

Leaflet.js: Review

You should know how to:• Change the center & initial zoom level of a map• Create geoJSON files using QGIS• Create new leaflet layers and load the data from

geoJSON.• Basic styling of line & polygon features, e.g. border

width, color.• Basic styling of point features, e.g. with image icons.• Selecting a field to be displayed on mouse hover.• Adding layers to the layer control.

Leaflet.js: Questions?

You should know how to:• Change the center & initial zoom level of a map• Create geoJSON files using QGIS• Create new leaflet layers and load the data from

geoJSON.• Basic styling of line & polygon features, e.g. border

width, color.• Basic styling of point features with image icons.• Selecting a field to be displayed on mouse hover.• Adding layers to the layer control.

Leaflet.js: Tasks for Today:

You will learn how to:• Troubleshoot using the console.• Connect to real-time data: WMS• Connect to real-time data: PostGIS• Connect to real-time data: CartoDB• Create more complex symbologies:

– Fill & opacity– Radius determined by data

• Popups

Leaflet.js: Troubleshooting

Things to remember:• Refresh your webpage every time you make a

change.• Use the console feature of Chrome or Firefox– any

error messages will come up in the console and tell you which line in your .html file is throwing an error.

• A lot of problems are caused by misplaced commas, perentheses, etc.

• Once you get a major piece of a map to work, make a copy of it somewhere else in case your development version goes awry and you need to step back.

Connect to real-time data: WMS

Add the following code in the ‘Custom Overlay Layers’ section of your .html file:

var streamflow = new L.TileLayer.WMS("http://aprgis.org:8080/geoserver/argis/wms", {

layers: 'argis:streamflow',

format: 'image/png',

transparent: true,

});

Make sure to add an entry for this layer to the ‘overlays’ list so it will show up in the layer control.(Don’t forget your commas!)

Connect to real-time data: WMS

Here’s another WMS example you could add:var surfaceWindVelocity = new L.TileLayer.WMS("http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/analyses",

{

layers: "RTMA_PT_WINDVECT_01,RTMA_PT_WINDVECT_05,RTMA_PT_WINDVECT_10,RTMA_PT_WINDVECT_15",

transparent: true,

format: "image/png",

attribution: "<img src='http://nowcoast.noaa.gov/LayerInfo?layer=RTMA_PT_WINDVECT_01,RTMA_PT_WINDVECT_05,RTMA_PT_WINDVECT_10,RTMA_PT_WINDVECT_15&data=legend'></img>",

});

Make sure to add an entry for this layer to the ‘overlays’ list.

Connect to real-time data: PostGIS

In the zip folder for today, you will find a .php file multiHomicides2geojson.php. Save this to your ‘/data’ folder.

You will also find several .png files. Add these to your ‘/img’ folder.

Open the multiHomicides2geojson.php in Sublime Text and change the ***** in ‘user’, ‘password’ and ‘database’ to reflect your own connection parameters.

Look at the sql statement- what is it doing?

In your browser, open data/multiHomicides2geojson.php and look at the data.


Cut and paste this code into your .html file and add the layer to the layer control //make a variable for the homicides layer and set the style

var homicides = L.geoJson(null, {

pointToLayer: function (feature, latlng) {

return L.circleMarker(latlng, {

//circleradius

radius: 2,

//fill

fillColor: "orange",

fillOpacity: 0.8,

//border

color: "black",

weight: 1,

opacity: 1

});

},

onEachFeature: function (feature, layer) {

layer.bindPopup("Victims: " + feature.properties.num_victim );

}

});

//load the homicides data from geojson

$.getJSON("data/multiHomicides2geojson.php", function (data) {

homicides.addData(data);

});


Reload the map and try clicking on a feature. What happens? Where in the code is this functionality created?

Now modify your code a bit:• Change the ‘radius’ value from ‘3’ to ‘feature.properties.num_victims’.

What happens?• Change the bind popup code to this and see what happens:

– Layer.bindPopup("Victims: " + feature.properties.num_victim + "<img src='img/gun.png'>");

• Change the bind popup code again and see what happens:– layer.bindPopup("Victims: " + feature.properties.num_victim + "<img src='img/" +

feature.properties.weapon + ".png'>");


Try it yourself:

Copy the multiHomicides2geojson.php and save it as singleHomicides2geojson.php

Change the sql to select single homicides only

Add this new layer to your leaflet map.

Connect to real-time data: CartoDB

Add the following code in the ‘Custom Overlay Layers’ section of your .html file: //make a variable for the CartoDB homicide grid layer and set the style

var homgrid = L.geoJson(null, {

style: function (feature) {

return {

//border

color: "red",

weight:1,

//fill

fill: true,

opacity: 1,

clickable: true

};

},


layer.bindPopup("Homicides: " + feature.properties.pntcnt);

}

});

//load the boroughs data from a geojson

$.getJSON("http://gisciencerpi2014.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM grid4k_hom_clip", function (data) {

homgrid.addData(data);

});


Now lets make that layer into a choropleth (see http://leafletjs.com/examples/choropleth.html).

Add this code before your homgrid code function getColor(d) {

return d > 500 ? '#800026' :

d > 250 ? '#BD0026' :

d > 100 ? '#E31A1C' :

d > 50 ? '#FC4E2A' :

d > 25 ? '#FD8D3C' :

d > 10 ? '#FEB24C' :

d > 5 ? '#FED976' :

'#FFEDA0';

}


Add this code after the getColor function and before your homgrid code

function homGridstyle(feature) {

return {

fillColor: getColor(feature.properties.pntcnt),

weight: 2,

opacity: 1,

color: 'white',

dashArray: '3',

fillOpacity: 0.7

};

}


Now change your var homgrid code to look like this: var homgrid = L.geoJson(null, {

style: homGridstyle,


layer.bindPopup("Homicides: " + feature.properties.pntcnt);

}

});

Homework

16

Assignment # 4

Create a web map for your group project.

You will submit a zipped version of your map including the .html, img & data folders.

Also a brief write-up (1-2pg) of describing how you put the map together, successes, failures, etc.

Due Thursday, April 10

Making maps with Leaflet.js Part II

Documents