OpenLayers HTML5

Canvas Raster Class

Cassandra Ladino - USGS Eastern Geographic Science Center
John Aguinaldo - Harris IT Services contractor to USGS
Tim Schaub - Chief Technical Officer, OpenGeo

September 5, 2012

U.S. Department of the Interior

U.S. Geological Survey CDI Webinar Sept. 5, 2012
Overview
■ Introduction
■ USGS Remote Sensing Data
■ HTML5 Canvas
■ Issues
■ About OpenLayers
■ OpenLayers Canvas Raster Examples
■ Use Cases Satisfied
■ Under the hood - OpenLayers Raster Architecture
■ Get this Code!
■ OpenLayers resources

CDI Webinar
Sept. 5, 2012 *
 required element

Introduction
■ The primary element of the CDI Science Support Framework that
this CDI-funded project and its products focuses on is the
Applications element.

■ CDI provided $22K. EGSC contributed additional funding due to

expanded requirements plus significant in-kind contributions.
Contracted with OpenGeo to develop.

■ Cassandra behind the scenes...

■ Late start but excellent progress.

On track for on-time delivery.

■ Great opportunity to fund open source...

perfect storm...
CDI Webinar
Sept. 5, 2012 *
 NLCD
USGS Remote
Sensing Data
■ Much of our work involves remote
NED
sensing data (raster)

■ Web enabling many science

applications requires raster Landsat

analysis and rendering operations

performed on server.

■ Dynamic visualization limited -

Round-trip to server can be slow.
■ Working with generalized
data on client is quicker

CDI Webinar
Sept. 5, 2012 *
HTML5 Canvas
■ Widely supported standards-compliant image manipulation now
possible in browser using Javascript - Milestone!
■ Enables dynamic analysis/visualization of remote sensing data (e.
g., can use sliders to adjust user input and instantly visualize output)
■ Mobile compatible
■ Allows operation without network connection
■ Wide range of uses from simple to complex:
desaturate background map, magnify region,
raster statistics, raster algebra,...
■ more...

CDI Webinar
Sept. 5, 2012 *
Issues
■ Same Origin Policy (a.k.a. Cross-Site Scripting)
Same issue as with JSON & XML parsing
■ Size of image affects performance
■ Performance - computers getting faster, browsers getting faster,
processing generalized rasters...
■ Uses generalized data and is intended primarily for fast visualization
purposes to facilitate data discovery.
When accurate analysis is required, the user interface is supplemented
with an option to call more accurate server-side processes via Web
Processing Services (WPS) which process the raw data.
[added after presentation Q&A period]

CDI Webinar
Sept. 5, 2012 *
About OpenLayers
■ Library independent - plays well with all.
You get to choose the library that suits
your development needs
■ No server-side dependencies
■ Open Source - easy to debug & extend
■ GitHub - growing contributions
■ Mobile compatible
■ Interoperable with ArcGIS Server
■ Excellent substitute for Google Maps API
■ Free access to open source community for answers and advice
■ OpenLayers 3 is lean, and getting leaner!

CDI Webinar
Sept. 5, 2012 *
OpenLayers Canvas Raster Examples

CDI Webinar
Sept. 5, 2012 *
Raster Layer from Grid Data Example
http://usgs.demo.opengeo.org/ol-raster/examples/raster-grid-layer.html
■ skip live demo

■ Read WMS map

image, write to
Canvas layer

CDI Webinar
Sept. 5, 2012 *
Raster Operations Example
http://usgs.demo.opengeo.org/ol-raster/examples/raster-operations.html
■ skip live demo?

■ image
enhancement

CDI Webinar
Sept. 5, 2012 *
Magnify Raster Example
http://usgs.demo.opengeo.org/ol-raster/examples/raster-magnify.html
■ skip live demo

CDI Webinar
Sept. 5, 2012 *
Raster Query Example
http://usgs.demo.opengeo.org/ol-raster/examples/raster-query.html
■ Query elevation &
landcover data
with mouse
moves

■ Responsive!

CDI Webinar
Sept. 5, 2012 *
Raster Download Example
http://usgs.demo.opengeo.org/ol-raster/examples/raster-download.html
■ Stitches tiles

