La guida presenta un semplice applicativo SearchRoad basato su uno dei molteplici plugin di cui la community fa largamente uso in combinazione con la libreria base leaflet.js. L’obiettivo di questa breve guida è capire quale codice dovremo utilizzare per poter visualizzare correttamente una nostra mappa in Leaflet anche su device mobile.
Leaflet è una libreria molto versatile, scritta in javascript con potenzialità e features che spaziano ad ampio raggio per rendere una webmap veramente completa. Nel blog è stato già affrontata un’introduzione, nella quale si passavano i rassegna le basi per pubblicare una mappa completa e capire il funzionamento, molto semplice, di questo strumento. Leggi anche Leaflet: una breve introduzione
Iniziamo col rendere visibile la nostra mappa sul proprio smartphone. È stata utilizzata la mappa base, utilizzata nell’articolo di introduzione leaflet_basemap.html, che qui rinominiamo index.html
A tale mappa basta semplicemente aggiungere all’HTML e allo stile CSS codice che rende adattabile lo screen della mappa alle dimensioni ridotte di un cellulare. Per tale motivo si aggiunge nella parte <head> del nostro index.html :
| <meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” /> |
Gli diamo anche uno stile CSS compatibile anche per il browser di Chrome presente su smartphone (si nota l’assenza del % su width, sostituito da vw, per risolvere un bug su tale browser) :
| <style type=”text/css”> html, body,#map {height: 100%; width: 100vw; } </style> |
Aggiungendo solo queste semplici righe, la nostra basemap risulta essere già visibile per qualsiasi dispositivo portatile, importandola su proprio spazio web.
Una volta abilitata la mappa per poterla visualizzare da un browser presente sul cellulare, aggiungiamo adesso una fuzionalità per poter interagire con essa. Per fare ciò ci serviamo di un plugin chiamato OSM Geocoder . Tale plugin è stato sviluppato, sfruttando a sua volta le APIs del geocoder Nominatim di OpenStreetMap.
Per questioni di comodità e spazio sui server sono stati utilizzati i CDN del plugin in questione. Questo è possibile aggiungendo nella parte dell’ <head> i seguenti riferimenti:
| <script src=“https://rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.js”></script> |
| <link rel=“stylesheet” href=“https://rawgit.com/k4r573n/leaflet-control-osm-geocoder/master/Control.OSMGeocoder.css” /> |
Il plugin base funziona aggiungendo nella parte <script>, dov’è presente il codice javascript di leaflet due semplici righe (in rosso) che richiamano la libreria del plugin :
var map = L.map('map').setView([48.854716, 2.349014 ], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
var osmGeocoder = new L.Control.OSMGeocoder();
map.addControl(osmGeocoder);
|
Per vedere come funziona questo script basta verificare il link della demo ufficiale.
Come è possibile verificare la mappa chiede all’user di ricercaresemplicemente un luogo, individuato grazie alle librerie di Nominatim. Il risultato è una bounding box, ovvero una zoomata sulla zona ricercata.
Ma se volessimo aggiungere un marker per restringere ed individuare quasi esattamente il luogo ricercato?
Per rispondere a tale domanda dobbiamo sfruttare le option che il plugin ci mette a disposizione, modificando ad hoc lo script riguardante la funzione di callback lanciata non appena si clicca sul tasto locate. E’ stato inserito del codice necessario ad estrarre il centro della boundig box, in moda estrapolare la latitudine e longitudine del punto centrale della zoomata risultato. Tale coppia di coordinate va inserita nell’oggetto javascript che identifica il marker, il quale è rappresentato da un icona che andiamo a dichiarare poco più sopra. Tradotto in termini di script aggiungiamo altro codice scritto in tale maniera.
var map = L.map('map').setView([48.854716, 2.349014 ], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© ' + mapLink + ' Contributors',
maxZoom: 18,
}).addTo(map);
//Qui dichiariamo le opzioni del'oggetto javascript rappresentante il Geocoder
var options = {
collapsed: false, /* Whether its collapsed or not */
position: 'topright', /* The position of the control */
text: 'Search', /* The text of the submit button */
placeholder: 'Search location', /* The text of the search input placeholder */
callback: function (results) {
var bbox = results[0].boundingbox;
first = new L.LatLng(bbox[0], bbox[2]); /* Qui cerchiamo il centro della mappa per passare*/
second = new L.LatLng(bbox[1], bbox[3]); /* le lat e long al marker */
bounds = new L.LatLngBounds([first, second]);
var center= bounds.getCenter(); /*utiliziamo il metodo getCenter() per estrarre il centro della Bounding box*/
this._map.fitBounds(bounds);
//creiamo la variabile icona
var myIcon = L.icon({
iconUrl: 'https://raw.githubusercontent.com/k4r573n/leaflet-control-osm-geocoder/master/demo/images/marker-icon.png',
});
// creiamo il marker
var marker = L.marker(center, {
icon: myIcon
});
marker.addTo(map)
}
};
var osmGeocoder = new L.Control.OSMGeocoder(options); //Qui passiamo la varibile option
map.addControl(osmGeocoder);
|
Il risultato finale è visibile qui in basso. Come è possibile notare la funzione di callback inserisce sulla mappa un marker che individua con buona precisione la location che si pretende ricercare.
Conclusioni
SearchRoad mette in luce una delle molteplici possibilità che LeafletJS offre all’user, il tutto attraverso l’utilizzo dei sui plugin che semplificano di gran lunga il linguaggio di scripting per sviluppare una determinata caratteristica della nostra webmap. L’esercizio che abbiamo appena visto è di gran lunga migliorabile. Infatti cio’ che si puo’ fare è migliorare l’accuratezza del marker sulla mappa che individua il punto da ricercare. Un po’ più complicato potrebbe essere avere come risultato della ricerca un vettoriale disegnato che individua i contorni o linee della location da ricercare. Ad esempio ricercando una strada “illuminare” con un vettoriale di tipo linea l’intera strada, oppure per una piazza risaltarne il poligono.