Presentation is loading. Please wait.

Presentation is loading. Please wait.

Making maps with Leaflet.js Part II Steve Signell, Instructor Robert Poirier, TA School of Science Rensselaer Polytechnic.

Similar presentations


Presentation on theme: "Making maps with Leaflet.js Part II Steve Signell, Instructor Robert Poirier, TA School of Science Rensselaer Polytechnic."— Presentation transcript:

1 Making maps with Leaflet.js Part II Steve Signell, Instructor (signes@rpi.edu) Robert Poirier, TA (poirir@rpi.edu) School of Science Rensselaer Polytechnic Institute Monday, April 3, 2014 GIS in the Sciences ERTH 4750 (38031)

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

7 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,RTM A_PT_WINDVECT_15", transparent: true, format: "image/png", attribution: " ", }); 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 + " "); Change the bind popup code again and see what happens: –layer.bindPopup("Victims: " + feature.properties.num_victim + " ");

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("http://gisciencerpi2014.cartodb.com/api/v2/sql?format=GeoJSON&q=SELECT * 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 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'; }

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


Download ppt "Making maps with Leaflet.js Part II Steve Signell, Instructor Robert Poirier, TA School of Science Rensselaer Polytechnic."

Similar presentations


Ads by Google