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
harish_k@nrsc.gov.in
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
harish_k@nrsc.gov.in
Examples
Remarks
Downloads are available:
http://openlayers.org/download/
4/29/2011
2
OpenLayers is a project of the Open Source
Geospatial Foundation (OsGeo)
What is What is OpenLayers OpenLayers? ?
Geospatial Foundation (OsGeo)
harish_k@nrsc.gov.in
What is What is OpenLayers OpenLayers??
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
harish_k@nrsc.gov.in
BSD licensed
4/29/2011
3
History of the Project History 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
harish_k@nrsc.gov.in
History of the Project History of the Project
harish_k@nrsc.gov.in
4/29/2011
4
Introduction: The Web 2.0 idea Introduction: 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.
harish_k@nrsc.gov.in
Technical XML RSS JavaScript AJAX
Web 2.0
GeoWeb GeoWeb the Geo part of Web 2.0 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
harish_k@nrsc.gov.in
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
1
http://www.nytimes.com/2007/07/27/technology/27maps.html?ex=1343275200&en=c0ca3a8864
4ae4a9&ei=5124&partner=permalink&exprod=permalink
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/
harish_k@nrsc.gov.in
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 Maps Components of OpenLayers Maps
just a prototype!
harish_k@nrsc.gov.in
4/29/2011
6
Simple integration into (X)HTML Simple integration into (X)HTML
Including API Including API
(remote or
local)
Creating map
object
harish_k@nrsc.gov.in
Adding layer
Placeholder
OpenLayers development: Versioning and tracking OpenLayers 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
harish_k@nrsc.gov.in
p p
messages, creating links and seamless
references between tickets, files, and wiki
pages.
timeline gives historic view of the project.
4/29/2011
7
OpenLayerss Subversion System OpenLayerss 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
harish_k@nrsc.gov.in
single developers
http://en.wikipedia.org/wiki/Subversion_%28software%29
OpenLayers development OpenLayers development: Tracking system : Tracking system
harish_k@nrsc.gov.in
4/29/2011
8
Users
Mailing lists participants
OpenLayers development: Groups involved OpenLayers 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
harish_k@nrsc.gov.in
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: Process OpenLayers 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:
harish_k@nrsc.gov.in
-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.
4/29/2011
9
OpenLayers development: Testing Methodology OpenLayers development: Testing Methodology
Test.AnotherWay-
Framework
more than 2100
automated tests
(http://openlayers.org/blog/20
07/08/23/automated-testing/)
harish_k@nrsc.gov.in
http://openlayers.org/dev/tests/run-tests.html
OpenLayers development: Classes, inheritance OpenLayers development: Classes, inheritance
harish_k@nrsc.gov.in Source:http://www.smartmapbrowsing.org/html/index_en.html [2007-0919]
4/29/2011
10
OpenLayers development: API documentation OpenLayers development: API documentation
harish_k@nrsc.gov.in
Source: http://dev.openlayers.org/apidocs/files/OpenLayers-js.html [2007-09-07]
Architecture Architecture
Multi-tier
REST based (Representational state transfer) REST-based (Representational state transfer)
Internet
http
Webserver (Proxy)
http
(REST)
SQL
Geo-DBMS
http
harish_k@nrsc.gov.in
OpenLayers
Client
Local files
http
4/29/2011
11
What is REST API What is REST API
Representational State Transfer (REST) is a style of software architecture for
distributed hypermedia systems such as the World Wide Web. The term
Representational State Transfer was introduced and defined in 2000 by Roy
Fielding.
REST is an approach for getting information content from a Web site by
reading a designated Web page that contains an XML file that describes and
includes the desired content.
REST is an "architectural style" that basically exploits the existing technology
and protocols of the Web, including HTTP and XML.
REST is simpler to use than the well known SOAP (Simple Object Access
harish_k@nrsc.gov.in
REST is simpler to use than the well-known SOAP (Simple Object Access
Protocol) approach, which requires writing or using a provided server program
(to serve data) and a client program (to request data).
OpenLayers OpenLayers Features: Layers Features: 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
harish_k@nrsc.gov.in
Canvas
4/29/2011
12
Layers Classes Layers 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
harish_k@nrsc.gov.in
KML
WKT
ka-Map
WorldWind
with SVG
/ VML
Well-known text
OpenLayers OpenLayers Features: Controls Features: Controls
Zoom / Pan
Zoom Bar Zoom Bar
Mouse controls
Layer Switcher (aka legend)
Scale Ratio
Scale Bar
Permalink
harish_k@nrsc.gov.in
4/29/2011
13
OpenLayers OpenLayers Features:... Features:...
Markers
Popups Popups
Feature objects
Event handling
AJAX
... and, of course ...
harish_k@nrsc.gov.in
GeoRSS GeoRSS
W3C 2006:
a simple model for tagging external content
ith hi f t ti hi h 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,
i l "h // b / 2"
Source: cadenhead.org
harish_k@nrsc.gov.in
<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>
4/29/2011
14
GeoRSS in OpenLayers GeoRSS in OpenLayers
Presently, two XML serializations are supported: GeoRSS
Simple W3C GeoRSS Simple, W3C GeoRSS
var georsslayer = new OpenLayers.Layer.GeoRSS(georss.xml, value);
map.addLayer(georsslayer);
harish_k@nrsc.gov.in
GeoJSON GeoJSON
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": {
harish_k@nrsc.gov.in
Google Maps
crs : {
"type": "EPSG",
"properties": {
"code": 4326
}
}
}
4/29/2011
15
OGCs Geography Markup Language GML OGCs 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/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>
/f t f t
harish_k@nrsc.gov.in
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 - - KML 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
ddL (
harish_k@nrsc.gov.in
map.addLayer(
new OpenLayers.Layer.GML(
"KML",
"kml/mc-search.kml",
{format: OpenLayers.Format.KML}
)
);
4/29/2011
16
WMS 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',
harish_k@nrsc.gov.in
p ,
format: 'image/png'
maxExtent: 'new OpenLayers.Bounds(minx,miny,maxx,maxy)',
maxResolution': 'auto
}
);
map.addLayer(wmslayer);
WMS WMS
GetCapabilities
supported by
// Register click event
map.events.register('click', map, function (e) {
// initialize the displaying text
$('nodeList').innerHTML = "Loading... ";
//define the parameters for getfeatureInfo
1
2
supported by
extension
1
GetMap and
GetFeatureInfo
supported
WMS-T support
//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});
harish_k@nrsc.gov.in
WMS T support
//get featureInfo
OpenLayers.loadURL(url, '', this, setHTML);
Event.stop(e);
});
//display the result
function 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
4/29/2011
17
WFS support WFS 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);
harish_k@nrsc.gov.in
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 OpenLayers OpenLayers
harish_k@nrsc.gov.in
4/29/2011
18
var googleLayer = new OpenLayers.Layer.Google( "Google Satellite" ,
{type: G_SATELLITE_MAP, 'maxZoomLevel':18} );
Google Maps in Google Maps in OpenLayers OpenLayers
harish_k@nrsc.gov.in
var satellite = new OpenLayers.Layer.Google( "Google Maps" ,
{type: G_NORMAL_MAP, 'maxZoomLevel':18} );
harish_k@nrsc.gov.in
4/29/2011
19
var liss=new
OpenLayers.Layer.TileCache("LISSIII",urlArray,"LISSIII",{f
ISRO ISRO Bhuvan Bhuvan in in OpenLayer OpenLayer
ormat:"image/jpeg",isBaseLayer:false,attribution:"IRS
Resourcesat-1 LISSIII(23.5m)"});
var l4=new
OpenLayers.Layer.WMS("l4",urlArray1,{layers:'l4'},{isBaseL
ayer:false, attribution:"IRS Resourcesat-1
LISSIV(5 8m)"})
harish_k@nrsc.gov.in
LISSIV(5.8m)"});
ISRO ISRO Bhuvan Bhuvan in in OpenLayer OpenLayer
harish_k@nrsc.gov.in
4/29/2011
20
MSN Virtual Earth in OpenLayers MSN Virtual Earth in OpenLayers
harish_k@nrsc.gov.in
Additionally, OpenLayers supports... Additionally, OpenLayers supports...
Y h ! M Yahoo! Maps
MultiMap
harish_k@nrsc.gov.in
4/29/2011
21
Samples: Integration of SRTM data Samples: Integration of SRTM data
harish_k@nrsc.gov.in
Source: http://dev.openstreetmap.org/~spaetz/?lat=6217998.0293&lon=996891.50684&zoom=8&layers=TTB [2007-09-05]
Sample: OpenStreetMap Sample: OpenStreetMap
aims to be a free
editable map of the
whole world.
http://www.openstre
etmap.org/
harish_k@nrsc.gov.in Source: http://www.openstreetmap.org/ [2007-09-10]
4/29/2011
22
Conclusion Conclusion
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
harish_k@nrsc.gov.in
p p
ensure quality and progress of the work.
OpenLayers is capable to integrate many data resources
and formats.
Powerful, easy to understand and to use.
Quick Demo Quick Demo
harish_k@nrsc.gov.in
4/29/2011
23
OpenLayers OpenLayers: 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'});
harish_k@nrsc.gov.in
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
OpenLayers OpenLayers: 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'});
harish_k@nrsc.gov.in
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
24
OpenLayers OpenLayers: 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'});
harish_k@nrsc.gov.in
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
OpenLayers OpenLayers: 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'});
harish_k@nrsc.gov.in
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
25
OpenLayers OpenLayers: 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'});
harish_k@nrsc.gov.in
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
OpenLayers OpenLayers: 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'});
harish_k@nrsc.gov.in
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
26
OpenLayers OpenLayers: WMS : WMS
(demo)
harish_k@nrsc.gov.in
OpenLayers OpenLayers + ka + ka- -Map Map
<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'});
harish_k@nrsc.gov.in
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
27
OpenLayers OpenLayers + ka + ka- -Map Map
<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",
harish_k@nrsc.gov.in
{g: "satellite", map: "world"});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
{g: "satellite", map: "world"});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
OpenLayers OpenLayers + ka + ka- -Map Map
<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",
harish_k@nrsc.gov.in
{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>
4/29/2011
28
OpenLayers OpenLayers + ka + ka- -Map Map
(demo)
harish_k@nrsc.gov.in
Google Maps in Google Maps in OpenLayers OpenLayers
<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);
harish_k@nrsc.gov.in
map.addLayer(layer);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(layer);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
29
Google Maps in Google Maps in OpenLayers OpenLayers
(demo)
harish_k@nrsc.gov.in
MSN Virtual Earth in MSN Virtual Earth in OpenLayers OpenLayers
<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);
harish_k@nrsc.gov.in
map.addLayer(layer);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(layer);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
30
MSN Virtual Earth in OpenLayers MSN Virtual Earth in OpenLayers
(demo)
harish_k@nrsc.gov.in
Commercial Layers in Commercial Layers in OpenLayers OpenLayers
Additionally, OpenLayers supports...
OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 harish_k@nrsc.gov.in
4/29/2011
31
Commercial Layers in Commercial Layers in OpenLayers OpenLayers
Additionally, OpenLayers supports...
Y! Maps
OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 harish_k@nrsc.gov.in
Commercial Layers in Commercial Layers in OpenLayers OpenLayers
Additionally, OpenLayers supports...
Y! Maps
MultiMap
OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 harish_k@nrsc.gov.in
4/29/2011
32
Commercial Layers in Commercial Layers in OpenLayers OpenLayers
Additionally, OpenLayers supports...
Y! Maps
MultiMap
(insert your own here)
OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 harish_k@nrsc.gov.in
OpenLayers OpenLayers: 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'} );
harish_k@nrsc.gov.in
map.addLayers([wms,twms]);
map.zoomToMaxExtent();
map.addLayers([wms,twms]);
map.zoomToMaxExtent();
4/29/2011
33
OpenLayers OpenLayers: Transparent WMS : Transparent WMS
(demo)
harish_k@nrsc.gov.in
OpenLayers OpenLayers: 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});
harish_k@nrsc.gov.in
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
4/29/2011
34
OpenLayers OpenLayers: 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});
harish_k@nrsc.gov.in
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
OpenLayers OpenLayers: WFS : WFS
(demo)
harish_k@nrsc.gov.in
4/29/2011
35
OpenLayers OpenLayers: : GeoRSS 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" );
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" );
harish_k@nrsc.gov.in
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
OpenLayers OpenLayers: : GeoRSS GeoRSS
(demo)
harish_k@nrsc.gov.in
4/29/2011
36
OpenLayers OpenLayers: 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);
harish_k@nrsc.gov.in
markers.addMarker(marker);
map.zoomToMaxExtent();
markers.addMarker(marker);
map.zoomToMaxExtent();
OpenLayers OpenLayers: 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);
harish_k@nrsc.gov.in
markers.addMarker(marker);
map.zoomToMaxExtent();
markers.addMarker(marker);
map.zoomToMaxExtent();
4/29/2011
37
OpenLayers OpenLayers: Markers : Markers
(demo)
harish_k@nrsc.gov.in
OpenLayers OpenLayers: : Popups Popups
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);
harish_k@nrsc.gov.in
markers.addMarker(marker);
marker.events.register( "click", marker,
function (e) {
popup.toggle() } );
markers.addMarker(marker);
marker.events.register( "click", marker,
function (e) {
popup.toggle() } );
4/29/2011
38
OpenLayers OpenLayers: : Popups Popups
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);
harish_k@nrsc.gov.in
markers.addMarker(marker);
marker.events.register( "click", marker,
function (e) {
popup.toggle() } );
markers.addMarker(marker);
marker.events.register( "click", marker,
function (e) {
popup.toggle() } );
OpenLayers OpenLayers: : Popups Popups
(demo)
harish_k@nrsc.gov.in
4/29/2011
39
OpenLayers OpenLayers: 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()
];
harish_k@nrsc.gov.in
var map = new OpenLayers.Map('map', { controls: controls }); var map = new OpenLayers.Map('map', { controls: controls });
OpenLayers OpenLayers: Custom Controls : Custom Controls
(demo)
harish_k@nrsc.gov.in
4/29/2011
40
Contributing to Contributing to OpenLayers OpenLayers
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!
harish_k@nrsc.gov.in
http://openlayers.org/ http://openlayers.org/
harish_k@nrsc.gov.in
For any further information you may contact me- harish_k@nrsc.gov.in