guofeng cao cyberinfrastructure and geospatial information laboratory department of geography...
TRANSCRIPT
![Page 1: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/1.jpg)
Guofeng Cao
CyberInfrastructure and Geospatial Information Laboratory
Department of GeographyNational Center for Supercomputing Applications
(NCSA)University of Illinois at Urbana-Champaign
Geog 480: Principles of GISGeog 480: Principles of GIS
![Page 2: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/2.jpg)
What is OpenLayers?What is OpenLayers?
![Page 3: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/3.jpg)
What is OpenLayers?What is OpenLayers?• An API for building web map applications
![Page 4: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/4.jpg)
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript
![Page 5: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/5.jpg)
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”
![Page 6: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/6.jpg)
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• “Web 2.0”
![Page 7: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/7.jpg)
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• “Web 2.0”
![Page 8: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/8.jpg)
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• Supports open standards
![Page 9: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/9.jpg)
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• Supports open standards• Supports closed standards, too
![Page 10: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/10.jpg)
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• Supports open standards• Supports closed standards, too• BSD licensed
![Page 11: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/11.jpg)
Quick DemonstrationQuick Demonstration
• Tiling• Zoom in/out• Panning• Zoom Box!
![Page 12: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/12.jpg)
History of the ProjectHistory of the Project
• Started after Where 2.0 in 2005
![Page 13: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/13.jpg)
History of the ProjectHistory of the Project• Started after Where 2.0 in 2005• Motivated by MetaCarta's business needs
![Page 14: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/14.jpg)
History of the ProjectHistory of the Project
• Started after Where 2.0 in 2005• Motivated by MetaCarta's business needs• Went through several internal revisions
![Page 15: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/15.jpg)
History of the ProjectHistory 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
![Page 16: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/16.jpg)
History of the ProjectHistory 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
![Page 17: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/17.jpg)
History of the ProjectHistory 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
![Page 18: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/18.jpg)
OpenLayers Features: LayersOpenLayers Features: Layers
• OGC WMS• OGC WFS• GeoRSS• CSV• ka-Map• WorldWind (*)• Canvas
• Google Maps• MSN Virtual Earth• Yahoo! Maps• Multimap
![Page 19: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/19.jpg)
OpenLayers Features: ControlsOpenLayers Features: Controls• Zoom / Pan• Zoom Bar• Mouse controls• Layer Switcher (aka “legend”)• Scale Ratio• Scale Bar• Permalink
![Page 20: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/20.jpg)
OpenLayers Features: et cetera...OpenLayers Features: et cetera...
• Markers• Popups• Feature objects• Event handling• ... and, of course ...
![Page 21: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/21.jpg)
OpenLayers Features: et cetera...OpenLayers Features: et cetera...
• Markers• Popups• Feature objects• Event handling• “AJAX”
![Page 22: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/22.jpg)
OpenLayers: WMSOpenLayers: WMS
<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>
<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>
![Page 23: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/23.jpg)
OpenLayers: WMSOpenLayers: WMS
<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>
<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>
![Page 24: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/24.jpg)
OpenLayers: WMSOpenLayers: WMS
<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>
<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>
![Page 25: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/25.jpg)
OpenLayers: WMSOpenLayers: WMS
<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>
<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>
![Page 26: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/26.jpg)
OpenLayers: WMSOpenLayers: WMS
<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>
<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>
![Page 27: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/27.jpg)
OpenLayers: WMSOpenLayers: WMS
<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>
<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>
![Page 28: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/28.jpg)
OpenLayers: WMSOpenLayers: WMS
(demo)
![Page 29: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/29.jpg)
Google Maps in OpenLayersGoogle Maps in OpenLayers<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>
<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>
![Page 30: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/30.jpg)
Google Maps in OpenLayersGoogle Maps in OpenLayers
(demo)
![Page 31: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/31.jpg)
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
Additionally, OpenLayers supports...
![Page 32: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/32.jpg)
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
• Y! Maps
Additionally, OpenLayers supports...
![Page 33: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/33.jpg)
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
• Y! Maps• MultiMap
Additionally, OpenLayers supports...
![Page 34: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/34.jpg)
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
• Live Maps• Y! Maps• MultiMap• (insert your own here)
Additionally, OpenLayers supports...
![Page 35: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/35.jpg)
OpenLayers: Transparent WMSOpenLayers: 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();
![Page 36: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/36.jpg)
OpenLayers: Transparent WMSOpenLayers: Transparent WMS
(demo)
![Page 37: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/37.jpg)
OpenLayers: MarkersOpenLayers: 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();
![Page 38: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/38.jpg)
OpenLayers: MarkersOpenLayers: 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();
![Page 39: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/39.jpg)
OpenLayers: MarkersOpenLayers: Markers
(demo)
![Page 40: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/40.jpg)
OpenLayers: WMS + Google MapOpenLayers: 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();
<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();
![Page 41: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/41.jpg)
OpenLayers: WMS + Google MapOpenLayers: 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();
<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();
![Page 42: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/42.jpg)
• www.openlayers.org• Examples: http://openlayers.org/dev/examples/• A WebGIS crash course by Eric Shook:
http://www.cigi.illinois.edu/eshook/webgis/
![Page 43: Guofeng Cao CyberInfrastructure and Geospatial Information Laboratory Department of Geography National Center for Supercomputing Applications (NCSA) University](https://reader036.vdocument.in/reader036/viewer/2022062407/56649da85503460f94a94904/html5/thumbnails/43.jpg)
Further infoFurther info