OpenLayers: Datenintegration in einem Open Source Map Browser

Prof. Dr.-Ing. Franz-Josef Behr

Open

Laye

rs: D

ata

Inte

grat

ion

1

OpenLayers: Data Integration in OpenLayers: Data Integration in an Open Source Map Browseran Open Source Map Browser

Prof. Dr. Franz-Josef BehrHochschule für Technik, Stuttgart


Open

Laye

rs: D

ata

Inte

grat

ion

2

OutlineOutline

• Introduction

• OpenLayers– Features, history, components– Code example– Software development features– Types and integration of data layers

• Conclusion– Examples– Remarks


Open

Laye

rs: D

ata

Inte

grat

ion

3

Awareness and IgnoranceAwareness and Ignorance

http://today.reuters.com/news/articlenews.aspx?type=technologyNews&storyid=2007-09-05T170415Z_01_N05213136_RTRUKOC_0_US-FOSSETT-TECH.xml


Open

Laye

rs: D

ata

Inte

grat

ion

4

HistoryHistory

2004 20072005

Google

Maps

2006

Yaho

o! Map

s API

Microso

ft Virtu

al Ea

rth API

Yaho

o! Map

s API

V2

Microso

ft Live

Local

Kosm

osnim

ki

NASA W

orld W

ind

Microso

ft Live

Local

3D

Géopo

rtail

Géopo

rtail 3

D

Google

Acquire

s Key

hole

Bayern

Viewer

Bayern

Viewer

3D

OpenL

ayer

s


Open

Laye

rs: D

ata

Inte

grat

ion

5

Web as platform

Participa-tion

Content syndication

Web services Conceptual

& social

TechnicalXML RSS JavaScript AJAX …

Web 2.0

…..…………

Introduction: The Web 2.0 ideaIntroduction: The Web 2.0 idea

• an emerging change in paradigm in what the World Wide Web is and how it works -> decentralisation.

• implies conceptual, technical and social aspects.


Open

Laye

rs: D

ata

Inte

grat

ion

6

GeoWeb – the Geo part of Web 2.0GeoWeb – the Geo part of Web 2.0

• … merging of geographical (location-based) information with the abstract information of traditional web sites.

• Huge amount of data available• High interest on tools like Google Map API: ~90 mails / day

• Geotagging: – “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

– platial.com: Access to > 30.000.000 locations

1http://www.nytimes.com/2007/07/27/technology/27maps.html?ex=1343275200&en=c0ca3a88644ae4a9&ei=5124&partner=permalink&exprod=permalink


Open

Laye

rs: D

ata

Inte

grat

ion

7

[Free] Map Browsers[Free] Map Browsers• Google Maps, http://www.google.com/apis/maps/• Yahoo! Maps API, http://developer.yahoo.com/maps/• Microsoft Live Local, http://local.live.com/

• MapGuide Open Source, https://mapguide.osgeo.org/• OpenLayer, http://www.openlayers.org/• FlashEarth, http://www.flashearth.com/• WorldKit, http://worldkit.org/• ka-Map, http://ka-map.maptools.org/ • deegree iGeoPortal, http://www.lat-lon.de

– WMS, WFS, WCS, Catalogue Service, Gazetteer Service• MappingWidgets, http://mappingwidgets.sourceforge.net/

– WMS, zoom in, zoom out, pan, info, overview • Chameleon, http://chameleon.maptools.org/• p.mapper, http://www.pmapper.net/

– based on UMN MapServer/PHP/MapScript, zoom/pan, query, etc.• WMS Mapper, http://wms-map.sourceforge.net/: WMS, zoom

https://mapguide.osgeo.org/

http://www.flashearth.com/

http://www.lat-lon.de/

http://mappingwidgets.sourceforge.net/

http://chameleon.maptools.org/



http://mapserver.gis.umn.edu/

http://mapserver.gis.umn.edu/


Open

Laye

rs: D

ata

Inte

grat

ion

8

OutlineOutline

• Introduction

• OpenLayers– Features, history, components– Code example– software development process– Types and integration of data layers

• Conclusion


Open

Laye

rs: D

ata

Inte

grat

