OpenLayers: Open Source Map Browser

Size: px

Start display at page:

Download "OpenLayers: Open Source Map Browser"

Leon Davis
5 years ago
Views:

1 OpenLayers: Open Source Map Browser July 12, 2008 Introduction Outline OpenLayers Features, history, components Code example Types and integration of data layers Conclusion 1

2 History! "! )./ - DE #! $ # % &' ( ' ) * +, -! "! 1 = 0 MN OPQ5 X]^_VZ` 789 :9;< 2345.,,6 C JKL \ FGHII AB V WXYZ[ +R5, 5 6STTU abbc Introduction: The Web 2.0 idea d an emerging change in paradigm in what the World Wide Web is and how it works -> Participation. d implies conceptual, technical and social aspects. Web as platform Participation Content syndication Web services Geoweb Conceptual & social Web 2.0 XML RSS JavaScript AJAX API Technical 2

3 GeoWeb the Geo part of Web 2.0 d merging of geographical (location-based) information with the abstract information of traditional web sites. d Huge amount of data available d High interest on tools like Google Map API d Geotagging: d On the Flickr photo-sharing service users have geotagged more than 25 million pictures, providing location data that allows them to be viewed on a map or through 3-D visualization software like Google Earth. 1 effghiijjjklmfnopqkrsoituuviuvitvifprelswsxmitvoygqkefowz { } ~s p } qwsxnl What is OpenLayers? d an API for building web mapping applications, d pure client-side object-oriented JavaScript, using components from Prototype.js and the Rico library d AJAX (Asynchronous JavaScript and XML) d supports open and proprietary data standards / sources d efficient tiling d BSD licensed (standard licence for open source software, see 3

4 History of the Project Started after Where 2.0 conference in 2005 Motivated also by MetaCarta's business needs released before Where 2.0 conference in 2006 already a large user base has already graduated Open Source Geospatial Foundation incubation. ƒ ˆ Š ˆ Š Œ Š Ž ƒ Š ˆ Š ƒ Ž Œ ˆ Š ƒ Šš ƒ ƒ Š OpenLayers - Intro Details d library for web mapping applications d pure client-side JavaScript d supports open standards d plays well with others 4

5 Creating the Map Viewer <html> <head> <title>openlayers Example</title> <script src=" </script> <script defer="defer" type="text/javascript"> function init() { } </script> </head> <body onload=init()> <div style="width: 800px; height: 475px" id="map">hello My Map</div> </body> </html> example1 Creating the Map Viewer var map = new OpenLayers.Map('map'); var wms = new OpenLayers.Layer.WMS("OpenLayers WMS"," ); map.addlayer(wms); map.zoomtomaxextent(); Example2 5

6 Customize your Map var lon = ; var lat = 34.7; var zoom = 5; map.setcenter(new OpenLayers.LonLat(lon, lat), zoom); * Remark Please remove map.zoomtomaxextent(); if it is exists. Example3 Add Layer Switcher Control map.addcontrol( new OpenLayers.Control.LayerSwitcher() ); Example4 6

7 Access to spatial data using Web Services œ ž ª «œ ž œ ž Ÿ œ ž Adding an Overlay WMS var osaka = new OpenLayers.Layer.WMS( "Osaka", " { layers: 'mizu,tatemono', transparent: 'true', format: 'png'} ); map.addlayer(osaka); Example5 7

8 What is GML? Scope ± The Geography Markup Language is ² a modeling language for geographic information ² an encoding for geographic information ² designed for the web and web-based services Bridge Feature GML Example Span = 100 Height =500 <Bridge> <span>100</span> x=100,y=200 <height>500</height> <gml:centerlineof> <gml:linestring> <gml:pos> </gml:pos> <gml:pos> </gml:pos> </gml:linestring> </gml:centerlineof> </Bridge> x=200,y=200 8

9 Add GML data Add Drawing tools var gml = new OpenLayers.Layer.GML("GML", "pop.gml"); map.addlayer(gml); vlayer = new OpenLayers.Layer.Vector( "Editable" ); map.addlayer(vlayer); map.addcontrol(new OpenLayers.Control.EditingToolbar(vlayer)); Example7 Add Point feature from text file lon lat title description icon Kobe <font color='red'>kobe city</font> Temple Temple in Kyoto <img src=' var pointtxt = new OpenLayers.Layer.Text( "text", {location: "./textfile.txt"} ); map.addlayer(pointtxt); Example8 9

10 Add Overview Map Adjust Zoom tool bar map.addcontrol(new OpenLayers.Control.OverviewMap()); map.addcontrol(new OpenLayers.Control.PanZoomBar()); *Remark Please change var map = new OpenLayers.Map('map'); To var map = new OpenLayers.Map('map', { controls: [new OpenLayers.Control.MouseDefaults()], 'numzoomlevels':20}); Example9 Add Google Map Data <script src=" _L2MHeCbWWKoMeLmohSrkdqoP7G5FXyU4DCLKkbXsj6a0RRi18hXfffzn 32qIMH0OMdfFQ7A3w" type="text/javascript"></script> var satellite = new OpenLayers.Layer.Google( "Google Satellite", {type: G_SATELLITE_MAP, 'maxzoomlevel':18} ); map.addlayers([satellite]); Example10 10

11 Conclusion ³ GeoWeb merges locational with other web content. ³ Driven by users. ³ Several emerging geo-standards developed by general IT stakeholders (GeoRSS, KML). ³ OpenLayers is a promising Open Source web mapping client API.. ³ OpenLayers is capable to integrate many data resources and formats. ³ Powerful, easy to understand and to use. OpenLayers Download and Tutorial OpenLayers Download Tutorial More Examples 11

X Slippy Maps. (...and Scott Davis)

X Slippy Maps. (...and Scott Davis) X Slippy Maps (...and Scott Davis) 1 2 Scott Davis 3 4 It was the best of times, it was the worst of times... 5 6 Ajax 7 Static Maps vs. Slippy Maps 8 9 10 Who is the OGC? The Open Geospatial Consortium