creating dynamic maps with the openlayers … framework representing information on ... nasa...
TRANSCRIPT
![Page 1: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/1.jpg)
Creating Dynamic Maps with the
OpenLayers Framework
Representing Information on Maps
with “R Project for Statistics”
![Page 2: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/2.jpg)
What is OpenLayers?
![Page 3: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/3.jpg)
What is OpenLayers?
An API for building web map applications
Pure client-side JavaScript
“AJAX” and “Web 2.0”
Supports open standards (WMS, WFS, ...)
Supports closed standards, too
Open Source project from MetaCarta
![Page 4: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/4.jpg)
OpenLayers Features: Layers
OGC WMS
OGC WFS
GeoRSS
CSV
ka-Map
Nasa WorldWind
Canvas
Google Maps
MSN Virtual Earth
Yahoo! Maps
Multimap
GML
KML
![Page 5: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/5.jpg)
OpenLayers Features: Controls
Zoom / Pan
Zoom Bar
Mouse controls
Layer Switcher (aka “legend”)
Scale Ratio
Scale Bar
Permalink
![Page 6: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/6.jpg)
OpenLayers Features: et cetera...
Markers
Popups
Feature objects
Event handling
Map editing
“AJAX” enabled
![Page 7: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/7.jpg)
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>
In the m@pas on-line service (http://mapas.igeo.pt) you can access a list of Portuguese WMS and WFS sources.
![Page 8: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/8.jpg)
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>
![Page 9: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/9.jpg)
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>
![Page 10: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/10.jpg)
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>
![Page 11: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/11.jpg)
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>
![Page 12: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/12.jpg)
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>
![Page 13: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/13.jpg)
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>
![Page 14: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/14.jpg)
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>
![Page 15: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/15.jpg)
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>
![Page 16: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/16.jpg)
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>
![Page 17: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/17.jpg)
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>
![Page 18: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/18.jpg)
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();
![Page 19: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/19.jpg)
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();
![Page 20: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/20.jpg)
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();
![Page 21: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/21.jpg)
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();
![Page 22: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/22.jpg)
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() } );
![Page 23: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/23.jpg)
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() } );
![Page 24: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/24.jpg)
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 });
![Page 25: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/25.jpg)
More information on OpenLayers?
Documentation
http://openlayers.org/
Examples
http://openlayers.org/dev/examples/
![Page 26: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/26.jpg)
Maps in R?
Multiple packages related to GIS/Mapping
maptools
Read shapefiles and plot these objects
mapproj
Support for different map projection
mapdata
External map databases
ggplot2
Advanced graphing functionalities
![Page 27: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/27.jpg)
Maps in R
> library(mapproj)
> help(package=mapproj)
> example(mapproject)
> example(map.grid)
> library(ggplot2)
> try_require("maps")
> nz <- data.frame(map(“pt", plot=FALSE)[c("x","y")])
> (nzmap <- qplot(x, y, data=nz, geom="path"))
![Page 28: Creating Dynamic Maps with the OpenLayers … Framework Representing Information on ... Nasa WorldWind ... Creating Dynamic Maps with the OpenLayers Framework Representing Information](https://reader034.vdocument.in/reader034/viewer/2022051601/5ad898617f8b9a3e578d953e/html5/thumbnails/28.jpg)
Creating maps in R
> library(maptools)
> read.shape(“shapefile_region") -> myregion.map
> summary(myregion.map)
> names(myregion.map$att.data)
> plot.Spatial(myregion.map)
> plot.Map(myregion.map, fg="red", ol="blue", main=“My map",
xlab="Longitude", ylab="Latitude")
Portuguese shapefiles available from http://www.igeo.pt/produtos/cadastro/caop/shapes_v6.htm