4 maggio, 2010
Questa è una piccola grande notizia che apprendo grazie @lucamenini : il Ministero dell’Ambiente e della Tutela del Territorio e del Mare, ha autorizzato (il 30 Aprile scorso) a “ricalcare le foto aeree tramite l’accesso al WMS del PCN“.
Sarà possibile arricchire la base dati di OpenStreetMap, tracciando punti, linee, e poligoni su delle basi di buona qualità e finalmente omogenee per il territorio nazionale. Molti dei client con i quali è possibile modificare i dati di OSM, consentono infatti di aggiungere layer WMS come base per il ricalco.
Questo il link da usare in JOSM per la sorgente WMS delle ortofoto del 2006:
http://wms.pcn.minambiente.it/cgi-bin/mapserv.exe?map=/ms_ogc/service/ortofoto_colore_06.map&LAYERS=
ortofoto_colore&REQUEST=GetMap&VERSION=1.1.1&FORMAT=image%2Fpng&
Questo per quella del 2008 (soltanto Umbria e Lazio)
http://wms.pcn.minambiente.it/cgi-bin/mapserv.exe?map=/ms_ogc/service/ortofoto_colore_08.map&LAYERS=
ortofoto_colore&REQUEST=GetMap&VERSION=1.1.1&FORMAT=image%2Fpng&
Ringrazio coloro i quali si sono battuti per questo risultato, ed in particolare Simone Cortesi di OpenStreetMap Foundation, e ovviamente anche il PCN.
Simone ha inoltre lanciato una proposta di virtual mapping party di ritracciatura durante la settimana delle libertà digitali: http://www.libertadigitali.org/
Sono molto contento di questa notizia e chiedo a tutti i lettori interessati di darne ampia eco. Grazie in anticipo!!
Posted in GeoDati, Web-Mapping, crowdsourcing, osgeo | 6 Comments »
23 aprile, 2009
Come prima cosa vorrei ringraziare Andrea per avermi dato la possibilità di contribuire, nel mio piccolo, a TANTO, scusandomi con lui per tutto il tempo (davvero troppo) passato da quando gli ho promesso questo tutorial ad oggi!
In questo breve articolo-tutorial cercherò di fare una panoramica sulla componente client di MapFish, un framework open source basato su ExtJs e OpenLayers, grazie al quale è possibile realizzare delle applicazioni webgis in pieno stile web 2.0 con poco sforzo una volta compreso il funzionamento degli “ingranaggi”.
Innanzitutto va detto che la parte relativa al mapping vero e proprio può essere gestita esattamente come in OpenLayers che, come già ricordato, è compreso all’interno di MapFish.
Si ha quindi a disposizione tutta la flessibilità di OpenLayers (layer WMS, WFS, Google, Yahoo, ecc.) e se si sanno già realizzare mappe online con questa ottima libreria, il passaggio a MapFish consiste semplicemente nel comprendere come gestire layout ed eventi alla maniera di ExtJs (l’altra componente del framework) e nello scoprire gli utili widget che MapFish mette a disposizione dello sviluppatore.
L’utilizzo di questi widget è simile a quello dei controlli di OpenLayers, con la differenza che in questo caso viene sfruttata la potenza di ExtJs per aggiungere un’interfaccia utente avanzata al controllo. I widget che necessitano del solo codice lato client sono:
- Toolbar – una barra degli strumenti con dei tasti preimpostati (full-extent, pan, zoombox, zoom out) che è possibile espandere con nuovi bottoni sapendosi muovere un minimo con OL;
- Layer Tree – si tratta di una “toc”, simile al layer switcher di OL, ma molto più configurabile, con la possibilità di includere facilmente icone e di annidare e raggruppare i layer a proprio piacimento;
- Scorciatoie – liste a discesa con possibilità di autocompletamento del testo inserito (come avviene in Google suggest, per capirci) che centrano la mappa sulle coordinate corrispondenti al luogo/elemento scelto;
- Stampa – un semplice controllo da includere per stampare la porzione di mappa visualizzata.
Affinché gli altri widget di MapFish (stampa complessa, ricerca nel db, ecc.) funzionino, è necessario che sia installata la componente server del framework che, però, non tratteremo in questo articolo (anche perché, non avendoci mai lavorato, rischierei di scrivere una montagna di cavolate!).
ExtJs semplifica la creazione di layout, anche molto complessi, che risultano accattivanti per l’utente e cross-browser. Con poche righe di codice è possibile creare interfacce a schede (tab), menu accordion, form avanzati, ecc… avendo la sicurezza che l’applicazione verrà correttamente visualizzata su tutti i browser più diffusi in circolazione. Con ExtJs possiamo ottenere rapidamente delle belle GUI in cui “infilare” le nostre applicazioni webgis. Insomma, sono assicurati un risultato di tutto rispetto e un bel risparmio di diottrie e bile (è risaputo che quella di rendere cross-browser delle appicazioni web “complesse” sia una delle attività che più contribuiscono alla creazione di nuovi tipi di imprecazioni… 
).
Fatta questa introduzione, passiamo al tutorial vero e proprio!
Tutorial MapFish
Creeremo una semplice applicazione webgis, munita di una toolbar e di un layer tree, con cui sarà possibile visualizzare la localizzazione degli utenti GRASS su due mappe di base alternative.
Le informazioni che mostreremo provengono da diversi server WMS (Nasa, Metacarta, Grass).
Utilizzeremo la versione 1.1 del framework MapFish, scaricabile da qui come archivio compresso in formato tar.gz (se state lavorando in ambiente Windows, vi consiglio di procurarvi l’ottimo 7zip per estrarne il contenuto).
Il primo passaggio consiste ovviamente nello scompattare quanto abbiamo scaricato in modo da ottenere una cartella (MapFish-1.1) che contiene tutto il necessario per creare la nostra applicazione d’esempio.
Utilizzando la sola parte client non abbiamo bisogno di rendere visibile il tutto ad un eventuale webserver e possiamo posizionare la directory di cui sopra dove più ci aggrada nel filesystem…
Tuttavia, per mantenere un certo ordine, consiglio di creare una ulteriore cartella, che chiameremo “EsempioMF”, e di lavorare al suo interno.
Creiamo anche un file index.html, un file myMapFish.js e spostiamo anche loro nella cartella di lavoro “EsempioMF”.
A questo punto, quindi, la situazione dovrebbe essere la seguente:
EsempioMF
|
– MapFish-1.1
|
– index.html
|
– myMapfish.js
Ora che siamo organizzati in modo più o meno ordinato, è il momento di riempire il file index.html.
Ecco come:
<html>
<head>
<title>Esempio MapFish by TANTO</title>
<!-- link ai CSS della componente ExtJS
(è possibile scaricare temi dal sito di extjs e sostituire default.css con il foglio di stile del tema scaricato... ce ne sono un paio che meritano) -->
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/default.css" />
<!-- Inserisco i riferimenti agli script Javascript necessari al funzionamento del framework MapFish -->
<script type="text/javascript" src="MapFish-1.1/client/mfbase/openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/ext-all.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/mapfish/MapFish.js"></script>
<!-- Inserisco il riferimento allo script Javascript myMapFish.js -->
<script type="text/javascript" src="myMapFish.js"></script>
</head>
<body>
<!-- Nel body creo i div che faranno da contenitori per la mappa vera e propria, per la toolbar e per il layer tree -->
<div id="map"></div>
<div id="buttonbar"></div>
<div id="tree"></div>
</body>
</html>
I commenti indicano cosa è stato inserito nell’header.Quindi possiamo chiudere index.html e iniziare a lavorare sullo script myMapFish.js.
Questo script conterrà due porzioni ben distinte:
- la prima servirà a definire il layout dell’applicazione (codice ExtJs);
- la seconda definirà la mappa vera e propria (codice OpenLayers) ed i widget MapFish che utilizzeremo.
Cominciamo, quindi, dalla prima parte dello script ed inseriamo quanto segue:
//Layout dell'applicazione
//************************
Ext.onReady(function() {
new Ext.Viewport({
layout:'border',
items:[{
region:'north',
margins:'4 4 4 4',
height: 63,
html: '<img src="http://blog.spaziogis.it/wp-content/themes/blacknwhite/blacknwhite/images/TANTO_logo.png"/>',
bodyStyle:'padding:2px;'
},{
region:'center',
layout:'border',
margins:'0 4 4 4',
items:[{
region:'north',
border:false,
contentEl:'buttonbar',
height:26
},{
region:'center',
contentEl:'map',
border:false
}]
},{
title:'Layer tree',
region:'east',
margins:'0 4 4 0',
width:350,
contentEl:'tree',
collapsible:true
},{
region:'south',
margins:'0 4 4 4',
height:20,
html:'Esempio realizzato per TANTO',
bodyStyle:'padding:2px;font-size:12px;font-family:tahoma,arial,helvetica'
}]
});
});
questa porzione di codice definisce completamente la webgui, non c’è bisogno di altro.
In sintesi, dopo aver inizializzato ExtJs con il metodo Ext.onReady, abbiamo creato un oggetto Viewport per dire ad ExtJs di utilizzare tutta la finestra del browser (dimenticavo… vogliamo che la nostra applicazione sia a tutto schermo ) e poi abbiamo inserito un layout di tipo ‘border’ all’interndo del quale (nel pannello ‘center’) abbiamo annidato un secondo layout dello stesso tipo.
Ogni layout di tipo border può contenere 5 panneli (‘region’), detti north, center, east, west, south. Di questi solo ‘center’ è obbligatorio.
Ad ogni modo vi rimando all’esplorazione del sito di ExtJs per scoprire come complicare a piacimento i vostri layout. Il sito è molto ben fatto, pieno di tutorial ed esempi.
Passiamo ora alla mappa e ai mapfish widget.
Sempre all’interno del file myMapFish.js inseriamo questo pezzo di codice sotto al precedente:
//Mappa e Widget
//************************
function initMap(){
//Creo la mappa e definisco alcuni controlli di base
var map = new OpenLayers.Map('map',{controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
]});
//Definisco l'extent che utilizzerò come vista iniziale
var bounds = new OpenLayers.Bounds(5,36,21,50);
//Definisco i layer WMS, due di base (alternativi) e uno di overlay
var jpl_wms = new OpenLayers.Layer.WMS("NASA_Global_Mosaic",
"http://t1.hypercube.telascience.org/cgi-bin/landsat7",{layers: "landsat7"});
var ol_wms = new OpenLayers.Layer.WMS("OpenLayers_WMS",
"http://labs.metacarta.com/wms/vmap0",{layers: 'basic'});
var grass_users = new OpenLayers.Layer.WMS.Untiled("Utenti_grass",
"http://mapserver.gdf-hannover.de/cgi-bin/grassuserwms?",
{layers: 'GRASS-Users',transparent:true, format:'image/png'},
{isBaseLayer:false});
//Aggiungo i layer alla mappa
map.addLayers([jpl_wms,ol_wms,grass_users]);
//Aggiungo il toolbar widget di MapFish:
//**************************************
//Creo la toolbar
var toolbar = new mapfish.widgets.toolbar.Toolbar({map: map, configurable:true});
//Scelgo di renderizzare la toolbar in un div con id = buttonbar
toolbar.render('buttonbar');
//Aggiungo i bottoni/controlli
toolbar.addControl(new OpenLayers.Control.ZoomBox(), {iconCls: 'zoomin',toggleGroup: 'map'});
toolbar.addControl(new OpenLayers.Control.ZoomOut(), {iconCls: 'zoomout',toggleGroup: 'map'});
toolbar.addControl(new OpenLayers.Control.DragPan({isDefault: true}),{iconCls: 'pan', toggleGroup: 'map'});
//Attivo la toolbar
toolbar.activate();
//Layer tree
//***************************************
//Creo un modello per il layer tree, distribuendo i layer in due nodi espandibili distinti (Mappe di base e Overlay)
var model = [{
text: "Mappe di base",
expanded: true,
children: [{
checked:true,
text:"Nasa Global Mosaic",
layerName:"NASA_Global_Mosaic"
},{
checked:false,
text:"OpenLayers WMS",
layerName:"OpenLayers_WMS"
}]},{
text: "Overlay",
expanded: true,
children: [{
checked:false,
text:"Utenti GRASS",
layerName:"Utenti_grass"
}]
}];
//Inserisco il widget vero e proprio indicando
var tree = new mapfish.widgets.LayerTree({
map: map, el: 'tree',
model: model,
border:false, autoHeight:true
});
tree.render();
//Centro la mappa sull'extent definito in precedenza
map.zoomToExtent(bounds);
} //fine della funzione init()
Anche qui i commenti dovrebbero essere abbastanza chiari.
Abbiamo creato una mappa esattamente come se stessimo lavorando con buon vecchio OpenLayers e, in più, abbiamo inserito nel codice due MapFish widget.
Prima di vedere il risultato del nostro lavoro dobbiamo fare due piccole modifica al file index.html:
- inserire un evento onload a livello del tag per fare in modo che la mappa venga caricata all’apertura della pagina (esattamente come in OL);
- inseire alcune regole CSS necessarie per la corretta visualizzazione dei MapFish widget
Ecco come deve apparire index.html modificato a dovere:
<html>
<head>
<title>Esempio MapFish by TANTO</title>
<!-- link ai CSS della componente ExtJS
(è possibile scaricare temi dal sito di extjs e sostituire default.css con il foglio di stile del tema scaricato... ce ne sono un paio che meritano) -->
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="MapFish-1.1/client/mfbase/ext/resources/css/default.css" />
<!-- Inserisco i riferimenti agli script Javascript necessari al funzionamento del framework MapFish -->
<script type="text/javascript" src="MapFish-1.1/client/mfbase/openlayers/lib/OpenLayers.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/ext/ext-all.js"></script>
<script type="text/javascript" src="MapFish-1.1/client/mfbase/mapfish/MapFish.js"></script>
<!-- Inserisco il riferimento allo script Javascript myMapFish.js -->
<script type="text/javascript" src="myMapFish.js"></script>
</head>
<body onload="initMap()">
<!-- Nel body creo i div che faranno da contenitori per la mappa vera e propria, per la toolbar e per il layer tree -->
<div id="map"></div>
<div id="buttonbar"></div>
<div id="tree"></div>
</body>
</html>
<style type="text/css">
/* Icone dei bottoni della toolbar */
.zoomin {
background-image:url(MapFish-1.1/client/mfbase/mapfish/img/icon_zoomin.png) !important;
height:20px !important;
width:20px !important;
}
.zoomout {
background-image:url(MapFish-1.1/client/mfbase/mapfish/img/icon_zoomout.png) !important;
height:20px !important;
width:20px !important;
}
.pan {
background-image:url(MapFish-1.1/client/mfbase/mapfish/img/icon_pan.png) !important;
height:20px !important;
width:20px !important;
}
/* Dimensioni del Layer tree */
#tree {
height: 100%;
width: 100%;
}
</style>
Adesso apriamo index.html col borwser e il risultato dovrebbe essere questo.
Posted in OS, Sviluppo, Tutorial, Web 2.0, Web-Mapping, gis, osgeo | 16 Comments »
17 aprile, 2008
Ci sono parecchi modi per poter condividere contenuti geografici con altri utenti in maniera attiva. Non sto parlando proprio di webgis, nè di geotagging basati su Google Maps/Google Earth o Virtual Earth, ma di vere e proprie “comunità geospaziali” nelle quali ognuno può contribuire a costruire o anche solo condividere conoscenza geografica. Andrea ne aveva già accennato in un suo precedente post nel quale parlava di Neogeography.
Ognuna di queste esperienze (Openstreetmap, Everytrail, Greenmap solo per citarne alcune) meriterebbe un post di approfondimento, qui però voglio parlare di un progetto/software commerciale, ma che esprime la potenza dell’informazione geografica condivisa in maniera collettiva e dinamica.
Si tratta di TITAN, una “VPN geospaziale” sviluppata da Leica/ERDAS, che permette appunto di condividere dati geografici e costruire un ambiente di lavoro, sempre condiviso, con altri utenti. Il tutto in pochi minuti, installando il client scaricabile dal sito di ERDAS.
Il client è rilasciato sotto licenza freeware, ma trattandosi di un servizio commerciale il suo utilizzo base è limitato a un massimo di 10 file o 10GB totali di dati condivisi, mentre non c’è limite alla visualizzazione di dati in locale. Per poter utilizzare i servizi è necessario registrarsi alla community di TITAN e loggarsi mediante il client al GeoHub pubblico.
Gli strumenti che vengono messi a disposizione sono due. Il primo è un instant messenger (qui a fianco) con il quale è possibile entrare in contatto con altri utenti, visualizzarne dati e servizi condivisi, ed eventualmente sceglierli, scambiarli, oltre naturalmente a gestire i propri. Il secondo è un viewer 3D (qui sotto) in stile Google Earth con il quale è ovviamente possibile caricare/gestire/consultare i dati propri e quelli degli utenti connessi al GeoHub. La vista principale è quella di visualizzazione dei dati, mentre nella vista di “lavoro” è anche possibile aggiungere layer propri o di altri utenti, cercare luoghi, interrogare la mappa e disegnare semplici elementi vettoriali, a mò di annotazioni, che sarà poi possibile esportare in KML.
I propri dati/servizi… possono essere condivisi in tutti i formati più diffusi, sia raster che vettoriali, definendo per ciascun layer i permessi di accesso da parte degli altri utenti in maniera molto dettagliata. In questo modo possiamo cotruire un gruppo di lavoro ristretto con altri utenti che utilizzano il GeoHub pubblico.
…e quelli degli altri. Allo stesso modo sarà possibile usare i dati/servizi altrui, naturalmente in funzione dei permessi impostati dai proprietari.
Lo scambio di servizi avviene attraverso un GeoHub, ovvero un server che nella versione freeware è quello pubblico di ERDAS, mentre se si ha necessità di metterne su uno ad hoc, bisogna acquistare una licenza. Detto questo per dovere di cronaca, vale la pena dare un’occhiata alle possibilità che TITAN offre, al di là del suo essere una soluzione commerciale.
Il serving dei dati avviene secondo standard OGC, infatti ogni layer condiviso, da noi o da altri, è possibile utilizzarlo in due modi, il primo direttamente nel viewer di TITAN, in Google Earth o Virtual Earth. Il secondo mediante servizio WMS che TITAN crea facilmente per ogni layer, sarà sufficiente cliccare col tasto dx sul tematismo e scegliere “WMS link”, poi incollare il contenuto in un qualunque GIS desktop come servizio WMS. Il server è sempre il GeoHub, sarà il client sulla nostra macchina a “passargli” i dati da noi condivisi.
Sebbene TITAN non sia OS, e rilasciato solo per Windows, le sue funzionalità free (ricordo max 10 layer e/o max 10GB totali di dati condivisi) sono davvero interessanti e innovative. Gli utenti facenti parte della comunità geospaziale possono facilmente scambiare idee in real-time col messenger così come scambiarsi dati, contribuire collettivamente a costruire scenari dinamici renderizzati in 3D…
La capacità con TITAN di poter mettere in condivisione, anche via WMS e WCS, in pochi minuti i propri dati è sicuramente interessante per chi non ha voglia, tempo o possibilità di mettere su un proprio server WMS. Cosa che ai puristi del webgis farà certamente storcere il naso, ma che costituisce una valida alternativa per l’utente medio interessato essenzialmente alla condivisione e all’accesso di dati spaziali.
Insomma, con TITAN è divertente smanettare, fare esperimenti, condividere in pochi minuti dati con altri utenti e scambiare opinioni su scenari condivisi, con l’ausilio di una sorta di vera e propria “chat geospaziale 3D”.
Naturalmente, la via maestra nella condivisione delle informazioni geografiche rimarrà sempre quella dell’utilizzo di pacchetti e soluzioni software open source, ormai tutto sommato alla portata di chi ha voglia e passione di cimentarsi…
Posted in GeoDati, Software, Web-Mapping | 5 Comments »
