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: Sorry, Google just canceled this– 3D “APIs” may appear in the future

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!– http://www.w3schools.com/html/html5_canva

s.asp

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

Browser

Client Server

Web Server

HTML File

Image File

HTML File

Image File

Internet

URL

GeoJSON FilesJavaScript

Tile Server

Vector Data

Backgrounds (raster)Library

AJAX

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

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

GIS Web Servers

Browser

Client Server

Web Server

HTML File

Image File

HTML File

Image File

Internet

URL

GeoJSON FilesJavaScript

Tile Server

Vector Data

Backgrounds (raster)CanvasMap

AJAX

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