Da TileMill alla mappa online

Blog

Da TileMill alla mappa online

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('https://www.cityplanner.biz/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