Upload
sofia-satterthwaite
View
217
Download
2
Embed Size (px)
Citation preview
Making maps with Leaflet.jsPart II
Steve Signell, Instructor ([email protected])Robert Poirier, TA ([email protected])
School of ScienceRensselaer Polytechnic Institute
Monday, April 3, 2014
GIS in the SciencesERTH 4750 (38031)
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 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;
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);
});
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);
}
});
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