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: 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:

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

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 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)

9. 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

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: 2 years old
Object oriented, documented, extensible
Allows for:
Full-feature default installation
High levels of customization

11. 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)

12. Canvas Map Current version is available on the GIS “TEST” server:
Please checkout the examples

13. 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