introduction openlayer hck

40
4/29/2011 1 OpenLayers OpenLayers: API for data Integration : API for data Integration in an Open Source Map Browser in an Open Source Map Browser [email protected] Dr. Harish Karnatak, Scientist, NRSC, ISRO Hyderabad Outline Outline • Introduction OpenLayers OpenLayers Features, history, components Code example Software development features Types and integration of data layers Conclusion [email protected] – Examples – Remarks Downloads are available: http://openlayers.org/download/

Upload: narmathagce3424

Post on 30-Apr-2017

222 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Introduction OpenLayer HCK

4/29/2011

1

OpenLayersOpenLayers: API for data Integration : API for data Integration in an Open Source Map Browserin an Open Source Map Browser

[email protected]

Dr. Harish Karnatak, Scientist, NRSC, ISRO Hyderabad

OutlineOutline• Introduction

OpenLayers• OpenLayers

– Features, history, components

– Code example

– Software development features– Types and integration of data layers

• Conclusion

[email protected]

– Examples

– Remarks

Downloads are available:

http://openlayers.org/download/

Page 2: Introduction OpenLayer HCK

4/29/2011

2

• OpenLayers is a project of the Open Source Geospatial Foundation (OsGeo)

What is What is OpenLayersOpenLayers??

Geospatial Foundation (OsGeo)

[email protected]

What is What is OpenLayersOpenLayers??

• An API for building web map applications

P e lient ide J S ipt• Pure client-side JavaScript

• “AJAX”

• “Web 2.0”

• Supports open standards

• Supports closed standards, too

[email protected]

• BSD licensed

Page 3: Introduction OpenLayer HCK

4/29/2011

3

History of the ProjectHistory of the Project

• Started after Where 2.0 in 2005

• Motivated by MetaCarta's business needs• Motivated by MetaCarta s business needs

• Went through several internal revisions

• Final rewrite took only a month

• Released before Where 2.0 in 2006

• Latest release is 2.10

[email protected]

History of the ProjectHistory of the Project

[email protected]

Page 4: Introduction OpenLayer HCK

4/29/2011

4

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

Web as platform

Participa-tion

Content syndication

Web services Conceptual

& social

…..…………

Wide Web is and how it works > decentralisation.

• implies conceptual, technical and social aspects.

[email protected]

TechnicalXML RSS JavaScript AJAX …

Web 2.0

GeoWeb GeoWeb –– the Geo part of Web 2.0the 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

• Geotagging:

– “On the Flickr photo-sharing service … users have “geotagged” more than 25 million pictures providing location data that

[email protected]

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

Page 5: Introduction OpenLayer HCK

4/29/2011

5

