Making maps with leaflet js part ii
This presentation is the property of its rightful owner.
Sponsored Links
1 / 16

Making maps with Leaflet.js Part II PowerPoint PPT Presentation


  • 417 Views
  • Uploaded on
  • Presentation posted in: General

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:

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


GIS in the Sciences

ERTH 4750 (38031)

Making maps with Leaflet.jsPart 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:

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


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.


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


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

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

});


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 varhomgrid code to look like this:

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


  • Login