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: The future is here: See new GoogleMaps 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

New Technologies Canvas element allows vector drawing to the screen in the browser OpenGL allows renderings of 3D scenes using fast hardware Scalable Vector Graphics (SVG) provides object graphics Specification is still in recommended state and there are browser compatibility issues

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 JavaScript GeoJSON Files Vector Data Library AJAX 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 MapLayers: Maybe? Leaflet: Easy for basics, brutal beyond MapBox: Cool but proprietary Others are way behind CanvasMap: 4 years old Object oriented, documented, extensible 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 JavaScript GeoJSON Files Vector Data CanvasMap AJAX Tile Server Backgrounds (raster)

Canvas Map Current version is available on the GSP server: http://gsp.humboldt.edu/CanvasMapWebsite/Documentation/CanvasMap.html Please checkout the examples

How It Works Create a web page that includes: The CanvasMap files A container DIV tag 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