Organização do Tutorial

Tutorial sobre visualização de dados geo-referenciados com

OpenLayers e SIMILE Widgets

DEI-IST 2009/2010

Organização do Tutorial Introdução do OpenLayers

Apresentação da framework Mapas simples, uso de várias camadas e posicionamento.

Visualização de dados georeferenciados Visualização de de dados representados em GML Visualização de dados representados em KML

Visualização de dados com o SIMILE Exhibit Visualização de informação com referências geo-temporais Aplicações com mapas, timelines e pesquisa por facetas

INTRODUÇÃO AO OPENLAYERS

Parte 1

Introdução ao OpenLayers

2005 Mapas dinâmicos em aplicações Web com Google Maps, Yahoo! Maps, ... Várias APIs proprietárias.

2006 Lançamento do OpenLayers (MetaCarta, código aberto, licença BSD) Uma framework “client-side” para aplicações Web-GIS Suporta formatos abertos e proprietários Facilita desenvolvimento de aplicações Web com mapas dinâmicos

Framework muito utilizada no desenvolvimento de mashups

http://gallery.openlayers.org/

Framework cliente para Web-GIS

http://mapserver.org/

http://geoserver.org/

Apresentação de um mapa

<html>

<head>

<title>OpenLayers Example</title>

<script src=”http://openlayers.org/api/OpenLayers.js” />

<script type="text/javascript”>

function init() { }

</script>

</head>

<body onload=init()>

<div style="width: 800px; height: 475px;" id="map">

Hello My Map

</div>

</body>

</html>

Apresentação de um mapa

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

Sistema de coordenadas

usado por omissão:

EPSG: 4326 (WGS84)

Alterações no mapa inicial

remover map.zoomToMaxExtent(); e adicionar:

var lon = 9.06; var lat = 45.80;

var zoom = 10;

map.setCenter(

new OpenLayers.LonLat(lon, lat),

zoom

);

Adição de novos controlos sobre o mapa:

map.addControl(

new OpenLayers.Control.LayerSwitcher()

);

map.addControl(

new OpenLayers.Control.MousePosition()

);

Adição de novas camadas

var CTR = new OpenLayers.Layer.WMS(

'CTR WMS',

'http://www.cartografia.regione.lombardia.it/’ +

'arcgis93/services/wms/ctr_wms/MapServer/WMSServer',

{layers:'0', projection: 'EPSG:4326'}

);

map.addLayer(CTR);

Adicionar uma “overlay layer”:var CT10 = new OpenLayers.Layer.WMS(

'CT10 WMS','http://www.cartografia.regione.lombardia.it’

‘/ArcGIS93/services/wms/ct10_wms /MapServer/WMSServer',

{layers:'5', projection:'EPSG:4326', transparent:'true'}

);

map.addLayer(CT10);

http://www.cartografia.regione.lombardia.it/geoportale

Receitas rápidas

http://trac.openlayers.org/wiki/UserRecipes

Apresentação de mapas de serviços comerciais Interrogações sobre serviços WMS ou WFS Adição de nova informação sobre o mapa Overlays de informação em GML ou KML

http://openlayers.org/dev/examples/vector-formats.html

VISUALIZAÇÃO DE DOCUMENTOSGML E KML COM O OPENLAYERS

Parte 2

Geometrias GML sobre um mapa

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script src="http://openlayers.org/dev/OpenLayers.js"></script>

<script type="text/javascript">

var lon = 5; var lat = 40; var zoom = 5;

var map, layer;

function init(){

map = new OpenLayers.Map('map');

layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",

"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );

map.addLayer(layer);

map.zoomToExtent(new OpenLayers.Bounds(-3.9221,44.3353,4.8669,49.5538));

map.addLayer(new OpenLayers.Layer.GML("GML",

"http://openlayers.org/dev/examples/gml/polygon.xml"));

}

</script>

</head>

<body onload="init()">

<h1 id="title">GML Layer Example</h1><div id="tags"></div>

<p id="shortdesc">Loads GML vector data on a basemap.</p>

<div id="map" class="smallmap"></div><div id="docs"></div>

</body>

</html>

Geometrias GML sobre um mapa

Documento KML sobre um mapa<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script src="http://openlayers.org/dev/OpenLayers.js"></script>

<script type="text/javascript">

var lon = 5; var lat = 40; var zoom = 5; var map, layer;

function init(){

map = new OpenLayers.Map('map');

layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",

"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );

map.addLayer(layer);

map.addLayer(new OpenLayers.Layer.GML("KML", "http://openlayers.org/dev/examples/kml/lines.kml",

{

format: OpenLayers.Format.KML,

formatOptions: { extractStyles: true, extractAttributes: true, maxDepth: 2 }

}));

map.zoomToExtent(new OpenLayers.Bounds(-112.3066,36.0177,-112.032,36.180));

}

</script>

</head>

<body onload="init()">

<h1 id="title">KML Layer Example</h1><div id="tags"></div>

