1. Making maps with Leaflet.js Part II
GIS in the Sciences
ERTH 4750 (38031)
Making maps with Leaflet.js Part II
Steve Signell, Instructor
Robert Poirier, TA
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 2 .php files. Save these to your ‘/data’ folder.
You will also find several .png files. Add these to your ‘/img’ folder.
Open the dbinfo.php file in Sublime Text and change the ***** in ‘user’, ‘password’ and ‘database’ to reflect your own connection parameters.
In your browser, open data/multiHomicides2geojson.php and look at the data.
Open the multiHomicides2geojson.php in Sublime Text and look at the sql statement- what is it doing?
SELECT weapon, year, num_victim,
public.ST_AsGeoJSON(public.ST_Transform(geom,4326),6) as geojson
FROM nyc_homicides
WHERE num_victim::integer >1;

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 museums 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); }
});

16. Homework
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