troubleshooting: web maps & joins steve signell, instructor ([email protected]) robert poirier, ta...
TRANSCRIPT
Troubleshooting:Web maps & Joins
Steve Signell, Instructor ([email protected])Robert Poirier, TA ([email protected])
School of ScienceRensselaer Polytechnic Institute
Monday, April 22, 2014
GIS in the SciencesERTH 4750 (38031)
Group Webmaps
Good job on the webmaps!
Available here:
http://giscience.tw.rpi.edu/rpi_group_projects/
Lets have a look…
Group Webmaps
One thing they all need is some context– e.g. legends, interpretive text, etc.
We’ll use the leaflet-sidebar plugin
leaflet-sidebar
1) Copy the sidebar folder to your website’s ‘plugin’ folder
2) Add in the references to the plugin .css and .js files in the appropriate places:<link href="plugins/leaflet-sidebar/L.Control.Sidebar.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="plugins/leaflet-sidebar/L.Control.Sidebar.js"></script>
3) Add a <div> for the sidebar: <div id="sidebar">This is the sidebar content</div>
4) Add the javascript:var sidebar = L.control.sidebar("sidebar", {
closeButton: false,
position: "left"
}).addTo(map);
//set the sidebar to show on load
sidebar.show();
Eaters Map
Add wms layer: var stop_heatmap = new L.TileLayer.WMS("http://173.11.102.171:8080/geoserver/rpi/wms",
{
layers: 'rpi:stop_heatmap',
format: 'image/png',
transparent: true
}).addTo(map);
Add icon to legend in layerControl://make a layer control legend & toggle for the overlay maps
var overlays = {
"Restaurants": ratings,
"<img width='20px;' height='20px;' src='img/cdta_logo_bigger_circle.png'> Bus Stops": stops_87_286_289,
"Bus Routes": troy_routes
};
Farmers Map
Naming consistency: file names are case-sensitive on some servers!
Legend disappears: a code ordering issue: <div> for legend
Lets add the Sidebar and put the legend there!
Outcroppers Map
Let’s make the layerControl expanded by default:
var layerControl = L.control.layers(baseLayers, overlays, {
collapsed: false,
autoZIndex: "true"
}
).addTo(map);
Watershedders Map
Make sure the map isn’t too wide for the screen:
var layerControl = L.control.layers(baseLayers, overlays, {
collapsed: false,
autoZIndex: "true"
}
).addTo(map);
Dealing with CSVs and lots of columns
Here we have a comma separated values (CSV) file with 500+ columns:
How do we load this into PostGIS for analysis?
Dealing with CSVs and lots of columns
Q: What’s the easiest way to load data into PostGIS?
A: Shapefile import in PgAdmin/QGIS
Can we make this table into a shapefile?
This id is actually a state id (36) and a county ID put together
Dealing with CSVs and lots of columns
Here’s the steps to join this to an existing shapefile and then import into PostGIS:
1) Download TIGER counties dataset
2) Bring into QGIS, clip to NY and reproject to UTM18N
3) Create 5 digit id to match the csv by combining state & city FIPS codes (field calculator)
4) Bring the csv into QGIS
5) In the shapefile properties, JOIN the shapefile to the csv using the matching fields
6) Save this as a new shapefile
7) Import shapefile into QGIS using PgAdmin (recommended) or QGIS
BREAK
Multidimensional Data II
NetCDF: a data storage format for n-dimensional datasets.
webgl: a javascript Library for 3d visualization
ParaView
Homework
14
Thursday: Trip to KitWare