IT:OpenLayers Local Tiles e Maperitive
Aggiungere un Tile Layer alla mappa utilizzando Maperitive
Questa guida mostra come creare un proprio rendering della mappa OpenStreetMap utilizzando Maperitive e come visualizzare il risultato in una pagina web.
Maperitive è una applicazione che consente di eseguire un rendering personalizzato dei dati OSM intervenendo sui fogli di stile che definiscono come i diversi "oggetti" della mappa debbano venire mostrati.
Maperitive è in grado di generare le "tiles" della mappa secondo le caratteristiche da noi richieste, aggiungendo alla mappa l' hillshading, la colorazione in base all' elevazione e le curve di livello,
Un esempio può essere visualizzato qua
Maperitive
Maperitive è un programma che esprime al meglio le sue potenzialità attarverso l' immissione delle istruzioni da linea di comando o meglio ancora attraverso l' esecuzione di script.
E' per questo indispensabile fare riferimento alla documentazione del programma
Maperitive di default apre nella sua interfaccia grafica la mappa OSM, ma per eseguire un rendering dobbiamo caricare un file .osm con i dati della zona che ci interessa.
Questo può essere fatto in diversi modi, utliizzando la funzione "Esporta" di OpenStreetMap, JOSM o altri programmi come spiegato qua.
Salvato questo file , che chiameremo dati.osm, in una directory chiamata "maps" creata come sottocartella di Maperitive, possiamo visualizzare questo file richiamandolo da riga di comando:
load-source maps/dati.osm
Possiamo aggiungere alla visualizzazione, utilizzando i Tools del programma, curve di livello e hillshading.
Dopo avere specificato il limiti della mappa da renderizzare (Map- Set Bounds), possiamo generare le tiles , sia utilizzando il Tools dell' interfaccia grafica, sia da riga di comando:
generate-tiles minzoom=5 maxzoom=15
ad esempio, genera le tiles dal livello di zoom 5 al livello 15.
Poichè ogni livello di zoom necessita di circa il quadruplo di tiles del livello precedente, è necessario prestare attenzione poichè si raggiungono rapidamente enormi quantità di tiles da generare con conseguente impego di tempo e di spazio su disco.
Ad esempio, se la mappa che visualizzamo occupa lo schermo del computer a livello di zoom 10, sarà composta da circa 15 tiles, che diventano 60 al livello di zoom 11, 240 al livello 12, 960 al livello 13...... 245,760 tiles al livello 17 (circa 80 minuti di lavoro, 10 GB di spazio su disco). Questi dati indicativi, ricavati dal manuale del programma, danno un' idea del problema.
Possiamo vedere che Mapertive avrà creato nella cartella "Tiles" diverse sottodirectory nominate con il numero del livello di zoom contenuto, cartella che andrà eventualmente trasferita nel webserver.
ll file html
Il codice nell' esempio che segue crea un nuovo layer chiamato maperitive che visualizza le tiles generate, in alternativa lo script mostra i layers Mapnik, Osmarender e Cyclemap di OSM.
Copiare il codice in un nuovo file, salvarlo come html nel webserver o in locale, in una posizione con la cartella "Tiles" come sottodirectory.
<html>
<head>
<title>layer OSM </title>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">
// Posizione iniziale della mappa
var lat=44.355;
var lon=11.71;
var zoom=13;
function init() {
map = new OpenLayers.Map ("map", {
controls:[
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.Permalink('permalink'),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.Attribution()
],
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 19,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
} );
var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
var tilesathome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
var cyclemap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
// layer tiles generati da Maperitive
var maperitive = new OpenLayers.Layer.OSM("Maperitive", "http://www.iskre.org/osm/valsanterno/Tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: true});
map.addLayers([ maperitive, mapnik, tilesathome, cyclemap ] );
map.addControl(new OpenLayers.Control.LayerSwitcher());
var lonLat = new OpenLayers.LonLat( lon ,lat )
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
map.getProjectionObject() // to Spherical Mercator Projection
);
map.setCenter (lonLat, zoom);
}
</script>
</head>
<body onload="init();">
<span style="font-family: Arial; font-weight: bold;">OSM Mapnik, Osmarender, CycleMap e tiles generate con Maperitive</span>
<div style="width:100%; height:95%" id="map"></div>
</body>
</html>
Altri modi per ottenere tiles in locale
Mapnik è l'applicazione che genera la mappa principale di oSM e può essere installato in locale.
MapTiler è una applicazione molto utile per generare tiles compatibili con Openlayers a partire da mappe georeferenziate in diversi formati.
OSMtiledownloader e JTileDownloader salvano in locale le tiles OpenStreetMap.
Vedi anche
- IT:OpenLayers
- IT:OpenLayers Simple Example - Semplici esempi di layers OSM
- IT:OpenLayers Marker Example - Aggiungere un semplice marker
- IT:Openlayers POI layer example - Aggiungere alcuni POI marker in overlay alla mappa.
- IT:Openlayers Track example - Visualizzare un file traccia .gpx in overlay sulla mappa
- IT:OpenLayers osm file example - Visualizzare un file .osm in overlay
- IT:OpenLayers Google Bing layers - Aggiungere Google Maps, Bing Maps e Yahoo Maps alla mappa.
- IT:OpenLayers Hillshade e Hiking Map - Aggiungere i layers hillshade e Lonvia alla mappa.
- IT:OpenLayers Local Tiles Example - Visualizza le tiles di OpenStreetMap in locale