open source map browser openlayers: data integration in an

Prof. Dr.-Ing. Franz-Josef Behr

Ope

nLay

ers:

Dat

aIn

tegr

atio

n

1

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

Prof. Dr. Franz-Josef Behr

Stuttgart University of Applied Sciences

Hochschule für Technik, Stuttgart


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

2

FOSS4G 2008, Cape Town, South FOSS4G 2008, Cape Town, South AfricaAfricaOpenLayers + Ext JS (BOF Session)OpenLayers + Ext JS (BOF Session)

WebServices application with Django and OpenLayersWebServices application with Django and OpenLayers

Sensor Observation Service from UMN MapServer meets OpenLayerSensor Observation Service from UMN MapServer meets OpenLayer

PostgreSQL/PostGIS, Geoserver & OpenLayers at Electricité De FrancePostgreSQL/PostGIS, Geoserver & OpenLayers at Electricité De France

The Open-Geo Stack: OpenLayers, GeoServer, PostGISThe Open-Geo Stack: OpenLayers, GeoServer, PostGIS

OpenLayers - Building Web Mapping Applications with a Solid FoundationOpenLayers - Building Web Mapping Applications with a Solid Foundation

OpenLayers Vector StyleOpenLayers Vector StyleOpenLayers Code SprintOpenLayers Code Sprint

The use of OpenLayers for the demonstration and visualisation of environmental research applications

The use of OpenLayers for the demonstration and visualisation of environmental research applications

Ride the lightning - Mapping lightnings with geotools and openlayers

Ride the lightning - Mapping lightnings with geotools and openlayers

Building an application framework based on OpenLayers and ExtJSBuilding an application framework based on OpenLayers and ExtJS

Source: Christopher Schmidt Date: Thu, 18 Sep 2008 11:43:35 -0400 To: crinolium<[email protected]>

36 presentations that mention OpenLayers


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

3

[Free] [Free] MapMap BrowsersBrowsers

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

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

• 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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

4

OpenLayers APIOpenLayers API

• Feature Overview, history, components

• Code example

• Software development features

• Types and integration of data layers


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

5

What is OpenLayers?What is OpenLayers?

• an API for building web map applications

• pure client-side object-oriented JavaScript, using components fromPrototype.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)


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

6

History of the ProjectHistory of the Project

• Started after Where 2.0 conference in 2005

• Motivated by MetaCarta's business needs

• released before Where 2.0 conference in 2006

• already used by > 10,000 people

• a project of the Open Source Geospatial Foundation.

• currently version 2.7

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

7

Components of OpenLayersComponents of OpenLayers just a prototype!


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

8

Simple Simple MapMap

Including API

Creating mapobject

Adding layer

Placeholder


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

9

VersioningVersioning and 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 bugs, tasks,files and wikipages.

– timeline gives historic view of the project,


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

10

OpenLayers Subversion SystemOpenLayers Subversion System

• a version control system (successor of CVS)

• trunk: current version of project

• branches: copies of original source

• tags: copies withoutmodifications

• sandbox: „playground“ forsingle developers

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

11

Tracking systemTracking system


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

12

GroupsGroups involvedinvolved

• 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 membershipsof 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.


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

13

DevelopmentDevelopment ProcessProcess

Clear and sound development rules:

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

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

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

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

“+0”: mild support, but no effect.3. Members of the 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.


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

14

TestingTesting 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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

15

ClassesClasses


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

16

API API documentationdocumentation: : OpenLayers.MapOpenLayers.Map

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

17

ArchitectureArchitecture

Internethttp

Webserver (Proxy)

http

OpenLayersClient

Local files

SQL Geo-DBMS

http


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

18

OpenLayers Maps consist of LayersOpenLayers Maps consist of Layers

• OGC WFS

• GeoRSS

• CSV

• GML

• KML

• WKT

• OGC WMS

• Google Maps• MSN Live Local

• Yahoo! Maps

• Multimap

• MapGuide

• ka-Map

• WorldWind

Raster Layers, tiled

Vector Layers, points, lines, polygons

renderedwith SVG / VML


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

19

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>


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

20

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

21

GeoJSONGeoJSON

• JSON = JavaScript Object Notation

• lightweight data-interchange format

• efficient use in JavaScript programs

{"type": "Feature", "id": "OpenLayers.Feature.Vector_122", "properties": {}, "geometry": {

"type": "Point", "coordinates": [

115.3125, 24.9609375

]}, "crs": {

"type": "EPSG", "properties": {

"code": 4326}

}}


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

22

OGC‘sOGC‘s GeographyGeography Markup Markup LanguageLanguage 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:featuresxmlns: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"));


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

23

KeyholeKeyhole Markup Markup LanguageLanguage -- KMLKML

• „I added support for KML point display in about 20 minutes, including the time to find data and write a demo HTML page loadingsome 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 Layer

map.addLayer(new OpenLayers.Layer.GML(

"KML", "kml/mc-search.kml",

{format: OpenLayers.Format.KML})

);


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

24

WMSWMS

• A WMS layer needs layername, URL, and parametes

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

25

WMSWMS

• GetCapabilities supported byextension1

• 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 featureInfoOpenLayers.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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

26

WFS WFS supportsupport

• 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);

}


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

27

Google Maps in OpenLayersGoogle Maps in OpenLayers


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

28

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

29

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

30

MSN Virtual Earth in OpenLayersMSN Virtual Earth in OpenLayers


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

31

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

• Yahoo! Maps• MultiMap


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

32

Samples: Integration of SRTM Samples: Integration of SRTM datadata

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


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

33

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]


Ope

nLay

ers:

Dat

aIn

tegr

atio

n

34

ConclusionConclusion

• OpenLayers is a promising Open Source web mappingclient.

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

• OpenLayers is capable to integrate many of dataresources.

• „Open Source Software for Open Geodata“

open source map browser openlayers: data integration in an

Documents