OpenLayers: Datenintegration in einem Open Source Map...
79
INDIAN INSTITUTE OF REMOTE SENSING, DEHRADUN [email protected] OpenLayers: API for data Integration in an Open Source Map Browser Dr. Harish Karnatak
Transcript of OpenLayers: Datenintegration in einem Open Source Map...
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Example-Code