[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/

ISRO Bh htt //bh i• ISRO Bhuvan- http://bhuvan.nrsc.gov.in• 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/

[email protected]

• 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

Components of OpenLayers MapsComponents of OpenLayers Maps just a prototype!

[email protected]

Page 6: Introduction OpenLayer HCK

4/29/2011

6

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

Including APIIncluding API(remote or local)

Creating map object

[email protected]

Adding layer

Placeholder

OpenLayers development: Versioning and trackingOpenLayers development: Versioning and tracking

• 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

[email protected]

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

– timeline gives historic view of the project.

Page 7: Introduction OpenLayer HCK

4/29/2011

7

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

[email protected]

single developers

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

OpenLayers developmentOpenLayers development: Tracking system: Tracking system

[email protected]

Page 8: Introduction OpenLayer HCK

4/29/2011

8

• Users

• Mailing lists participants

OpenLayers development: Groups involvedOpenLayers development: Groups involved

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

[email protected]

– 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: 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”:

[email protected]

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

Page 9: Introduction OpenLayer HCK

4/29/2011

9

OpenLayers development: Testing MethodologyOpenLayers development: Testing Methodology

• Test.AnotherWay-Framework

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

[email protected]

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

OpenLayers development: Classes, inheritanceOpenLayers development: Classes, inheritance

[email protected] Source:http://www.smartmapbrowsing.org/html/index_en.html [2007-0919]

Page 10: Introduction OpenLayer HCK

4/29/2011

10

OpenLayers development: API documentationOpenLayers development: API documentation

[email protected]

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

ArchitectureArchitecture

• Multi-tier

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

Internethttp

Webserver (Proxy)http(REST) SQL Geo-DBMS

http

[email protected]

OpenLayersClient

Local files

http

Page 11: Introduction OpenLayer HCK

4/29/2011

11

What is REST APIWhat is REST API

• Representational State Transfer (REST) is a style of software architecture fordistributed hypermedia systems such as the World Wide Web. The termRepresentational State Transfer was introduced and defined in 2000 by RoyFielding.

• REST is an approach for getting information content from a Web site byreading a designated Web page that contains an XML file that describes andincludes the desired content.

• REST is an "architectural style" that basically exploits the existing technologyand protocols of the Web, including HTTP and XML.

• REST is simpler to use than the well known SOAP (Simple Object Access

[email protected]

• REST is simpler to use than the well-known SOAP (Simple Object AccessProtocol) approach, which requires writing or using a provided server program(to serve data) and a client program (to request data).

OpenLayersOpenLayers Features: LayersFeatures: Layers

• OGC WMS

OGC WFS

• Google Maps

MSN Vi t l E th• OGC WFS

• GeoRSS

• CSV

• ka-Map

• WorldWind (*)

• MSN Virtual Earth

• Yahoo! Maps

• Multimap

[email protected]

• Canvas

Page 12: Introduction OpenLayer HCK

4/29/2011

12

Layers ClassesLayers Classes

• OGC WFS • OGC WMS

• GeoRSS

• CSV

• GML

KML

• Google Maps

• MSN Live Local

• Yahoo! Maps

• Multimap

Raster Layers, tiled

Vector Layers, points, lines, polygons

rendered with SVG

[email protected]

• KML

• WKT • ka-Map

• WorldWind

with SVG / VML

Well-known text

OpenLayersOpenLayers Features: ControlsFeatures: Controls

• Zoom / Pan

• Zoom Bar• Zoom Bar

• Mouse controls

• Layer Switcher (aka “legend”)

• Scale Ratio

• Scale Bar

• Permalink

[email protected]

Page 13: Introduction OpenLayer HCK

4/29/2011

13

OpenLayersOpenLayers Features:...Features:...

• Markers

• Popups• Popups

• Feature objects

• Event handling

• “AJAX”

• ... and, of course ...

[email protected]

GeoRSSGeoRSS

• W3C 2006: “a simple model for tagging external content

ith hi f t ti hi hwith 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, …

i l "h // b / 2"

Source: cadenhead.org

[email protected]

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

Page 14: Introduction OpenLayer HCK

4/29/2011

14

GeoRSS in OpenLayersGeoRSS in OpenLayers

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

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

[email protected]

GeoJSONGeoJSON

• JSON = JavaScript Object Notation

{"type": "Feature", "id": "OpenLayers.Feature.Vector_122", "p ope ties" {Object Notation

• lightweight data-interchange format

• efficient use in JavaScript programs

• also supported by Google Maps

"properties": {}, "geometry": {

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

115.3125, 24.9609375

]}, "crs": {

[email protected]

Google Maps crs : {"type": "EPSG", "properties": {

"code": 4326}

}}

Page 15: Introduction OpenLayer HCK

4/29/2011

15

OGC‘s Geography Markup Language GMLOGC‘s Geography Markup Language GML

• only version 2 support

<wfs:FeatureCollection xmlns:wfs="http://www.opengis.net/wfs"><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/mapserverfid="OpenLayers.Feature.Vector_156"><feature:geometry>

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

</gml:Point></feature:geometry>

/f t f t

[email protected]

• Integration of a GML Layer

</feature:features></gml:featureMember>

</wfs:FeatureCollection>

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

Keyhole Markup Language Keyhole Markup Language -- KMLKML

• „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 Layer

ddL (

[email protected]

map.addLayer(new OpenLayers.Layer.GML(

"KML", "kml/mc-search.kml", {format: OpenLayers.Format.KML}

));

Page 16: Introduction OpenLayer HCK

4/29/2011

16

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',

[email protected]

p ,format: 'image/png'maxExtent: 'new OpenLayers.Bounds(minx,miny,maxx,maxy)',maxResolution': 'auto‚

} );map.addLayer(wmslayer);

WMSWMS

• GetCapabilities supported by

// Register click eventmap.events.register('click', map, function (e) {// initialize the displaying text$('nodeList').innerHTML = "Loading... ";//define the parameters for getfeatureInfo

1

2supported by extension1

• GetMap and GetFeatureInfo supported

• WMS-T support

//define the parameters for getfeatureInfovar 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});

[email protected]

WMS T support//get featureInfoOpenLayers.loadURL(url, '', this, setHTML);Event.stop(e);

});//display the resultfunction setHTML(response) {$('nodeList').innerHTML = response.responseText;

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

3

4

Page 17: Introduction OpenLayer HCK

4/29/2011

17

WFS supportWFS support

• WFS

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

[email protected]

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

Google Maps in Google Maps in OpenLayersOpenLayers

[email protected]

Page 18: Introduction OpenLayer HCK

4/29/2011

18

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

Google Maps in Google Maps in OpenLayersOpenLayers

[email protected]

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

[email protected]

Page 19: Introduction OpenLayer HCK

4/29/2011

19

• var liss=new OpenLayers.Layer.TileCache("LISSIII",urlArray,"LISSIII",{f

ISRO ISRO BhuvanBhuvan in in OpenLayerOpenLayer

ormat:"image/jpeg",isBaseLayer:false,attribution:"IRS Resourcesat-1 LISSIII(23.5m)"});

• var l4=new OpenLayers.Layer.WMS("l4",urlArray1,{layers:'l4'},{isBaseLayer:false, attribution:"IRS Resourcesat-1 LISSIV(5 8m)"})

[email protected]

LISSIV(5.8m)"});

ISRO ISRO BhuvanBhuvan in in OpenLayerOpenLayer

[email protected]

Page 20: Introduction OpenLayer HCK

4/29/2011

20

MSN Virtual Earth in OpenLayersMSN Virtual Earth in OpenLayers

[email protected]

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

Y h ! M• Yahoo! Maps

• MultiMap

[email protected]

Page 21: Introduction OpenLayer HCK

4/29/2011

21

Samples: Integration of SRTM dataSamples: Integration of SRTM data

[email protected]

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

Sample: OpenStreetMapSample: OpenStreetMap

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

• http://www.openstreetmap.org/

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

Page 22: Introduction OpenLayer HCK

4/29/2011

22

ConclusionConclusion

• GeoWeb merges locational and abstract information.• Driven by users• 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

[email protected]

p pensure quality and progress of the work.

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

• Powerful, easy to understand and to use.

Quick DemoQuick Demo

[email protected]

Page 23: Introduction OpenLayer HCK

4/29/2011

23

OpenLayersOpenLayers: WMS: WMS

<html>

<head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

[email protected]

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

OpenLayersOpenLayers: WMS: WMS

<html>

<head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

[email protected]

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

Page 24: Introduction OpenLayer HCK

4/29/2011

24

OpenLayersOpenLayers: WMS: WMS

<html>

<head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

[email protected]

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

OpenLayersOpenLayers: WMS: WMS

<html>

<head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

[email protected]

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

Page 25: Introduction OpenLayer HCK

4/29/2011

25

OpenLayersOpenLayers: WMS: WMS

<html>

<head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

[email protected]

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

OpenLayersOpenLayers: WMS: WMS

<html>

<head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

[email protected]

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(wms);

map.zoomToMaxExtent();

</script>

</body>

</html>

Page 26: Introduction OpenLayer HCK

4/29/2011

26

OpenLayersOpenLayers: WMS: WMS

(demo)

[email protected]

OpenLayersOpenLayers + ka+ ka--MapMap

<html><html>

<head><head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<html><html>

<head><head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head></head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",

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

[email protected]

map.addLayer(wms);map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(wms);map.zoomToMaxExtent();

</script>

</body>

</html>

Page 27: Introduction OpenLayer HCK

4/29/2011

27

OpenLayersOpenLayers + ka+ ka--MapMap

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head></head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

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",

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

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",

[email protected]

{g: "satellite", map: "world"});

map.addLayer(wms);map.zoomToMaxExtent();

</script>

</body>

</html>

{g: "satellite", map: "world"});

map.addLayer(wms);map.zoomToMaxExtent();

</script>

</body>

</html>

OpenLayersOpenLayers + ka+ ka--MapMap

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head></head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

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",

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

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",

[email protected]

{g: "satellite", map: "world"});

map.addLayers([wms, kamap]);map.zoomToMaxExtent();

</script>

</body>

</html>

{g: "satellite", map: "world"});

map.addLayers([wms, kamap]);map.zoomToMaxExtent();

</script>

</body>

</html>

Page 28: Introduction OpenLayer HCK

4/29/2011

28

OpenLayersOpenLayers + ka+ ka--MapMap

(demo)

[email protected]

Google Maps in Google Maps in OpenLayersOpenLayers

<html><html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var layer = new OpenLayers.Layer.Google("Google");

map addLayer(layer);

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var layer = new OpenLayers.Layer.Google("Google");

map addLayer(layer);

[email protected]

map.addLayer(layer);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(layer);

map.zoomToMaxExtent();

</script>

</body>

</html>

Page 29: Introduction OpenLayer HCK

4/29/2011

29

Google Maps in Google Maps in OpenLayersOpenLayers

(demo)

[email protected]

MSN Virtual Earth in MSN Virtual Earth in OpenLayersOpenLayers

<html><html>

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var layer = new OpenLayers.Layer.VirtualEarth("MSN VE");

map addLayer(layer);

<head>

<script src="http://openlayers.org/api/2/OpenLayers.js"></script>

</head>

<body>

<div style="width:100%; height:100%" id="map"></div>

<script defer="defer" type="text/javascript">

var map = new OpenLayers.Map('map');

var layer = new OpenLayers.Layer.VirtualEarth("MSN VE");

map addLayer(layer);

[email protected]

map.addLayer(layer);

map.zoomToMaxExtent();

</script>

</body>

</html>

map.addLayer(layer);

map.zoomToMaxExtent();

</script>

</body>

</html>

Page 30: Introduction OpenLayer HCK

4/29/2011

30

MSN Virtual Earth in OpenLayersMSN Virtual Earth in OpenLayers

(demo)

[email protected]

Commercial Layers in Commercial Layers in OpenLayersOpenLayers

Additionally, OpenLayers supports...

OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 [email protected]

Page 31: Introduction OpenLayer HCK

4/29/2011

31

Commercial Layers in Commercial Layers in OpenLayersOpenLayers

Additionally, OpenLayers supports...

• Y! Maps

OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 [email protected]

Commercial Layers in Commercial Layers in OpenLayersOpenLayers

Additionally, OpenLayers supports...

• Y! Maps

• MultiMap

OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 [email protected]

Page 32: Introduction OpenLayer HCK

4/29/2011

32

Commercial Layers in Commercial Layers in OpenLayersOpenLayers

Additionally, OpenLayers supports...

• Y! Maps

• MultiMap

• (insert your own here)

OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 [email protected]

OpenLayersOpenLayers: Transparent WMS: Transparent WMS

var map = new OpenLayers.Map('map');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'} );

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

[email protected]

map.addLayers([wms,twms]);

map.zoomToMaxExtent();

map.addLayers([wms,twms]);

map.zoomToMaxExtent();

Page 33: Introduction OpenLayer HCK

4/29/2011

33

OpenLayersOpenLayers: Transparent WMS: Transparent WMS

(demo)

[email protected]

OpenLayersOpenLayers: WFS: WFS

OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";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});

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

[email protected]

map.addLayers([wms,georss]);

map.zoomToMaxExtent();

