Categories
Map tutorial

Da TileMill alla mappa online

Un modo semplice per creare visualizzazioni grafiche di dati geografici (geodata render) è usare il software TileMill. in questa guida a quattro mani con @miccferr vediamo come usarlo per creare una mappa online

@miccferr: Ah, ecco! mi è tornato in mente come fare.
Praticamente devi “scompattare” il db .mbtiles e avere tutta la struttura di cartelle con i png da passare a LeafletJS.
Per farlo usa mbutil da terminale (Linux) – spiegazione e sorgente: github.com/mapbox/mbutil.
Dopodichè crei il collegamento alla cartella con i png, al costruttore del layer leaflet: L.tileLayer(‘http://MIA_CARTELLA/{z}/{x}/{y}.png’, { … }).addTo(map);

Proviamo a vedere i passi di questa procedure: da TileMill alla mappa online

TileMill

L’installazione di TileMill, anche se dubito che non lo avete ancora installato, la trovate qui: www.mapbox.com/tilemill

Create la vostra mappa. Io ho usato le impostazioni e lo stile presente in questo file: carbonate.xml

mbutil

Installa mbutil

wget https://github.com/mapbox/mbutil/zipball/master -O mbutil.zip
 unzip mbutil
 cd mapbox-mbutil*
 sudo python setup.py install

Converti il file *.mbtiles in una cartella (da terminale)

mb-util /home/pjh/Desktop/carbonate.mbtiles /home/pjh/Desktop/car_tiles

Carica nel tuo host

Il passo predente crea una cartella contente tutt i tile. Caricate interamente la cartella sul vostro host preferito.

La cartella contiene un file *.json, che , durante il caricamento successivo non viene inserito da nessuna parte. Allo stesso livello cii sono tante cartelle, quanti sono gli zoom che avete deciso di esportare in TileMill

LeafletJS

Il contenitore LeafletJS è facile da modificare e potete partire dal primo esempio il get_started

Le parti da modificare sono queste:

L.tileLayer('http://www.cityplanner.it/experiment_host/supply/tiles/car_tiles/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'examples.map-i875mjb7'
}).addTo(map);

Riferimenti

By pjhooker

Tutti mi chiamano "uomo del gis" ... i software così detti GIS (Geographic information system) hanno accompagnato il mio percorso di studi universitario, fin dalle prime elaborazioni, quando mi fecero calcolare la lunghezza di una pista ciclabile e l'area di un bosco ... per un po' di mesi, mi chiedevo perché non mi facevano usare il mio amato AutoCad, visto che lo usavo già da 3-4 anni ... ma poi ho capito la differenza ... e tutto cambiò!

Leave a Reply

Your email address will not be published. Required fields are marked *