Presentation is loading. Please wait.

Presentation is loading. Please wait.

Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University.

Published byGyles Clark Modified over 8 years ago

Similar presentations

Presentation on theme: "Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University."— Presentation transcript:

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

2 What is OpenLayers?

3 An API for building web map applications

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

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

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

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

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

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

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

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

12 History of the Project Started after Where 2.0 in 2005

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

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

15 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

16 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

17 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

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

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

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

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

22 OpenLayers: WMS 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(); 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();

23 OpenLayers: WMS 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(); 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();

24 OpenLayers: WMS 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(); 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();

25 OpenLayers: WMS 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(); 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();

26 OpenLayers: WMS 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(); 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();

27 OpenLayers: WMS 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(); 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();

28 OpenLayers: WMS (demo)

29 Google Maps in OpenLayers var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.Google("Google Streets"); map.addLayer(layer); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.Google("Google Streets"); map.addLayer(layer); map.zoomToMaxExtent();

30 Google Maps in OpenLayers (demo)

31 Commercial Layers in OpenLayers Additionally, OpenLayers supports...

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

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

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

35 OpenLayers: Transparent WMS 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(); 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();

36 OpenLayers: Transparent WMS (demo)

37 OpenLayers: Markers 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(); 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();

38 OpenLayers: Markers 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(); 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();

39 OpenLayers: Markers (demo)

40 OpenLayers: WMS + Google Map 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(); map.zoomToMaxExtent(); 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(); map.zoomToMaxExtent();

41 OpenLayers: WMS + Google Map 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(); map.zoomToMaxExtent(); 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(); map.zoomToMaxExtent();

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

43 Further info

Download ppt "Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University."

Similar presentations

A Roadmap of Open Source components for GI Web Services and Clients A Paul R Cooper MAGIC.

A Roadmap of Open Source components for GI Web Services and Clients A Paul R Cooper MAGIC.
Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.

Visualizing maps on the web. What is a Map? A map is a drawing that is the representation, on a certain scale, of a terrain.
Web GIS Oregon Explorer Marc G Rempel Oregon State University The Valley Library Oregon Explorer

Web GIS Oregon Explorer Marc G Rempel Oregon State University The Valley Library Oregon Explorer
GeoRSS and Webmaps. Really Simple Syndication Specification name of the FEED creator's name 2011 unique item 2008-02-01 can.

GeoRSS and Webmaps. Really Simple Syndication Specification name of the FEED creator's name 2011 unique item can.
10 Map Mashups Mapping in the Cloud Peterson. Basic Map.

10 Map Mashups Mapping in the Cloud Peterson. Basic Map.
Mapserver The PSU Experience David Percy Geospatial Data Manager, Geology Department William Garrick Manager of Academic and Research Computing Portland.

Mapserver The PSU Experience David Percy Geospatial Data Manager, Geology Department William Garrick Manager of Academic and Research Computing Portland.
Discover Perak Tourism Icons Through Web GIS

Discover Perak Tourism Icons Through Web GIS
December 2009 5 Things You Can Do With The Harvard Map www.map.harvard.edu ABCD-WWW/GIS January 19, 2011 Presented by Peter Siebert University Planning.

December Things You Can Do With The Harvard Map ABCD-WWW/GIS January 19, 2011 Presented by Peter Siebert University Planning.
Oregon Explorer Mashups. What is a mashup? a mashup is a web page or application that combines data or functionality from two or more external sources.

Oregon Explorer Mashups. What is a mashup? a mashup is a web page or application that combines data or functionality from two or more external sources.
Sue Bergeron Jesse Rouse Dept of Geology and Geography West Virginia University GIS for Everyone? The Growth of the Geospatial Web.

Sue Bergeron Jesse Rouse Dept of Geology and Geography West Virginia University GIS for Everyone? The Growth of the Geospatial Web.
Implementation of a Data Node in China's Spatial Information Grid Based on NWGISS Dengrong Zhang, Le Yu, Liping Di Institute of Spatial.

Implementation of a Data Node in China's Spatial Information Grid Based on NWGISS Dengrong Zhang, Le Yu, Liping Di Institute of Spatial.
OpenLayers Schuyler Erle Christopher Schmidt. What is OpenLayers?

OpenLayers Schuyler Erle Christopher Schmidt. What is OpenLayers?
NREL is a national laboratory of the U.S. Department of Energy Office of Energy Efficiency and Renewable Energy operated by the Alliance for Sustainable.

NREL is a national laboratory of the U.S. Department of Energy Office of Energy Efficiency and Renewable Energy operated by the Alliance for Sustainable.
Unit One: GIS Concepts In this unit… ► What is GIS? ► Types of GIS data ► What can you do with GIS? ► ArcGIS 9 license levels ► Basics of the ArcGIS 9.

Unit One: GIS Concepts In this unit… ► What is GIS? ► Types of GIS data ► What can you do with GIS? ► ArcGIS 9 license levels ► Basics of the ArcGIS 9.
Exploring large marine datasets using an interactive website and Google Earth Jon Blower, Dan Bretherton, Keith Haines, Chunlei Liu, Adit Santokhee Reading.

Exploring large marine datasets using an interactive website and Google Earth Jon Blower, Dan Bretherton, Keith Haines, Chunlei Liu, Adit Santokhee Reading.
1 Dynamic Map Service Integration Tool Mashing.

1 Dynamic Map Service Integration Tool Mashing.
Mapserver The Oregon Experience David Percy Geospatial Data Manager, Geology Department Portland State University Digital Mapping Techniques, 2006 Conference.

Mapserver The Oregon Experience David Percy Geospatial Data Manager, Geology Department Portland State University Digital Mapping Techniques, 2006 Conference.
What is ? Geographical information by the combination of: –Imagery –3D geography –Maps –Business data The virtual tour around the world 7.1.

What is ? Geographical information by the combination of: –Imagery –3D geography –Maps –Business data The virtual tour around the world 7.1.
Layouts: Creating maps and figures using ArcMap 1 GIS for Planetary Mappers June 2012, Planetary Mappers Meeting.

Layouts: Creating maps and figures using ArcMap 1 GIS for Planetary Mappers June 2012, Planetary Mappers Meeting.
OpenLayers: Data Integration 1 Prof. Dr.-Ing. Franz-Josef Behr OpenLayers: Data Integration in an Open Source Map Browser Prof. Dr. Franz-Josef Behr Hochschule.

OpenLayers: Data Integration 1 Prof. Dr.-Ing. Franz-Josef Behr OpenLayers: Data Integration in an Open Source Map Browser Prof. Dr. Franz-Josef Behr Hochschule.

Similar presentations

Ads by Google