■ Simplifies map
export process

■ 1-click download
of WYSIWYG
map image

■ Email to friends &

family - Makes
great holiday
card!

CDI Webinar
Sept. 5, 2012 *
PDF Download Example
http://usgs.demo.opengeo.org/ol-raster/examples/raster-pdf.html
■ same as previous

■ Fully client-side
PDF generation!

■ annotations

CDI Webinar
Sept. 5, 2012 *
Raster Statistics Example
http://usgs.demo.opengeo.org/ol-raster/examples/raster-stats.html
■ Summarize
landcover stats
over map extent

CDI Webinar
Sept. 5, 2012 *
Raster Zonal Statistics
http://usgs.demo.opengeo.org/ol-raster/examples/raster-zonal-stats.html
■ Generate zonal
stats using
landcover and
elevation

CDI Webinar
Sept. 5, 2012 *
Raster Mask Statistics
http://usgs.demo.opengeo.org/ol-raster/examples/raster-mask.html
■ Use a vector
layer to mask out
a raster layer for
stats generation

CDI Webinar
Sept. 5, 2012 *
Use Cases Satisfied
■ NLCD Clip/Statistics
■ Decision Support System - Raster
Scoring
■ Better distribution of data within a
census block by intersecting with
NLCD urban area classes
■ Export map, PDF print
■ and many more...

CDI Webinar
Sept. 5, 2012 *
Under the hood...
To be mentioned before handoff to Tim:

■ Plan for another presentation in

December timeframe to present
completed work.

■ This was just a seed... Now wait for contributions from

worldwide open source community

CDI Webinar
Sept. 5, 2012 *
OpenLayers Raster Architecture

CDI Webinar
Sept. 5, 2012 *
OpenLayers Raster Architecture

Kidding,
It's really
only this
part

CDI Webinar
Sept. 5, 2012 *
OpenLayers.Raster.Grid
Representation of data in a regular lattice.

Grids can be derived from vector data, raster

data, or other grids - and can contain any number
of "bands."

Grids created from other layers use HTML

Canvas for rendering & "storage." Grids created
from other grids use no extra storage.

Data stored in pixel space instead of map space.

CDI Webinar
Sept. 5, 2012 *
OpenLayers.Raster.Operation
Allows additional rasters to be created using cell
based operations. (think band math)

var createNDVI = op.create(function(pixel) {

// assuming 4 bands: B, G, R, NIR
return [
(pixel[3] - pixel[2]) /
(pixel[3] + pixel[2])
];
});

var ndvi = createNDVI(grid);

CDI Webinar
Sept. 5, 2012 *
OpenLayers.Layer.Raster
For display of raster data as a normal map layer.

Uses HTML Canvas to render 1, 3, or 4 band raster data.

Layer rendering updated

whenever underlying grid data
changes.

CDI Webinar
Sept. 5, 2012 *
Get this Code!
■ Tim's OpenLayers Raster branch on GitHub
https://github.com/tschaub/openlayers/tree/raster

■ Raster functionality to be included in an

upcoming OpenLayers 2.x release

CDI Webinar
Sept. 5, 2012 *
OpenLayers Resources
■ OpenLayers on github
https://github.com/openlayers

■ OpenLayers examples
http://openlayers.org/dev/examples/example-list.html

■ OpenLayers API
http://dev.openlayers.org/docs/files/OpenLayers-js.html

■ OpenLayers Development Frameworks - GeoExt & GXP

http://geoext.org/ http://gxp.opengeo.org/master/doc/

■ OpenLayers books
http://vasir.net/openlayers_book/
http://www.packtpub.com/openlayers-create-gis-web-applications-cookbook/book

■ OpenLayers SVN sandbox contributions

http://dev.openlayers.org/sandbox/
http://svn.openlayers.org/sandbox/

CDI Webinar
Sept. 5, 2012 *
Contacts
Cassandra Ladino
Eastern Geographic Science Center, USGS
ccladino@usgs.gov

John Aguinaldo
Harris IT Services contractor to the Eastern Geographic Science Center
jagui@usgs.gov

CDI Webinar
Sept. 5, 2012 *