guofeng cao cyberinfrastructure and geospatial information laboratory department of geography...
TRANSCRIPT
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
What is OpenLayers?What is OpenLayers?
What is OpenLayers?What is OpenLayers?• An API for building web map applications
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• “Web 2.0”
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• “Web 2.0”
What is OpenLayers?What is OpenLayers?
• An API for building web map applications• Pure client-side JavaScript• “AJAX”• Supports open standards
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
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
Quick DemonstrationQuick Demonstration
• Tiling• Zoom in/out• Panning• Zoom Box!
History of the ProjectHistory of the Project
• Started after Where 2.0 in 2005
History of the ProjectHistory of the Project• Started after Where 2.0 in 2005• Motivated by MetaCarta's business needs
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
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
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
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
OpenLayers Features: LayersOpenLayers Features: Layers
• OGC WMS• OGC WFS• GeoRSS• CSV• ka-Map• WorldWind (*)• Canvas
• Google Maps• MSN Virtual Earth• Yahoo! Maps• Multimap
OpenLayers Features: ControlsOpenLayers Features: Controls• Zoom / Pan• Zoom Bar• Mouse controls• Layer Switcher (aka “legend”)• Scale Ratio• Scale Bar• Permalink
OpenLayers Features: et cetera...OpenLayers Features: et cetera...
• Markers• Popups• Feature objects• Event handling• ... and, of course ...
OpenLayers Features: et cetera...OpenLayers Features: et cetera...
• Markers• Popups• Feature objects• Event handling• “AJAX”
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>
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>
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>
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>
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>
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>
OpenLayers: WMSOpenLayers: WMS
(demo)
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>
Google Maps in OpenLayersGoogle Maps in OpenLayers
(demo)
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
Additionally, OpenLayers supports...
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
• Y! Maps
Additionally, OpenLayers supports...
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
• Y! Maps• MultiMap
Additionally, OpenLayers supports...
Commercial Layers in OpenLayersCommercial Layers in OpenLayers
• Live Maps• Y! Maps• MultiMap• (insert your own here)
Additionally, OpenLayers supports...
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();
OpenLayers: Transparent WMSOpenLayers: Transparent WMS
(demo)
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();
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();
OpenLayers: MarkersOpenLayers: Markers
(demo)
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();
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();
• www.openlayers.org• Examples: http://openlayers.org/dev/examples/• A WebGIS crash course by Eric Shook:
http://www.cigi.illinois.edu/eshook/webgis/
Further infoFurther info