ion

9

What is OpenLayers?What is OpenLayers?

• an API for building web mapping applications, http://www.openlayers.org

• pure client-side object-oriented JavaScript, using components from Prototype.js and the Rico library

• AJAX (Asynchronous JavaScript and XML)• supports open and proprietary data standards / sources• efficient tiling• BSD licensed (standard licence for open source software, see

http://svn.openlayers.org/trunk/openlayers/release-license.txt)


Open

Laye

rs: D

ata

Inte

grat

ion

10

History of the ProjectHistory 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 used by > 10,000 people• is going to become a project of the Open Source Geospatial

Foundation.

… aims to become "the Apache of web mapping APIs"


Open

Laye

rs: D

ata

Inte

grat

ion

11

Components of OpenLayers MapsComponents of OpenLayers Maps just a prototype!


Open

Laye

rs: D

ata

Inte

grat

ion

12

Simple integration into (X)HTMLSimple integration into (X)HTML

Including API(remote or local)

Creating map object

Adding layer

Placeholder


Open

Laye

rs: D

ata

Inte

grat

ion

13

OpenLayers development: Versioning and OpenLayers development: Versioning and trackingtracking• Code and content: in the OpenLayers

Subversion (SVN) repository, http://svn.openlayers.org/

• enabling worldwide development

• Project management using trac– tracking system for bugs, feature requests,

version management etc (“tickets“)– interface to Subversion– allows wiki-like markup in descriptions and

messages, creating links and seamless references between tickets, files, and wiki pages.

– timeline gives historic view of the project.


Open

Laye

rs: D

ata

Inte

grat

ion

14

OpenLayers‘s Subversion SystemOpenLayers‘s Subversion System

• a version control system (successor of CVS)

• trunk: current version of project

• branches: copies of original source

• tags: copies without modifications

• sandbox: „playground“ for single developers

http://en.wikipedia.org/wiki/Subversion_%28software%29


Open

Laye

rs: D

ata

Inte

grat

ion

15

OpenLayers developmentOpenLayers development: Tracking : Tracking systemsystem


Open

Laye

rs: D

ata

Inte

grat

ion

16

• Users• Mailing lists participants• Registered developers (contributors)• Project Steering Committee (7 members,

http://trac.openlayers.org/wiki/SteeringCommitteeMembers)• Committee Chair

– facilitates discussion of proposals, responsible for memberships of the Project Steering Committee.

– adjudication in cases of disputes about voting.

• Democratic process: Addition and removal of members from the committee, as well as selection of a Chair should be handled as a proposal to the committee.

OpenLayers development: Groups OpenLayers development: Groups involvedinvolved


Open

Laye

rs: D

ata

Inte

grat

ion

17

OpenLayers development: ProcessOpenLayers development: Process

Clear and sound development rules:

1. Proposals OpenLayers dev mailing list discussion and voting, for at least two business days.

2. Voting:"+1“: indicating support for the proposal and a willingness to

support implementation."-1“: to veto a proposal, must provide clear reasoning and

alternate approaches to resolving the problem“-0”: indicates mild disagreement, but no effect; “0”: no

opinion, “+0”: mild support, but no effect.3. Project Steering Committee's votes will be counted.4. Acceptance: +2 (including the proposer), no vetos (-1).5. Veto can be resubmitted for an override vote.


Open

Laye

rs: D

ata

Inte

grat

ion

18

OpenLayers development: Testing OpenLayers development: Testing MethodologyMethodology

• Test.AnotherWay-Framework

• more than 2100 automated tests (http://openlayers.org/blog/2007/08/23/automated-testing/)

http://openlayers.org/dev/tests/run-tests.html


Open

Laye

rs: D

ata

Inte

grat

ion

19

OpenLayers development: Classes, OpenLayers development: Classes, inheritanceinheritance

Source: Emanuel Schütze, http://www.smartmapbrowsing.org/html/index_en.html [2007-0919]


Open

Laye

rs: D

ata

Inte

grat

ion

20

OpenLayers development: API OpenLayers development: API documentationdocumentation

Source: http://dev.openlayers.org/apidocs/files/OpenLayers-js.html [2007-09-07]


Open

Laye

rs: D

ata

Inte

grat

ion

21

ArchitectureArchitecture

• Multi-tier• REST-based (Representational state transfer)

Internethttp

Webserver (Proxy)http(REST)

OpenLayersClient

Local files

SQL Geo-DBMS

http

http


Open

Laye

rs: D

ata

Inte

grat

ion

22

Layers ClassesLayers Classes

• OGC WFS

• GeoRSS• CSV

• GML• KML• WKT

• OGC WMS

• Google Maps• MSN Live Local• Yahoo! Maps• Multimap

• ka-Map• WorldWind

Raster Layers, tiled

Vector Layers, points, lines, polygons

rendered with SVG / VML


Open

Laye

rs: D

ata

Inte

grat

ion

23

GeoRSSGeoRSS

• W3C 2006: “a simple model for tagging external content with geographic feature properties which are consistent with the general feature model and syntax of OGC GML.”

• supported by Yahoo! Maps, Google Maps, Live Local, WorldKit, MapInfo, FME, Drupal, …

<item xmlns="http://mywebserver.com/rss2"><title>…</title><description>…</description><georss:point

xmlns:georss="http://www.georss.org/georss">45.3515625 75.234375

</georss:point></item>

Source: cadenhead.org


Open

Laye

rs: D

ata

Inte

grat

ion

24

GeoRSS in OpenLayersGeoRSS in OpenLayers

• Presently, two XML serializations are supported: GeoRSS Simple, W3C GeoRSS

var georsslayer = new OpenLayers.Layer.GeoRSS(“georss.xml”, value); map.addLayer(georsslayer);


Open

Laye

rs: D

ata

Inte

grat

ion

25

GeoJSONGeoJSON

• JSON = JavaScript Object Notation

• lightweight data-interchange format

• efficient use in JavaScript programs

• also supported by Google Maps

{ "type": "Feature", "id": "OpenLayers.Feature.Vector_122", "properties": { }, "geometry": { "type": "Point", "coordinates": [ 115.3125, 24.9609375 ] }, "crs": { "type": "EPSG", "properties": { "code": 4326 } }}


Open

Laye

rs: D

ata

Inte

grat

ion

26

OGC‘s Geography Markup Language OGC‘s Geography Markup Language GMLGML• only version 2 support

• Integration of a GML Layer

<wfs:FeatureCollection xmlns:wfs="http://www.opengis.net/wfs"> <gml:featureMember xmlns:gml="http://www.opengis.net/gml">

<feature:features xmlns:feature=http://mapserver.gis.umn.edu/mapserver

fid="OpenLayers.Feature.Vector_156"><feature:geometry>

<gml:Point> <gml:coordinates decimal="." cs=", " ts=“ ">75.2,45.3 </gml:coordinates></gml:Point>

</feature:geometry></feature:features>

</gml:featureMember></wfs:FeatureCollection>

map.addLayer(new OpenLayers.Layer.GML("GML", "gml/polygon.xml"));


Open

Laye

rs: D

ata

Inte

grat

ion

27

Keyhole Markup Language - KMLKeyhole Markup Language - KML

• „I added support for KML point display in about 20 minutes, including the time to find data and write a demo HTML page loading some example data. Adding LineString support was another 15 minutes.“http://crschmidt.net/blog/archives/201/openlayers-vector-support/

• polygons not yet supported

• Integration of a KML Layermap.addLayer( new OpenLayers.Layer.GML( "KML", "kml/mc-search.kml", {format: OpenLayers.Format.KML} ));


Open

Laye

rs: D

ata

Inte

grat

ion

28

WMSWMS

• A WMS layer needs layername, URL, and parameters

var map = new OpenLayers.Map('map'); var wmslayer = new OpenLayers.Layer.WMS( "WMS Stuttgart", "http://suasdemo.easywms.com/WMS/getmapcap.php?",

{ layers:'gruenflaechen,oeffentl_gebaeude,private_gebaeude', VERSION: "1.1.1", units: 'meters‚ transparent: 'false', format: 'image/png' maxExtent: 'new OpenLayers.Bounds(minx,miny,maxx,maxy)', maxResolution': 'auto‚ } ); map.addLayer(wmslayer);


Open

Laye

rs: D

ata

Inte

grat

ion

29

WMSWMS

• GetCapabilities supported by extension1

• GetMap and GetFeatureInfo supported

• WMS-T support

// Register click eventmap.events.register('click', map, function (e) {// initialize the displaying text$('nodeList').innerHTML = "Loading... ";//define the parameters for getfeatureInfo var url = wmslayer.getFullRequestString({ REQUEST: "GetFeatureInfo", EXCEPTIONS: "application/vnd.ogc.se_xml", BBOX: wms.map.getExtent().toBBOX(), X: e.xy.x, Y: e.xy.y, INFO_FORMAT: 'text/html', QUERY_LAYERS: wms.params.LAYERS, REDIUS:2, WIDTH: wmslayer.map.size.w, HEIGHT: wmslayer.map.size.h});//get featureInfo OpenLayers.loadURL(url, '', this, setHTML); Event.stop(e);});//display the resultfunction setHTML(response) { $('nodeList').innerHTML = response.responseText;}

1see http://trac.openlayers.org/wiki/WMSManager, http://www.ominiverdi.org/openlayers/sandbox/openlayers/examples/wms_manager.html

1

2

3

4


Open

Laye

rs: D

ata

Inte

grat

ion

30

WFS supportWFS support

• WFS• WFS-Transactional

function init(){OpenLayers.ProxyHost="/proxy/?url=";map = new OpenLayers.Map('map');layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",

"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );map.addLayer(layer);

layer = new OpenLayers.Layer.WFS( "Owl Survey","http://www.bsc-eoc.org/cgi-bin/bsc_ows.asp?",{typename: "OWLS", maxfeatures: 10},{ featureClass: OpenLayers.Feature.WFS});

map.addLayer(layer);}


Open

Laye

rs: D

ata

Inte

grat

ion

31

Google Maps in OpenLayersGoogle Maps in OpenLayers


Open

Laye

rs: D

ata

Inte

grat

ion

32

var googleLayer = new OpenLayers.Layer.Google( "Google Satellite" , {type: G_SATELLITE_MAP, 'maxZoomLevel':18} );


Open

Laye

rs: D

ata

Inte

grat

ion

33

var satellite = new OpenLayers.Layer.Google( "Google Maps" , {type: G_NORMAL_MAP, 'maxZoomLevel':18} );


Open

Laye

rs: D

ata

Inte

grat

ion

34

MSN Virtual Earth in OpenLayersMSN Virtual Earth in OpenLayers


Open

Laye

rs: D

ata

Inte

grat

ion

35

Additionally, OpenLayers supports...Additionally, OpenLayers supports...

• Yahoo! Maps• MultiMap


Open

Laye

rs: D

ata

Inte

grat

ion

36

OutlineOutline

• Introduction

• OpenLayers– Features, history, components– Code example– Software development features– Types and integration of data layers

• Conclusion– Examples– Remarks


Open

Laye

rs: D

ata

Inte

grat

ion

37

Samples: Integration of SRTM dataSamples: Integration of SRTM data

Source: http://dev.openstreetmap.org/~spaetz/?lat=6217998.0293&lon=996891.50684&zoom=8&layers=TTB [2007-09-05]


Open

Laye

rs: D

ata

Inte

grat

ion

38

Sample: OpenStreetMapSample: OpenStreetMap

• aims to be a free editable map of the whole world.

• http://www.openstreetmap.org/

Source: http://www.openstreetmap.org/ [2007-09-10]


Open

Laye

rs: D

ata

Inte

grat

ion

39

ConclusionConclusion

• GeoWeb merges locational and abstract information.• Driven by users.• Several emerging geo-standards developed by

general IT stakeholders (GeoRSS, KML).

• OpenLayers is a promising Open Source web mapping client API.

• Modern software development tools and processes ensure quality and progress of the work.

• OpenLayers is capable to integrate many data resources and formats.

• Powerful, easy to understand and to use.

Documents

OpenLayers: Datenintegration in einem Open Source Map Browser