1. Types of Spatial Data Sites Data portals: Find and download data –Humboldt County, National Atlas “Atlases”: General information –GoogleMaps, MapQuest Cartographic: Look cool –Wind map Spatial Web Applications: Targeted, provide information in spatial form –Sea level rise

2. Types of Web Maps Static Maps (don’t move) Dynamic maps: zoom and pan Interactive maps: something happens when the user clicks on the map “Configurable”? –Allows user to change the layers 3D: Sorry, Google just canceled this –3D “APIs” may appear in the future

3. What do user’s need?

4. Technology Needs Get raster and vector data from the server to the client as needed –Display for the user Respond to user requests for information –Balloons popup when the user clicks –Change layers, charts, etc. on clicks

5. HTML 5 Game Changer Canvas element allows vector drawing in the browser Before this we had to: –Draw using “div” elements (little squares) Really complex and slow –Pre-create tiles on the server Now: –We can draw! –http://www.w3schools.com/html/html5_canva s.asphttp://www.w3schools.com/html/html5_canva s.asp

6. Definitions Library - a collection of functions you can use API – application programming interface –How a programming language can “call” a library of functions –“alert()” is part of the API for a browser –“getElementByID()” is part of the DOM API There are APIs for: –GoogleMaps –MapQuest –Weather services –Etc.

7. Canvas API Examples ctx.fillRect(0,0,150,75); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); I would love to let you “play” with drawing in Canvas elements –Please take time to do this when you can

8. GIS Web Servers Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GeoJSON Files JavaScript Tile Server Vector Data Backgrounds (raster) Library AJAX

9. Technologies JavaScript –Much faster than expected AJAX: Asynchronous JavaScript and XML –Allow data to move from the server to JavaScript GeoJSON: Geographic JavaScript Object Notation –Allows vector data to move from server to client The DOM –Canvas Objects

10. Map Apps Problem: The libraries have not kept up –MapLayers: Maybe? –Leaflet: Still DIV based –MapBox: Cool but proprietary –Others are way behind CanvasMap: brand new –“Small” JavaScript library –Allows for: Full-feature default installation High levels of customization

11. GIS Web Servers Browser ClientServer Web Server HTML File Image File HTML File Image File Internet URL GeoJSON Files JavaScript Tile Server Vector Data Backgrounds (raster) CanvasMap AJAX

12. How It Works Create a web page that includes: –The CanvasMap files –A “canvas” element Create vector data sets from Shapefiles: –Add the attributes you want to appear in the map (e.g. HTML for a balloon) –Project the data to GoogleMaps (BlueSpray) –Save the data to GeoJSON Setup and start the CanvasMap map –Add you layers and specify attributes