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


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


Making maps with leaflet js part ii

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

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

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

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

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

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 wms1

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

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 postgis1

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 postgis2

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 postgis3

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

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 cartodb1

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 cartodb2

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 cartodb3

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

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