Presentation is loading. Please wait.

Presentation is loading. Please wait.

OpenLayers Schuyler Erle Christopher Schmidt. What is OpenLayers?

Published by Modified over 9 years ago

Similar presentations

Presentation on theme: "OpenLayers Schuyler Erle Christopher Schmidt. What is OpenLayers?"— Presentation transcript:

1 OpenLayers Schuyler Erle Christopher Schmidt

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 OpenLayers + ka-Map 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();

30 OpenLayers + ka-Map var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}); var kamap = new OpenLayers.Layer.KaMap( "KaMap", "http://openlayers.org/world/index.php", {g: "satellite", map: "world"}); 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'}); var kamap = new OpenLayers.Layer.KaMap( "KaMap", "http://openlayers.org/world/index.php", {g: "satellite", map: "world"}); map.addLayer(wms); map.zoomToMaxExtent();

31 OpenLayers + ka-Map var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'}); var kamap = new OpenLayers.Layer.KaMap( "KaMap", "http://openlayers.org/world/index.php", {g: "satellite", map: "world"}); map.addLayers([wms, kamap]); 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 kamap = new OpenLayers.Layer.KaMap( "KaMap", "http://openlayers.org/world/index.php", {g: "satellite", map: "world"}); map.addLayers([wms, kamap]); map.zoomToMaxExtent();

32 OpenLayers + ka-Map (demo)

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

34 Google Maps in OpenLayers (demo)

35 MSN Virtual Earth in OpenLayers var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.VirtualEarth("MSN VE"); map.addLayer(layer); map.zoomToMaxExtent(); var map = new OpenLayers.Map('map'); var layer = new OpenLayers.Layer.VirtualEarth("MSN VE"); map.addLayer(layer); map.zoomToMaxExtent();

36 MSN Virtual Earth in OpenLayers (demo)

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

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

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

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

41 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();

42 OpenLayers: Transparent WMS (demo)

43 OpenLayers: WFS OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var layer = new OpenLayers.Layer.WFS( "Owl Survey", "http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?", {typename: "OWLS", maxfeatures: 30}); map.addLayers([wms,georss]); map.zoomToMaxExtent(); OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var layer = new OpenLayers.Layer.WFS( "Owl Survey", "http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?", {typename: "OWLS", maxfeatures: 30}); map.addLayers([wms,georss]); map.zoomToMaxExtent();

44 OpenLayers: WFS OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var layer = new OpenLayers.Layer.WFS( "Owl Survey", "http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?", {typename: "OWLS", maxfeatures: 30}); map.addLayers([wms,georss]); map.zoomToMaxExtent(); OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var layer = new OpenLayers.Layer.WFS( "Owl Survey", "http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?", {typename: "OWLS", maxfeatures: 30}); map.addLayers([wms,georss]); map.zoomToMaxExtent();

45 OpenLayers: WFS (demo)

46 OpenLayers: GeoRSS OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var georss = new OpenLayers.Layer.GeoRSS( "GeoRSS", "http://earthquake.usgs.gov/recenteqsww/eqs7day-M2.5.xml" ); map.addLayers([wms,georss]); map.zoomToMaxExtent(); OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url="; var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} ); var georss = new OpenLayers.Layer.GeoRSS( "GeoRSS", "http://earthquake.usgs.gov/recenteqsww/eqs7day-M2.5.xml" ); map.addLayers([wms,georss]); map.zoomToMaxExtent();

47 OpenLayers: GeoRSS (demo)

48 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();

49 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();

50 OpenLayers: Markers (demo)

51 OpenLayers: Popups var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); popup = new OpenLayers.Popup.Anchored("Example", new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200), "Welcome to Barcelona"); popup.hide(); map.addPopup(popup); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); marker.events.register( "click", marker, function (e) { popup.toggle() } ); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); popup = new OpenLayers.Popup.Anchored("Example", new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200), "Welcome to Barcelona"); popup.hide(); map.addPopup(popup); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); marker.events.register( "click", marker, function (e) { popup.toggle() } );

52 OpenLayers: Popups var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); popup = new OpenLayers.Popup.Anchored("Example", new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200), "Welcome to Barcelona"); popup.hide(); map.addPopup(popup); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); marker.events.register( "click", marker, function (e) { popup.toggle() } ); var markers = new OpenLayers.Layer.Markers("Markers"); map.addLayer(markers); popup = new OpenLayers.Popup.Anchored("Example", new OpenLayers.LonLat(5,40), new OpenLayers.Size(200,200), "Welcome to Barcelona"); popup.hide(); map.addPopup(popup); var point = new OpenLayers.LonLat(5, 40) var marker = new OpenLayers.Marker(point); markers.addMarker(marker); marker.events.register( "click", marker, function (e) { popup.toggle() } );

53 OpenLayers: Popups (demo)

