Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography

Geog 480: Principles of GIS Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University of Illinois at Urbana-Champaign

What is OpenLayers?

What is OpenLayers? • An API for building web map applications

What is OpenLayers? • An API for building web map applications • Pure client-side JavaScript

What is OpenLayers? • An API for building web map applications • Pure client-side JavaScript • “AJAX”

What is OpenLayers? • An API for building web map applications • Pure client-side JavaScript • “AJAX” • “Web 2.0”

What is OpenLayers? • An API for building web map applications • Pure client-side JavaScript • “AJAX” • Supports open standards

What is OpenLayers? • An API for building web map applications • Pure client-side JavaScript • “AJAX” • Supports open standards • Supports closed standards, too

What is OpenLayers? • An API for building web map applications • Pure client-side JavaScript • “AJAX” • Supports open standards • Supports closed standards, too • BSD licensed

Quick Demonstration • Tiling • Zoom in/out • Panning • Zoom Box!

History of the Project • Started after Where 2.0 in 2005

History of the Project • Started after Where 2.0 in 2005 • Motivated by MetaCarta's business needs

History of the Project • Started after Where 2.0 in 2005 • Motivated by MetaCarta's business needs • Went through several internal revisions

History of the Project • Started after Where 2.0 in 2005 • Motivated by MetaCarta's business needs • Went through several internal revisions • Final rewrite took only a month

History of the Project • Started after Where 2.0 in 2005 • Motivated by MetaCarta's business needs • Went through several internal revisions • Final rewrite took only a month • Released before Where 2.0 in 2006

History of the Project • Started after Where 2.0 in 2005 • Motivated by MetaCarta's business needs • Went through several internal revisions • Final rewrite took only a month • Released before Where 2.0 in 2006 • Already used by > 10,000 people

OGC WMS OGC WFS GeoRSS CSV ka-Map WorldWind (*) Canvas Google Maps MSN Virtual Earth Yahoo! Maps Multimap OpenLayers Features: Layers

OpenLayers Features: Controls • Zoom / Pan • Zoom Bar • Mouse controls • Layer Switcher (aka “legend”) • Scale Ratio • Scale Bar • Permalink

OpenLayers Features: et cetera... • Markers • Popups • Feature objects • Event handling • ... and, of course ...

OpenLayers Features: et cetera... • Markers • Popups • Feature objects • Event handling • “AJAX”

<html> <head> <script src="http://openlayers.org/api/2/OpenLayers.js"></script> </head> <body> <div style="width:100%; height:100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}); map.addLayer(wms); map.zoomToMaxExtent(); </script> </body> </html> OpenLayers: WMS

(demo) OpenLayers: WMS

<html> <head> <script src="http://openlayers.org/api/2/OpenLayers.js"></script> <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> </head> <body> <div style="width:100%; height:100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.Google("Google Streets"); map.addLayer(layer); map.zoomToMaxExtent(); </script> </body> </html> Google Maps in OpenLayers

(demo) Google Maps in OpenLayers

Commercial Layers in OpenLayers Additionally, OpenLayers supports...

Commercial Layers in OpenLayers Additionally, OpenLayers supports... • Y! Maps

Commercial Layers in OpenLayers Additionally, OpenLayers supports... • Y! Maps • MultiMap

Commercial Layers in OpenLayers Additionally, OpenLayers supports... • Live Maps • Y! Maps • MultiMap • (insert your own here)

var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var twms = new OpenLayers.Layer.WMS( "World Map", "http://world.freemap.in/cgi-bin/mapserv?", {map: '/www/freemap.in/world/map/factbooktrans.map', transparent:'true', layers: 'factbook', 'format':'png'} ); map.addLayers([wms,twms]); map.zoomToMaxExtent(); OpenLayers: Transparent WMS

(demo) OpenLayers: Transparent WMS

var map = new OpenLayers.Map('map'); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); map.zoomToMaxExtent(); OpenLayers: Markers

(demo) OpenLayers: Markers

OpenLayers: WMS + Google Map <script src="http://openlayers.org/api/2/OpenLayers.js"></script> </head> <body> <div style="width:100%; height:100%" id="map"></div> <script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script> <script defer="defer" type="text/javascript"> var map = new OpenLayers.Map("map"); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://geog480.cigi.illinois.edu:8080/geoserver/opengeo/wms?", {layers: "opengeo:postgis_states_conner7", transparent:'true'},{"reproject":"true" ,projection: new OpenLayers.Projection("EPSG:900913")}); var layer = new OpenLayers.Layer.Google("Google Streets", {isBaseLayer:'true'}); map.addLayers([wms,layer]); map.zoomToMaxExtent(); </script> </body> map.zoomToMaxExtent();

www.openlayers.org • Examples: http://openlayers.org/dev/examples/ • A WebGIS crash course by Eric Shook: http://www.cigi.illinois.edu/eshook/webgis/

Further info

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography