OpenLayers: Datenintegration in einem Open Source Map Browserjsac.jharkhand.gov.in/pdf/EDUSAT/Lecture/26 Feb 2013 Introduction... · OpenLayers: API for data Integration in an Open

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G , D E H R A D U N

[email protected]

OpenLayers: API for data Integration in an Open Source

Map Browser

Dr. Harish Karnatak

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Outline Introduction

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

Conclusion Examples Remarks

Downloads are available:

http://openlayers.org/download/

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

What is OpenLayers?

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

What is OpenLayers?

An API for building web map applications Pure client-side JavaScript “AJAX” “Web 2.0” Supports open standards Supports closed standards, too BSD licensed

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

History of the Project

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Web as platform

Participa-tion

Content syndication

Web services Conceptual

& social

TechnicalXML RSS JavaScript AJAX …

Web 2.0

…..…………

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Components of OpenLayers Mapsjust a prototype!

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Simple integration into (X)HTML

Including API(remote or local)

Creating map object

Adding layer

Placeholder

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers development: Classes, inheritance

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers development: API documentation

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Architecture

Multi-tier REST-based (Representational state transfer)

Internethttp

Webserver (Proxy)http(REST)

OpenLayersClient

Local files

SQL Geo-DBMS

http

http

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

What 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 AccessProtocol) approach, which requires writing or using a provided server program(to serve data) and a client program (to request data).

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers Features: Layers

OGC WMS OGC WFS GeoRSS CSV ka-Map WorldWind (*) Canvas

Google Maps MSN Virtual Earth Yahoo! Maps Multimap

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Layers 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

Well-known text

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers Features: Controls

Zoom / Pan Zoom Bar Mouse controls Layer Switcher (aka “legend”) Scale Ratio Scale Bar Permalink

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers Features:...

Markers Popups Feature objects Event handling “AJAX” ... and, of course ...

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

GeoRSS

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

GeoRSS in OpenLayers

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

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

GeoJSON

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}

}}

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OGC‘s Geography Markup Language GML

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

map.addLayer(new OpenLayers.Layer.GML(

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

));

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

WMS

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

WMS

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

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

1

2

3

4

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Google Maps in OpenLayers

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

Google Maps in OpenLayers

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

ISRO Bhuvan in OpenLayer

var liss=new OpenLayers.Layer.TileCache("LISSIII",urlArray,"LISSIII",{format:"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)"});

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

ISRO Bhuvan in OpenLayer

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

MSN Virtual Earth in OpenLayers

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Additionally, OpenLayers supports...

Yahoo! Maps MultiMap

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Samples: Integration of SRTM data

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Sample: OpenStreetMap

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

http://www.openstreetmap.org/

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Conclusion

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Quick Demo

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WMS

<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'});map.addLayer(wms);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WMS

<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'});map.addLayer(wms);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WMS

<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'});map.addLayer(wms);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WMS

<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'});map.addLayer(wms);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WMS

<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'});map.addLayer(wms);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WMS

<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'});map.addLayer(wms);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WMS

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers + ka-Map

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

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

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers + ka-Map

<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'});var kamap = new OpenLayers.Layer.KaMap( "KaMap",

"http://openlayers.org/world/index.php",{g: "satellite", map: "world"});

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

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers + ka-Map

<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'});var kamap = new OpenLayers.Layer.KaMap( "KaMap",

"http://openlayers.org/world/index.php",{g: "satellite", map: "world"});

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

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers + ka-Map

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Google Maps in OpenLayers

<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);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Google Maps in OpenLayers

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

MSN Virtual Earth in OpenLayers

<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);map.zoomToMaxExtent();

</script></body></html>

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

MSN Virtual Earth in OpenLayers

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

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

Commercial Layers in OpenLayers

Additionally, OpenLayers supports...

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

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

Commercial Layers in OpenLayers

Y! Maps

Additionally, OpenLayers supports...

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

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

Commercial Layers in OpenLayers

Y! Maps MultiMap

Additionally, OpenLayers supports...

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

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

Commercial Layers in OpenLayers

Y! Maps MultiMap (insert your own here)

Additionally, OpenLayers supports...

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: Transparent WMS

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: WFS

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: GeoRSS

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: Markers

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: Popups

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Contributing to OpenLayers

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

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

OpenLayers: Custom Controls

(demo)

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Download OpenLayer API

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Unzip

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Folder location

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

API Location

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Examples

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

Example-Code

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]

I N D I A N I N S T I T U T E O F R E M O T E S E N S I N G, D E H R A D U N

[email protected]