GIS in the Sciences
ERTH 4750 (38031)
Making maps with Leaflet.js
Part II
Steve Signell, Instructor ([email protected])
Robert Poirier, TA ([email protected])
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,RTM
A_PT_WINDVECT_15",
transparent: true,
format: "image/png",
attribution: "<img
src='http://nowcoast.noaa.gov/LayerInfo?layer=RTMA_PT_WINDVECT_01,RTMA_PT_WI
NDVECT_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
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
16