4/29/2011
1
OpenLayersOpenLayers: API for data Integration : API for data Integration in an Open Source Map Browserin an Open Source Map Browser
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
– 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 OpenLayersOpenLayers??
Geospatial Foundation (OsGeo)
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
• BSD licensed
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
History of the ProjectHistory of the Project
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.
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
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
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/
• 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!
4/29/2011
6
Simple integration into (X)HTMLSimple integration into (X)HTML
Including APIIncluding API(remote or local)
Creating map object
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
p pmessages, creating links and seamless references between tickets, files, and wiki pages.
– timeline gives historic view of the project.
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
single developers
http://en.wikipedia.org/wiki/Subversion_%28software%29
OpenLayers developmentOpenLayers development: Tracking system: Tracking system
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
– 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”:
-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 MethodologyOpenLayers development: Testing Methodology
• Test.AnotherWay-Framework
• more than 2100 automated tests (http://openlayers.org/blog/2007/08/23/automated-testing/)
http://openlayers.org/dev/tests/run-tests.html
OpenLayers development: Classes, inheritanceOpenLayers development: Classes, inheritance
[email protected] Source:http://www.smartmapbrowsing.org/html/index_en.html [2007-0919]
4/29/2011
10
OpenLayers development: API documentationOpenLayers development: API documentation
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
OpenLayersClient
Local files
http
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
• 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
• Canvas
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
• 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
4/29/2011
13
OpenLayersOpenLayers Features:...Features:...
• Markers
• Popups• Popups
• Feature objects
• Event handling
• “AJAX”
• ... and, of course ...
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
<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 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);
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": {
Google Maps crs : {"type": "EPSG", "properties": {
"code": 4326}
}}
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
• 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 (
map.addLayer(new OpenLayers.Layer.GML(
"KML", "kml/mc-search.kml", {format: OpenLayers.Format.KML}
));
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',
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});
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
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);
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
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
var satellite = new OpenLayers.Layer.Google( "Google Maps" ,{type: G_NORMAL_MAP, 'maxZoomLevel':18} );
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)"})
LISSIV(5.8m)"});
ISRO ISRO BhuvanBhuvan in in OpenLayerOpenLayer
4/29/2011
20
MSN Virtual Earth in OpenLayersMSN Virtual Earth in OpenLayers
Additionally, OpenLayers supports...Additionally, OpenLayers supports...
Y h ! M• Yahoo! Maps
• MultiMap
4/29/2011
21
Samples: Integration of SRTM dataSamples: Integration of SRTM data
Source: http://dev.openstreetmap.org/~spaetz/?lat=6217998.0293&lon=996891.50684&zoom=8&layers=TTB [2007-09-05]
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]
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
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
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'});
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'});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
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'});
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'});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
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'});
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'});
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
26
OpenLayersOpenLayers: WMS: WMS
(demo)
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'});
map.addLayer(wms);map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(wms);map.zoomToMaxExtent();
</script>
</body>
</html>
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",
{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",
{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
OpenLayersOpenLayers + ka+ ka--MapMap
(demo)
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);
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 OpenLayersOpenLayers
(demo)
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);
map.addLayer(layer);
map.zoomToMaxExtent();
</script>
</body>
</html>
map.addLayer(layer);
map.zoomToMaxExtent();
</script>
</body>
</html>
4/29/2011
30
MSN Virtual Earth in OpenLayersMSN Virtual Earth in OpenLayers
(demo)
Commercial Layers in Commercial Layers in OpenLayersOpenLayers
Additionally, OpenLayers supports...
OSGEO-Workshop, CSSTE-AP, Dehradun, 12-14 January, 2011 [email protected]
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]
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'} );
map.addLayers([wms,twms]);
map.zoomToMaxExtent();
map.addLayers([wms,twms]);
map.zoomToMaxExtent();
4/29/2011
33
OpenLayersOpenLayers: Transparent WMS: Transparent WMS
(demo)
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});
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
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});
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
OpenLayersOpenLayers: WFS: WFS
(demo)
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" );
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
map.addLayers([wms,georss]);
map.zoomToMaxExtent();
OpenLayersOpenLayers: : GeoRSSGeoRSS
(demo)
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);
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);
markers.addMarker(marker);
map.zoomToMaxExtent();
markers.addMarker(marker);
map.zoomToMaxExtent();
4/29/2011
37
OpenLayersOpenLayers: Markers: Markers
(demo)
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);
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
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);
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)
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()
];
var map = new OpenLayers.Map('map', { controls: controls });var map = new OpenLayers.Map('map', { controls: controls });
OpenLayersOpenLayers: Custom Controls: Custom Controls
(demo)
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!
http://openlayers.org/http://openlayers.org/
For any further information you may contact me- [email protected]
Top Related