1 / 16

Making maps with Leaflet.js Part II

GIS in the Sciences ERTH 4750 (38031). 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. Leaflet.js: Review. You should know how to:

bailey
Download Presentation

Making maps with Leaflet.js Part II

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. GIS in the Sciences ERTH 4750 (38031) Making maps with Leaflet.jsPart II Steve Signell, Instructor (signes@rpi.edu) Robert Poirier, TA (poirir@rpi.edu) 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: varstreamflow = 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: varsurfaceWindVelocity = 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: "<imgsrc='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.

  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 + "<imgsrc='img/gun.png'>"); • Change the bind popup code again and see what happens: • layer.bindPopup("Victims: " + feature.properties.num_victim + "<imgsrc='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 varhomgrid = 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 varhomgrid code to look like this: varhomgrid = 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

More Related