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

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.

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

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'>");

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.

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("http://gisciencerpi2014.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * FROM grid4k_hom_clip", function (data) { homgrid.addData(data);

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

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

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