Una delle richieste e che l'utente doveva avere subito disponibile tutta la cartografia dell'area di interesse (24Km x13Km) senza la necessita' di scaricare dati
Viste le limitazioni imposte e i sistemi da supportare mi sono orientato su una applicazione HTML5 su Phonegap ed usando la libreria Leaflet.JS .
Con Leaflet e' possibile mostrare mappe dinamiche (pan/zoom) derivanti dai progetti di cartografici open e vista la tematica ho scelto come sorgente dati 4UMaps, un servizio dedicato all'escursionismo e alla mountain bike con indicazione delle isoipse e di alcuni tracciati di sentieri
Le varie mattonelle della cartografia ai vari livelli di dettaglio (su 4UMaps il livello di maggiore dettaglio e' il 15) possono essere scaricati medianti il softare MOBAC (Mobile Atlas Creator), un software Java che date le coordinate dei vertici si occupa di scaricare tutti i dati legati all'area selezionata
Il primo problema che si e' posto e' che le mappe dell'area di interesse agli zoom 13-14-15 ha una dimensione di circa 90 Mb, decisamente troppi per gli utenti che si devono scaricare tutto il pacchetto (il limite proposto per l'applicazione completa e' massima di 50 Mb).
Mediante il software Pngyu e' pero' possibile effettuare una compressione dei PNG delle mappe di un fattore del 40-50% senza perdere sensibilmente in qualita'
Per ottenere il segnale del punto GPS e' possibile utilizzare un plugin per Leaflet (Leaflet.Control.GPS)
Per sovrapporre una traccia GPS alla mappa esistono vari plugin di leaflet ma sono nati per l'uso online ed usandoli all'interno di Phonegap viene generato un errore di javascript che per problemi di sicurezza non puo' accedere ai dati sul filesystem; per ovviare a questa limitazione ho trasformato il file GPX in un file testo creando poi un polilinea con l'array dei punti ...tracce con 5000 punti sono gestite senza troppi problemi o rallentamenti)
Al termine il file html di un progetto di sentiero e' cosi' composto (nella sottocartella Maps sono contenute le immagini della cartografia divise per livello di zoom)
--------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<title>Sentiero 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="leaflet.css" />
<link rel="stylesheet" href="leaflet-compass.css" />
<link rel="stylesheet" href="leaflet-gps.css" />
</head>
<body>
<div id="map" style="width: 500px; height: 500px"></div>
<script src="leaflet.js"></script>
<script src="leaflet-compass.js"></script>
<script src="leaflet-gps.js"></script>
<script>
var map = L.map('map').setView([44.1496, 10.7321], 12);
L.tileLayer('Maps/{z}/{x}/{y}.png', {
maxZoom: 15,
attribution: 'Map data © <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://4umaps.eu">4UMaps</a>',
id: 'examples.map-i875mjb7'
}).addTo(map);
var polygon = L.polyline([
[44.136394501,10.721472740],
[44.136398315,10.721463203],
[44.136402130,10.721356392],
[44.136432648,10.721227646],
[44.136440277,10.721220016],
[44.136497498,10.721108437],
[44.136562347,10.721001625],
..................................................................................
..................................................................................
[44.136318207,10.721796036],
[44.136318207,10.721800804],
[44.136306763,10.721786499],
[44.136322021,10.721772194],
[44.136325836,10.721771240],
]).addTo(map);
//map.addControl( new L.Control.Compass() );
map.addControl( new L.Control.Gps({autoActive:false}) );
</script>
</body>
</html>
--------------------------------------------------------
Nessun commento:
Posta un commento