Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Esecuzione del server

Testare il nostro tile server OpenStreetMap con una semplice applicazione mobile realizzata con Apache Cordova.
Testare il nostro tile server OpenStreetMap con una semplice applicazione mobile realizzata con Apache Cordova.
Link copiato negli appunti

In questa lezione vediamo come mandare in esecuzione il nostro tile server basato su OpenStreetMap, effettuare un test e interrogarlo con una semplice applicazione.

Test del tile server

Iniziamo col testare il funzionamento del server lanciando interattivamente renderd:

sudo mkdir /var/run/renderd
sudo chown username /var/run/renderd
sudo -u username renderd -f -c /usr/local/etc/renderd.conf

ed effettuando, su un'altra sessione, il reload di apache, con:

service apache2 reload

Se non compaiono errori FATAL, visitando l'indirizzo http://yourserveraddress/osm_tiles/0/0/0.png dovrebbe comparire un piccolo planisfero, mentre in http://yourserveraddress/mod_tile si potranno visualizzare alcune statistiche sul server. I tile sono creati come "metatiles" all'interno della directory /var/lib/mod_tile.

Figura 1. Il planisfero appare se i tile sono generati correttamente (click per ingrandire)


Eseguire renderd all'avvio del computer

Per eseguire automaticamente renderd, procediamo come segue:

sudo cp ~/src/mod_tile/debian/renderd.init /etc/init.d/renderd
sudo chmod u+x /etc/init.d/renderd

Modificare il file /etc/init.d/renderd, scrivendo nelle righe che seguono i valori associati:

DAEMON=/usr/local/bin/$NAME
DAEMON_ARGS="-c /usr/local/etc/renderd.conf"

Tutte le occorrenze di www-data all'interno di questo file devono essere sostituite con username.

L'avvio di renderd si può effettuare così:

sudo /etc/init.d/renderd start
sudo /etc/init.d/renderd stop

I messaggi di errore verranno scritti in /var/log/syslog.

Per abilitare l'avvio automatico al boot, creiamo il seguente collegamento simbolico:

sudo ln -s /etc/init.d/renderd /etc/rc2.d/S20renderd

Esportazione di porzioni di mappe mediante script CGI (opzionale)

In luogo di mod_tile alcune librerie fanno riferimento ad un più vecchio sistema di esportazione basato su script CGI: lo si noterà dall'uso di URL del tipo http://tile.openstreetmap.org/cgi-bin/export/....

Si noti che questo sistema di esportazione è molto meno efficiente, in quanto non viene effettuato caching. Ad ogni modo, per replicarne il funzionamento si può procedere come segue:

1. Installare python-cairo come dipendenza diretta dello script con:

apt-get install python-cairo

2. Scaricare e rendere eseguibile lo script:

wget http://svn.openstreetmap.org/sites/tile.openstreetmap.org/cgi-bin/export -O /usr/lib/cgi-bin/export
chmod +x /usr/lib/cgi-bin/export

3. Attivare mod_cgi in Apache:

sudo a2enmod cgi
sudo service apache2 restart

Le mappe saranno disponibili con richieste HTTP GET come la seguente:

http://104.131.34.188/cgi-bin/export?bbox=9.9678,42.4111,12.401188162377,44.2077305682391&scale=1200000&format=png

Inizializzare un'applicazione Apache Cordova

Per l'inizializzazione di un'applicazione minimale Apache Cordova, possiamo fare riferimento alla relativa guida pubblicata su HTML.it.

Supponendo di aver configurato almeno un target, il comando per creare lo stub dell'applicazione è:

cordova create hello_osm it.html.HelloOSM HelloOSM

Scaricare Leaflet

Leaflet si può scaricare dal suo sito ufficiale. Scaricato l’archivio, decomprimiamone il contenuto, ponendo i file .js nella sottocartella www/js del nostro progetto, ed i file css nella sottocartella www/css.

Integrazione di Leaflet

Nell'esempio che segue verrà mostrata a tutto schermo una mappa dell'area di Roma. Tutti i percorsi sono relativi alla cartella del progetto Cordova.

1. Creare il file www/index.html con questo contenuto:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/leaflet.css" />
        <title>Hello OpenStreetMap</title>
    </head>
    <body>
        <div id="map" style=";  solid #aaa;">
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/leaflet.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

2. Creare il file index.js con il seguente contenuto:

var map;
var app = {
    // Costruttore dell'applicazione
    initialize: function() {
        map = new L.Map('map');
        // Crea un livello per i tile con il copyright
        var osmUrl='http://104.131.34.188/osm_tiles/{z}/{x}/{y}.png';
        var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
        var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 12, attribution: osmAttrib});           
        // Imposta la visualizzazione all'area di Roma, zoom 9
        map.setView(new L.LatLng(41.89,12.51),9);
        map.addLayer(osm);
    }
};
app.initialize();

A questo punto basta lanciare l'emulatore Android con il comando cordova emulate per veder apparire la mappa desiderata.

Figura 2. La mappa visualizzata nell’applicazione Android (click per ingrandire)


Ti consigliamo anche