creating dynamic maps with the openlayers … framework representing information on ... nasa...

Creating Dynamic Maps with the

OpenLayers Framework

Representing Information on Maps

with “R Project for Statistics”

What is OpenLayers?

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

OpenLayers Features: Layers

OGC WMS

OGC WFS

GeoRSS

CSV

ka-Map

Nasa WorldWind

Canvas

Google Maps

MSN Virtual Earth

Yahoo! Maps

Multimap

GML

KML

OpenLayers Features: Controls

Zoom / Pan

Zoom Bar

Mouse controls

Layer Switcher (aka “legend”)

Scale Ratio

Scale Bar

Permalink

OpenLayers Features: et cetera...

Markers

Popups

Feature objects

Event handling

Map editing

“AJAX” enabled

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.

OpenLayers: WMS

<html>

<head>


</head>

<body>






map.addLayer(wms);


</script>

</body>

</html>

OpenLayers + ka-Map

<html>

<head>


</head>

<body>






map.addLayer(wms);


</script>

</body>

</html>

OpenLayers + ka-Map

<html>

<head>


</head>

<body>






var kamap = new OpenLayers.Layer.KaMap( "KaMap",

"http://openlayers.org/world/index.php",

{g: "satellite", map: "world"});

map.addLayer(wms);


</script>

</body>

</html>

OpenLayers + ka-Map

<html>

<head>


</head>

<body>






var kamap = new OpenLayers.Layer.KaMap( "KaMap",

"http://openlayers.org/world/index.php",

{g: "satellite", map: "world"});

map.addLayers([wms, kamap]);


</script>

</body>

</html>

Google Maps in OpenLayers

<html>

<head>


</head>

<body>




var layer = new OpenLayers.Layer.Google("Google");

map.addLayer(layer);


</script>

</body>

</html>

MSN Virtual Earth in OpenLayers

<html>

<head>


</head>

<body>




var layer = new OpenLayers.Layer.VirtualEarth("MSN VE");

map.addLayer(layer);


</script>

</body>

</html>

OpenLayers: Transparent WMS


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


OpenLayers: GeoRSS

OpenLayers.ProxyHost="/cgi-bin/proxy.cgi?url=";


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


OpenLayers: Markers


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


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

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

More information on OpenLayers?

Documentation

http://openlayers.org/

Examples

http://openlayers.org/dev/examples/

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

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

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

creating dynamic maps with the openlayers … framework representing information on ... nasa...

Documents