1. ADVANCED: Making maps with Leaflet.js Part II
GIS in the Sciences
ERTH 49xx
ADVANCED: Making maps with Leaflet.js Part II
Adapted from Steve Signell
School of Science
Rensselaer Polytechnic Institute
Monday, April 3, 2014

2. 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.

3. 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.

4. 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

5. 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.

6. 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(" {
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!)

7. Connect to real-time data: WMS
Here’s another WMS example you could add:
var surfaceWindVelocity = new L.TileLayer.WMS(" {
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='
});
Make sure to add an entry for this layer to the ‘overlays’ list.

8. 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.

9. Connect to real-time data: PostGIS
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);

10. Connect to real-time data: PostGIS
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'>");

11. Connect to real-time data: PostGIS
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.

12. 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 }; },
onEachFeature: function (feature, layer) {
layer.bindPopup("Homicides: " + feature.properties.pntcnt); }
});
//load the boroughs data from a geojson
$.getJSON(" * FROM grid4k_hom_clip", function (data) {
homgrid.addData(data);

13. Connect to real-time data: CartoDB
Now lets make that layer into a choropleth (see
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'; }

14. Connect to real-time data: CartoDB
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 }; }

15. Connect to real-time data: CartoDB
Now change your var homgrid code to look like this:
var homgrid = L.geoJson(null, {
style: homGridstyle,
onEachFeature: function (feature, layer) {
layer.bindPopup("Homicides: " + feature.properties.pntcnt); }
});