<p id="shortdesc">Displaying a KML file over basemap.</p>

<div id="map" class="smallmap"></div><div id="docs"></div>

</body>

</html>

Documento KML sobre um mapa

Mapas de cloropletas (cores)function init(){

var lon = 5;

var lat = 15;

var zoom = 2;

var options = { numZoomLevels: 6, controls: [] };

map = new OpenLayers.Map('olmap', options);

var vectors = new OpenLayers.Layer.GML( "KML",

"http://thematicmapping.org/data/kml/internet_users_2005_choropleth_lowres.kml",

{ isBaseLayer: true, format: OpenLayers.Format.KML,

formatOptions: { extractStyles: true, extractAttributes: true }});

map.addLayer(vectors);

map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);

map.addControl(new OpenLayers.Control.LayerSwitcher());

map.addControl(new OpenLayers.Control.MouseDefaults());

map.addControl(new OpenLayers.Control.PanZoomBar());

}

http://thematicmapping.org/playground/openlayers_choropleth_kml.php

Mais ideias

Thematic mapping with KMLhttp://blog.thematicmapping.org/

Map tiles com o GDAL2Tiles http://blog.thematicmapping.org/2008/03/generating-map-tiles-with-gdal2tiles.html http://thematicmapping.org/playground/openlayers_maptiles.php

Mapas de símbolos proporcionais http://thematicmapping.org/playground/openlayers_propsymbols_geojson.php http://blog.thematicmapping.org/2008/04/proportional-symbol-mapping-with.html

Integração com o Google Charts http://thematicmapping.org/playground/openlayers_piecharts_geojson_google_chart.php http://blog.thematicmapping.org/2008/04/openlayers-and-google-chart-mashup.html

SIMILE EXHIBITParte 3

Publishing Framework for Data-Rich Interactive Web Pages O SIMILE Exhibit facilita criação de páginas Web com:

Mapas e informação georreferenciada Timelines Pesquisa e navegação com base em facetas

Usa API do Google Maps para apresentação de informação georreferenciada sobre mapas

Interessante para a construção de mashups.

http://www.simile-widgets.org/exhibit/

SIMILE EXHIBIT

Exemplo “U.S. Presidents” Timeline Mapa com pins Pesquisa texto Facetas

Religião Repúblicano/Democrata ...

Mais exemplos na página Web do SIMILE Exhibit

Mapas e SIMILE Exhibit{ items: [

{ label: "MIT", type: "School",

address: "77 Massachusetts Avenue, Cambridge, MA 02139",

subject: "Computer Science"

},

{ label: "Harvard Medical School", type: "School",

address: "25 Shattuck St., Boston, MA 02115",

subject: "Medical"

},

{ label: "Stanford", type: "School",

address: "Stanford, CA 94305",


},

{ label: "CMU", type: "School",

address: "5000 Forbes Avenue, Pittsburgh, PA 15213",


}

] }

Mapas e SIMILE Exhibit

<html><head> <title>Schools</title> <link href="schools.js" type="application/json" rel="exhibit/data" /> <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js" type="text/javascript"></script> <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey=" type="text/javascript"></script></head> <body><button onclick="getLatLng();">Get Lat/Lng</button><br/><textarea id="results" rows="20" style="width: 100%;"></textarea> <script type="text/javascript"> function getLatLng() { var database = exhibit.getDatabase(); Exhibit.MapView.lookupLatLng( database.getSubjects("School", "type"), ".address", "addressLatLng", document.getElementById("results"), database, 4 ); } </script></body></html>


{ items: [ { label: "MIT", type: "School", address: "77 Massachusetts Avenue, Cambridge, MA 02139", subject: "Computer Science" }, { label: "Harvard Medical School", type: "School", address: "25 Shattuck St., Boston, MA 02115", subject: "Medical" }, { label: "Stanford", type: "School", address: "Stanford, CA 94305", subject: "Computer Science" }, { label: "CMU", type: "School", address: "5000 Forbes Avenue, Pittsburgh, PA 15213", subject: "Computer Science" }, { id: 'MIT', addressLatLng: '42.359,-71.093553' }, { id: 'Harvard Medical School', addressLatLng: '42.335743,-71.105138' }, { id: 'Stanford', addressLatLng: '37.423573,-122.161867' }, { id: 'CMU', addressLatLng: '40.444583,-79.942868' } ] }


<html><head> <title>Schools</title> <link href="schools.js" type="application/json" rel="exhibit/data" /> <script src="http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js" type="text/javascript"></script> <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/map-extension.js?gmapkey=" type="text/javascript"></script></head> <body> <div ex:role="view" ex:viewClass="Map" ex:latlng=".addressLatLng" ex:colorKey=".subject"> </div></body></html>

Documentação sobre as opções para ex:viewClass=“Map” http://simile.mit.edu/wiki/Exhibit/2.0/Map_View

Questões?

Documents

Organização do Tutorial