map.search.ch API permette di integrare la mappa interattiva della Svizzera in una website oppure in un'applicazione web, con la possibilità di posizionare dei propri Points-of-Interest (POIs). Mediante la qui seguente documentazione di API, potrà acquisire familiarità e apprendere dagli esempi riportati.
La variante più semplice per integrare le mappe interattive è data dalla funzione "integrare mappa" a sinistra, a fianco della mappa normale. Essa può essere utilizzata anche da persone senza conoscenza di JavaScript.
API e la presente documentazione è ideata per persone che hanno familiarità con JavaScript e con la programmazione secondo gli oggetti. Premesse necessarie sono anche le conoscenze basilari di HTML e CSS
Ai fini dell'integrazione della mappa è sufficiente caricare il nostro API-JavaScript e instanziare la classe map, indicando alcuni parametri. L'estratto della mappa viene collegato ad un container esistente (ad es., un <div>) e assume la sua dimensione e posizione nel documento. L'esempio qui di seguito riportato evidenzia una mappa di 500x400 pixel, con al centro Zurigo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>search.ch/map/ API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="//search.ch/map/api/map.js"></script>
<script type="text/javascript">
//<![CDATA[
var map = new SearchChMap({ center:"Zürich" });
//]]>
</script>
</head>
<body>
<div id="mapcontainer" style="max-width:500px; height:400px; border:2px inset #ccc"></div>
</body>
</html>
Visualizza esempio (helloworld.html)
Come prima cosa occorre caricare l'API-Script di map.search.ch. A titolo opzionale, tramite il parametro è possibile indicare anche la lingua (lang):
<script type="text/javascript" src="//search.ch/map/api/map.js?lang=it"></script>
In un proprio Script-Tag sarà instanziata la classe SearchChMap e legata al container "mapcontainer" (nome default), definito nel body della pagina HTML. In fase di instanziamento sarà anche indicato come parametro il centro della mappa (Zurigo):
<script type="text/javascript">
var map = new SearchChMap({ center:"Zürich" });
</script>
La mappa si avvia automaticamente, appena la pagina sarà stata completamente caricata. Naturalmente API offre anche altre funzioni per la configurazione e il pilotaggio della mappa. Tali funzioni sono documentate nel Riferimento di classe e sono descritte più dettagliatamente negli esempi.
Per definire il centro della mappa e per posizionare dei propri POI, può utilizzare i seguenti modi di scrittura:
"Bern,Marktgasse 46")[200000, 600000])[46.9491490042, 7.4368858337])"d/mu4zdnjn2")Un modo semplice per integrare la mappa nella sua website è quello di scegliere un esempio riportato e di adattarlo alle sue esigenze. Gli esempi qui di seguito riportati descrivono solo la parte rilevante del JavaScript-Code e non mostrano più tutto il file HTML. Potrà tuttavia scaricare l'esempio di interesse tramite il link e adeguarla.
Elementi di pilotaggio come zoom, tipo di mappa o scala della mappa possono essere indicati come parametri al costruttore, o attivati/disattivati anche in riferimento al tempo di funzionamento tramite il metodo set().
var map = new SearchChMap({ center:[679520, 212273], controls:"type,zoom,ruler" });
// Hide map controls except ruler
function hideControls() {
map.set({ controls:"ruler" });
}
// Show all map controls
function showControls() {
map.set({ controls:"all" });
}
Visualizza esempio (controls.html)
Prima viene creata una mappa con elementi di pilotaggio per zoom, tipo di mappa e scala della mappa. La funzione hideControls() disattiva tutti gli elementi, ad eccezione della scala della mappa, showControls() fa nuovamente apparire tutti gli elementi di pilotaggio disponibili.
Il centro della mappa può essere indicato anche in riferimento al tempo di funzionamento tramite il metodo set(). Il metodo go() muove la mappa in maniera animata verso il nuovo centro e verso il nuovo grado di zoom (optional).
var map = new SearchChMap({ controls:"all" });
// Set new center of the map
function gotoZuerich() {
map.set({ center:"Zürich", zoomlevel:11 });
}
// Animated movement to Zürich-Seebach
function movetoSeebach() {
map.go({ center:[683371,252535], zoomlevel:15 })
}
Visualizza esempio (moveanim.html)
I valori valevoli per il parametro zoom sono riportati nel Riferimento di classe.
map.search.ch dispone di numerosi POI, suddivisi in diversi gruppi. Tramite API, potrà visualizzare sulla mappa singole categorie o interi gruppi di POI. A tale scopo sono a disposizione i metodi per oggetto showPOIGroup() e hidePOIGroup().
var map = new SearchChMap({ container:"mapwidget", center:"Zürich,Niederdorfstr.10", poigroups:"verkehr" });
// Show POI layer with restaurants, bars and cafes
function showRestaurants() {
map.showPOIGroup("restaurant,bar,cafe");
}
// Hide all public transport POIs
function hidePublicTransports() {
map.hidePOIGroup("verkehr");
}
Visualizza esempio (poigroups.html)
I livelli di POI preferiti possono essere attivati anche già nel costruttore, tramite il parametro poigroups come mostrato nell'esempio. Durante l'esecuzione possono essere attivate e disattivate a piacimento tutti i livelli voluti. La lista completa di tutte le categorie POI e i relativi raggruppamenti sono riportati nel Riferimento di classe.
API offre anche funzioni per indicare i propri Points-of-Interest sulla sua mappa. I simboli di questo tipo vengono instanziati come oggetto nella classe SearchChPOI (o una classe derivante) e aggiunti all'oggetto della mappa tramite il metodo per oggetti addPOI().
function info(html) {
document.getElementById("info").innerHTML = html;
}
var map = new SearchChMap({ center:"Bern,Kramgasse", marker:false, poigroups:"-" });
p1 = new SearchChPOI({
center:[601062,199596],
title:"Point of Interest",
html:"The mystical ghost house",
icon:"p1.png"
});
p2 = new SearchChPOI({
center:[600686,199650],
title:"Sightseeing",
html:"The famous <b>Zytglogge<\/b> tower",
icon:"p2.png"
});
p3 = new SearchChPOI({
center:[600500,199800],
title:"Draggable",
html:"Drag this POI wherever you want",
icon:"p4.png",
draggable:true
});
p1.addEventListener("popupopen", function(e){ info("POI-Box popped up!"); });
p1.addEventListener("popupclose", function(e){ info(""); });
p3.addEventListener("dragstart", function(e){ info("dragstart: " + e.mx + "," + e.my); });
p3.addEventListener("dragend", function(e){ info("dragend: " + e.mx + "," + e.my); });
map.addPOI(p1);
map.addPOI(p2);
map.addPOI(p3);
Visualizza esempio (dynpois.html)
Se i propri simboli vengono posizionati sulla mappa è possibile avere la mappa di determinare automaticamente il livello di zoom e il centro per mostrare tutti i simboli non specificando center e zoom e aggiungendo centerpois:true.
var map = new SearchChMap({ centerpois:true, marker:false, poigroups:"-" });
// Add custom POIs, map will be centered around them
map.addPOI(new SearchChPOI({ center:"Förrlibuckstr. 62", title:"search.ch", html:"Office of search.ch", icon:"p1.png" }));
map.addPOI(new SearchChPOI({ center:"Zürich HB", title:"Zürich HB", html:"Zurich main station", icon:"p2.png" }));
map.addPOI(new SearchChPOI({ center:"Grossmünster Zürich", title:"Grossmünster", html:"Famous church in Zurich", icon:"p2.png" }));
Visualizza esempio (centerpois.html)
La funzione di pianificazione dei percorsi di map.search.ch può essere utilizzata anche via API. Il percorso viene tracciato sulla mappa e vengono visualizzati la distanza e il tempo di viaggio. Per ottenere la descrizione del percorso occorre innanzitutto collegarsi direttamente a map.search.ch.
var map = new SearchChMap({ center:"Zürich,Förrlibuckstr. 62", type:"street" });
// Add event handler that gets the new properties after the map changed
map.addEventListener("change", function(e) {
if (e.route && e.route != window.current_route) { // Check if route info has changed
var routeinfo = map.get('routeinfo');
document.getElementById("info").innerHTML =
"Drive: " + routeinfo.distance + ", ca. " + routeinfo.time +
', <a target="_top" href="' + map.getPermUrl('directions') + '">Directions<\/a>';
document.getElementById("destination").value = map.get('from');
window.current_route = e.route;
}
});
// handler for the form submit action
function routeFormSubmit(form)
{
if (form.elements.from.value)
map.set({ from: form.elements.from.value, to: form.elements.to.value, routemode:form.elements.routemode.value });
return false;
}
Visualizza esempio (route.html)
Il punto iniziale e il punto finale di un percorso vengono indicati al costruttore con i campi from e to o il metodo set(). Una vola caricato il percorso, questo potrà essere rilevato nell'evento change. Con get('routeinfo') vengono visualizzati dettagli quali il tempo di viaggio e la distanza. Per offrire un link alla descrizione del percorso, l'oggetto mappa fornisce con getPermUrl('directions') l'URL completo.
L'API permette di leggere le coordinate svizzere in base alla posizione del mouse muovendo e facendo clic con il mouse. Tali coordinate vengono indicate anche nei campi mx e my dell'evento (mx=E, my=N).
var start, poi;
var map = new SearchChMap({ center:"Zürich,Rämistr.101", marker:false });
map.addPOI(poi = new SearchChPOI({ html:"Start", icon:"p1.png" }));
map.addEventListener("load", function(e) {
if (e.mx)
start = [e.mx, e.my]; // Set start first time map is ready
});
map.addEventListener("contextmenu", function(e) { // move start on right click or long press on touchscreens
if (e.mx)
poi.set({ center:(start = [e.mx, e.my]) });
});
map.addEventListener("mousemove", function(e) {
if (start && e.mx) { // Check if coordinates provided
var dx = start[0] - e.mx, dy = start[1] - e.my;
document.getElementById("info").innerHTML =
"Distanz vom Start (" + start + "): " + Math.round(Math.sqrt(dx*dx + dy*dy)) + " m";
}
});
Visualizza esempio (coordinates.html)
Ha voglia di saperne di più? Nel Riferimento di classe trova tutti i dettagli sulle funzioni di API.