140 likes | 232 Views
GIS in the Sciences ERTH 4750 (38031). Troubleshooting: Web maps & Joins. Steve Signell , Instructor (signes@rpi.edu) Robert Poirier, TA (poirir@rpi.edu) School of Science Rensselaer Polytechnic Institute Monday, April 22, 2014. Group Webmaps. Good job on the webmaps ! Available here:
E N D
GIS in the Sciences ERTH 4750 (38031) Troubleshooting:Web maps & Joins Steve Signell, Instructor (signes@rpi.edu) Robert Poirier, TA (poirir@rpi.edu) School of Science Rensselaer Polytechnic Institute Monday, April 22, 2014
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: varsidebar = L.control.sidebar("sidebar", { closeButton: false, position: "left" }).addTo(map); //set the sidebar to show on load sidebar.show();
Eaters Map Add wms layer: varstop_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: varlayerControl = L.control.layers(baseLayers, overlays, { collapsed: false, autoZIndex: "true" } ).addTo(map);
Watershedders Map Make sure the map isn’t too wide for the screen: varlayerControl = 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
Multidimensional Data II NetCDF: a data storage format for n-dimensional datasets. webgl: a javascript Library for 3d visualization ParaView
Homework Thursday: Trip to KitWare