54 OpenLayers: Custom Controls var controls = [ new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.MouseDefaults(), new OpenLayers.Control.Scale(), new OpenLayers.Control.Permalink() ]; var map = new OpenLayers.Map('map', { controls: controls }); var controls = [ new OpenLayers.Control.PanZoomBar(), new OpenLayers.Control.MouseDefaults(), new OpenLayers.Control.Scale(), new OpenLayers.Control.Permalink() ]; var map = new OpenLayers.Map('map', { controls: controls });

55 OpenLayers: Custom Controls (demo)

56 Contributing to OpenLayers Visit the website: http://openlayers.org/http://openlayers.org/

57 Contributing to OpenLayers Visit the website: http://openlayers.org/http://openlayers.org/ Join the mailing lists

58 Contributing to OpenLayers Visit the website: http://openlayers.org/http://openlayers.org/ Join the mailing lists Meet on irc.freenode.net #openlayers

59 Contributing to OpenLayers Visit the website: http://openlayers.org/http://openlayers.org/ Join the mailing lists Meet on irc.freenode.net #openlayers Submit a contributor agreement

60 Contributing to OpenLayers Visit the website: http://openlayers.org/http://openlayers.org/ Join the mailing lists Meet on irc.freenode.net #openlayers Submit a contributor agreement Start sending patches!

61 Appreciation John Frank at MetaCarta for believing in the idea MetaCarta generally for employing us and sending us here

62 Appreciation John Frank at MetaCarta for believing in the idea MetaCarta generally for employing us and sending us here Erik Uzureau and Phil Lindsay for making it happen The growing OpenLayers community

63 Appreciation John Frank at MetaCarta for believing in the idea MetaCarta generally for employing us and sending us here Erik Uzureau and Phil Lindsay for making it happen The growing OpenLayers community You, for your time and interest

64 http://openlayers.org/ Schuyler Erle Christopher Schmidt

Download ppt "OpenLayers Schuyler Erle Christopher Schmidt. What is OpenLayers?"

Similar presentations

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
SIM K-12 WELCOME TO SYSTEM IMPLEMENTATION AND MONITORING K-12.

SIM K-12 WELCOME TO SYSTEM IMPLEMENTATION AND MONITORING K-12.
OpenLayers Open Source Web Map Development with OpenLayers.

OpenLayers Open Source Web Map Development with OpenLayers.
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.
Beebee's Portfolio (9/2005 – 4/2007, for Microsoft Windows Live)

Beebee's Portfolio (9/2005 – 4/2007, for Microsoft Windows Live)
ABCD-GIS and ABCD-WWW combined meeting Survey of Web Mapping Projects Part 2 of 8: The “Hello World” web map, and how to get started web map mashing. Jeff.

ABCD-GIS and ABCD-WWW combined meeting Survey of Web Mapping Projects Part 2 of 8: The “Hello World” web map, and how to get started web map mashing. Jeff.
Capturing user input: Using HTML FORMs User input Up till now, our HTML documents have all been directed at outputting information to the user However,

Capturing user input: Using HTML FORMs User input Up till now, our HTML documents have all been directed at outputting information to the user However,
Capturing user input: Using HTML FORMs CS4320 got here on 27/11/2003.

Capturing user input: Using HTML FORMs CS4320 got here on 27/11/2003.
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.
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.
Spatial Databases: Lecture 6

Spatial Databases: Lecture 6
AUTOMATED TUTOR : Jolla Code Camp Presented By Fisayo Sangogboye Iqbal Ahmed Rohan Nanda Ngo Manh Khoi 1.

AUTOMATED TUTOR : Jolla Code Camp Presented By Fisayo Sangogboye Iqbal Ahmed Rohan Nanda Ngo Manh Khoi 1.
 Image Id  USGS/GFSAD1000_V0  USGS/GFSAD1000_V1  Expected to be added to Google Earth Data Catalog with the week. Demo in EE JavaScript Playground.

 Image Id  USGS/GFSAD1000_V0  USGS/GFSAD1000_V1  Expected to be added to Google Earth Data Catalog with the week. Demo in EE JavaScript Playground.
OPEN LAYERS. History Google Maps ◦ Announced on February 2005 ◦ Possibility to explore the world OpenLayers ◦ First release on June 2006 ◦ Open alternative.

OPEN LAYERS. History Google Maps ◦ Announced on February 2005 ◦ Possibility to explore the world OpenLayers ◦ First release on June 2006 ◦ Open alternative.
JQuery : Rethink Web Development Van Gaever Tom

JQuery : Rethink Web Development Van Gaever Tom
Open Source Web Mapping Server Products (Spatially-enabled Internet applications)‏ Rex Thaxton & Jerry Workman Mountain CAD Corporation 339 Sixth Ave.

Open Source Web Mapping Server Products (Spatially-enabled Internet applications)‏ Rex Thaxton & Jerry Workman Mountain CAD Corporation 339 Sixth Ave.

Similar presentations

Ads by Google