Open Layers Schuyler Erle sderlemetacarta com Christopher Schmidt
- Slides: 64
Open. Layers Schuyler Erle <sderle@metacarta. com> Christopher Schmidt <crschmidt@metacarta. com>
What is Open. Layers?
What is Open. Layers? An API for building web map applications
What is Open. Layers? An API for building web map applications Pure client-side Java. Script
What is Open. Layers? An API for building web map applications Pure client-side Java. Script “AJAX”
What is Open. Layers? An API for building web map applications Pure client-side Java. Script “AJAX” “Web 2. 0”
What is Open. Layers? An API for building web map applications Pure client-side Java. Script “AJAX” “Web 2. 0”
What is Open. Layers? An API for building web map applications Pure client-side Java. Script “AJAX” Supports open standards
What is Open. Layers? An API for building web map applications Pure client-side Java. Script “AJAX” Supports open standards Supports closed standards, too
What is Open. Layers? An API for building web map applications Pure client-side Java. Script “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 Meta. Carta's business needs
History of the Project Started after Where 2. 0 in 2005 Motivated by Meta. Carta's business needs Went through several internal revisions
History of the Project Started after Where 2. 0 in 2005 Motivated by Meta. Carta'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 Meta. Carta'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 Meta. Carta'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
Open. Layers Features: Layers OGC WMS Google Maps OGC WFS MSN Virtual Earth Geo. RSS Yahoo! Maps CSV Multimap ka-Map World. Wind (*) Canvas
Open. Layers Features: Controls Zoom / Pan Zoom Bar Mouse controls Layer Switcher (aka “legend”) Scale Ratio Scale Bar Permalink
Open. Layers Features: et cetera. . . Markers Popups Feature objects Event handling . . . and, of course. . .
Open. Layers Features: et cetera. . . Markers Popups Feature objects Event handling “AJAX”
Open. Layers: WMS <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers: WMS <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers: WMS <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers: WMS <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers: WMS <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers: WMS <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers: WMS (demo)
Open. Layers + ka-Map <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers + ka-Map <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); var kamap = new Open. Layers. Layer. Ka. Map( "Ka. Map", "http: //openlayers. org/world/index. php", {g: "satellite", map: "world"}); map. add. Layer(wms); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers + ka-Map <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS("Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'}); var kamap = new Open. Layers. Layer. Ka. Map( "Ka. Map", "http: //openlayers. org/world/index. php", {g: "satellite", map: "world"}); map. add. Layers([wms, kamap]); map. zoom. To. Max. Extent(); </script> </body> </html>
Open. Layers + ka-Map (demo)
Google Maps in Open. Layers <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var layer = new Open. Layers. Layer. Google("Google"); map. add. Layer(layer); map. zoom. To. Max. Extent(); </script> </body> </html>
Google Maps in Open. Layers (demo)
MSN Virtual Earth in Open. Layers <html> <head> <script src="http: //openlayers. org/api/2/Open. Layers. js"></script> </head> <body> <div style="width: 100%; height: 100%" id="map"></div> <script defer="defer" type="text/javascript"> var map = new Open. Layers. Map('map'); var layer = new Open. Layers. Layer. Virtual. Earth("MSN VE"); map. add. Layer(layer); map. zoom. To. Max. Extent(); </script> </body> </html>
MSN Virtual Earth in Open. Layers (demo)
Commercial Layers in Open. Layers Additionally, Open. Layers supports. . .
Commercial Layers in Open. Layers Additionally, Open. Layers supports. . . Y! Maps
Commercial Layers in Open. Layers Additionally, Open. Layers supports. . . Y! Maps Multi. Map
Commercial Layers in Open. Layers Additionally, Open. Layers supports. . . Y! Maps Multi. Map (insert your own here)
Open. Layers: Transparent WMS var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS( "Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'} ); var twms = new Open. Layers. 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. add. Layers([wms, twms]); map. zoom. To. Max. Extent();
Open. Layers: Transparent WMS (demo)
Open. Layers: WFS Open. Layers. Proxy. Host="/cgi-bin/proxy. cgi? url="; var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS( "Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'} ); var layer = new Open. Layers. Layer. WFS( "Owl Survey", "http: //www. bsc-eoc. org/cgi-bin/bsc_ows. asp? ", {typename: "OWLS", maxfeatures: 30}); map. add. Layers([wms, georss]); map. zoom. To. Max. Extent();
Open. Layers: WFS Open. Layers. Proxy. Host="/cgi-bin/proxy. cgi? url="; var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS( "Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'} ); var layer = new Open. Layers. Layer. WFS( "Owl Survey", "http: //www. bsc-eoc. org/cgi-bin/bsc_ows. asp? ", {typename: "OWLS", maxfeatures: 30}); map. add. Layers([wms, georss]); map. zoom. To. Max. Extent();
Open. Layers: WFS (demo)
Open. Layers: Geo. RSS Open. Layers. Proxy. Host="/cgi-bin/proxy. cgi? url="; var map = new Open. Layers. Map('map'); var wms = new Open. Layers. Layer. WMS( "Open. Layers WMS", "http: //labs. metacarta. com/wms/vmap 0", {layers: 'basic'} ); var georss = new Open. Layers. Layer. Geo. RSS( "Geo. RSS", "http: //earthquake. usgs. gov/recenteqsww/eqs 7 day-M 2. 5. xml" ); map. add. Layers([wms, georss]); map. zoom. To. Max. Extent();
Open. Layers: Geo. RSS (demo)
Open. Layers: Markers var map = new Open. Layers. Map('map'); var markers = new Open. Layers. Layer. Markers("Markers"); map. add. Layer(markers); var point = new Open. Layers. Lon. Lat(5, 40) var marker = new Open. Layers. Marker(point); markers. add. Marker(marker); map. zoom. To. Max. Extent();
Open. Layers: Markers var map = new Open. Layers. Map('map'); var markers = new Open. Layers. Layer. Markers("Markers"); map. add. Layer(markers); var point = new Open. Layers. Lon. Lat(5, 40) var marker = new Open. Layers. Marker(point); markers. add. Marker(marker); map. zoom. To. Max. Extent();
Open. Layers: Markers (demo)
Open. Layers: Popups var markers = new Open. Layers. Layer. Markers("Markers"); map. add. Layer(markers); popup = new Open. Layers. Popup. Anchored("Example", new Open. Layers. Lon. Lat(5, 40), new Open. Layers. Size(200, 200), "Welcome to Barcelona"); popup. hide(); map. add. Popup(popup); var point = new Open. Layers. Lon. Lat(5, 40) var marker = new Open. Layers. Marker(point); markers. add. Marker(marker); marker. events. register( "click", marker, function (e) { popup. toggle() } );
Open. Layers: Popups var markers = new Open. Layers. Layer. Markers("Markers"); map. add. Layer(markers); popup = new Open. Layers. Popup. Anchored("Example", new Open. Layers. Lon. Lat(5, 40), new Open. Layers. Size(200, 200), "Welcome to Barcelona"); popup. hide(); map. add. Popup(popup); var point = new Open. Layers. Lon. Lat(5, 40) var marker = new Open. Layers. Marker(point); markers. add. Marker(marker); marker. events. register( "click", marker, function (e) { popup. toggle() } );
Open. Layers: Popups (demo)
Open. Layers: Custom Controls var controls = [ new Open. Layers. Control. Pan. Zoom. Bar(), new Open. Layers. Control. Mouse. Defaults(), new Open. Layers. Control. Scale(), new Open. Layers. Control. Permalink() ]; var map = new Open. Layers. Map('map', { controls: controls });
Open. Layers: Custom Controls (demo)
Contributing to Open. Layers Visit the website: http: //openlayers. org/
Contributing to Open. Layers Visit the website: http: //openlayers. org/ Join the mailing lists
Contributing to Open. Layers Visit the website: http: //openlayers. org/ Join the mailing lists Meet on irc. freenode. net #openlayers
Contributing to Open. Layers Visit the website: http: //openlayers. org/ Join the mailing lists Meet on irc. freenode. net #openlayers Submit a contributor agreement
Contributing to Open. Layers Visit the website: http: //openlayers. org/ Join the mailing lists Meet on irc. freenode. net #openlayers Submit a contributor agreement Start sending patches!
Appreciation John Frank at Meta. Carta for believing in the idea Meta. Carta generally for employing us and sending us here
Appreciation John Frank at Meta. Carta for believing in the idea Meta. Carta generally for employing us and sending us here Erik Uzureau and Phil Lindsay for making it happen The growing Open. Layers community
Appreciation John Frank at Meta. Carta for believing in the idea Meta. Carta generally for employing us and sending us here Erik Uzureau and Phil Lindsay for making it happen The growing Open. Layers community You, for your time and interest
http: //openlayers. org/ Schuyler Erle <sderle@metacarta. com> Christopher Schmidt <crschmidt@metacarta. com>