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

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: Coming in the future… Dr. Jim Graham 15 years as computer engineer and manager with HP If you use an HP ScanJet scanner you are using software I worked on 4 years running a Web-GIS company 5 years at CSU Research Scientist: www.niiss.org

What do user’s need?

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

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

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.

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

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

Technologies JavaScript AJAX: Asynchronous JavaScript and XML 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

Map Apps Problem: The libraries have not kept up CanvasMap: brand new 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

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

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