map.addLayers([wms,georss]);

map.zoomToMaxExtent();

Page 34: Introduction OpenLayer HCK

4/29/2011

34

OpenLayersOpenLayers: WFS: WFS

OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";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});

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

[email protected]

map.addLayers([wms,georss]);

map.zoomToMaxExtent();

map.addLayers([wms,georss]);

map.zoomToMaxExtent();

OpenLayersOpenLayers: WFS: WFS

(demo)

[email protected]

Page 35: Introduction OpenLayer HCK

4/29/2011

35

OpenLayersOpenLayers: : GeoRSSGeoRSS

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

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

[email protected]

map.addLayers([wms,georss]);

map.zoomToMaxExtent();

map.addLayers([wms,georss]);

map.zoomToMaxExtent();

OpenLayersOpenLayers: : GeoRSSGeoRSS

(demo)

[email protected]

Page 36: Introduction OpenLayer HCK

4/29/2011

36

OpenLayersOpenLayers: Markers: 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);

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

[email protected]

markers.addMarker(marker);

map.zoomToMaxExtent();

markers.addMarker(marker);

map.zoomToMaxExtent();

OpenLayersOpenLayers: Markers: 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);

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

[email protected]

markers.addMarker(marker);

map.zoomToMaxExtent();

markers.addMarker(marker);

map.zoomToMaxExtent();

Page 37: Introduction OpenLayer HCK

4/29/2011

37

OpenLayersOpenLayers: Markers: Markers

(demo)

[email protected]

OpenLayersOpenLayers: : PopupsPopups

var markers = new OpenLayers.Layer.Markers("Markers");

map.addLayer(markers);

popup = new OpenLayers Popup Anchored("Example"

var markers = new OpenLayers.Layer.Markers("Markers");

map.addLayer(markers);

popup = new OpenLayers Popup Anchored("Example"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);

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

[email protected]

markers.addMarker(marker);

marker.events.register( "click", marker,

function (e) { popup.toggle() } );

markers.addMarker(marker);

marker.events.register( "click", marker,

function (e) { popup.toggle() } );

Page 38: Introduction OpenLayer HCK

4/29/2011

38

OpenLayersOpenLayers: : PopupsPopups

var markers = new OpenLayers.Layer.Markers("Markers");

map.addLayer(markers);

popup = new OpenLayers Popup Anchored("Example"

var markers = new OpenLayers.Layer.Markers("Markers");

map.addLayer(markers);

popup = new OpenLayers Popup Anchored("Example"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);

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

[email protected]

markers.addMarker(marker);

marker.events.register( "click", marker,

function (e) { popup.toggle() } );

markers.addMarker(marker);

marker.events.register( "click", marker,

function (e) { popup.toggle() } );

OpenLayersOpenLayers: : PopupsPopups

(demo)

[email protected]

Page 39: Introduction OpenLayer HCK

4/29/2011

39

OpenLayersOpenLayers: Custom Controls: Custom Controls

var controls = [

new OpenLayers.Control.PanZoomBar(),

new OpenLayers.Control.MouseDefaults(),

new OpenLayers.Control.Scale(),

new OpenLayers.Control.Permalink()

];

var controls = [

new OpenLayers.Control.PanZoomBar(),

new OpenLayers.Control.MouseDefaults(),

new OpenLayers.Control.Scale(),

new OpenLayers.Control.Permalink()

];

[email protected]

var map = new OpenLayers.Map('map', { controls: controls });var map = new OpenLayers.Map('map', { controls: controls });

OpenLayersOpenLayers: Custom Controls: Custom Controls

(demo)

[email protected]

Page 40: Introduction OpenLayer HCK

4/29/2011

40

Contributing to Contributing to OpenLayersOpenLayers

• Visit the website: http://openlayers.org/

• Join the mailing lists• Join the mailing lists

• Meet on irc.freenode.net #openlayers

• Submit a contributor agreement

• Start sending patches!

[email protected]

http://openlayers.org/http://openlayers.org/

[email protected]

For any further information you may contact me- [email protected]