Application Programming Interface
API infopagina
 Start 
 Elenco telefonico 
 Mappa 
 Itinerario 
 Meteo 
 Notizie 
 Orario 
 IT ▼
Introduzione | Primi passi | Riferimenti Geo | Esempi | Riferimento di classe | Condizioni d'utilizzo

Introduzione

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.

Primi passi

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.

Integrazione manuale

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>map.search.ch API Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="http://map.search.ch/api/map.js"></script>
  <script type="text/javascript">
  //<![CDATA[

  var Map = new SearchChMap({ center:"Zuerich" });

  //]]>
  </script>
</head>
<body>
  <div id="mapcontainer" style="width:500px; height:400px; border:2px inset #ccc"></div>
</body>
</html>

Visualizza esempio (helloworld.html)

L'esempio, spiegato passo per passo

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="http://map.search.ch/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:"Zuerich" }); </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.

Browser supportati

API si basa su JavaScript e DOM e ha quindi bisogno di un browser di nuova generazione. La compatibilità del browser utilizzato viene verificata automaticamnte; potrà eseguire tale verifica però anche da sé nel suo script per visualizzare eventuali avvertimenti o alternative. A tale scopo è a disposizione la funzione statica SearchChMap.isBrowserCompatible().

if (!SearchChMap.isBrowserCompatible()) alert("Your browser is not ready for map.search.ch");

Attualmente sono supportati i seguenti browser:

  • Internet Explorer 5.5+ (Windows)
  • Mozilla Firefox 1.0+
  • Mozilla Suite 1.7+
  • Netscape 7.1+
  • Apple Safari 1.2+
  • Opera 8.02+
  • Konqueror 3.2+

Riferimento Geo

Per definire il centro della mappa e per posizionare dei propri POI, può utilizzare i seguenti modi di scrittura:

Esempi

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.

Mappa con elementi di pilotaggio

Elementi di pilotaggio come zoom, tipo di mappa o frecce direzionali 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.

Centro della mappa e animazione

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", zoom:8 });
}

// Animated movement to Zürich-Seebach
function movetoSeebach() {
  Map.go({ center:[684592, 252857], zoom:2 })
}

Visualizza esempio (moveanim.html)

I valori valevoli per il parametro zoom sono riportati nel Riferimento di classe.

Pilotaggio con mouse e tastiera

I parametri standard della mappa attivano il pilotaggio interattivo della mappa con il mouse, come si è abituati con map.search.ch. Questa modalità può essere anche adattata, risp. possono essere attivati anche altri modi, come ad es. il pilotaggio tramite tastiera.

var Map = new SearchChMap({ controls:"all", enable:"dragging,clickzoom,pois" });

function keyboard() {
  Map.disable("dragging,clickzoom");
  Map.enable("keyboard");
}

Visualizza esempio (interactive.html)

Tramite i metodi per oggetto, enable() e disable() possono essere attivati/disattivati i singoli modi di pilotaggio. Una lista con tutti i modi supportati e la loro esatta denominazione è riportata in Riferimento di classe.

Visualizzazione di Points-of-Interest

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:"Zuerich/Niederdorfstr.", 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.

Posizionare sulla mappa i propri simboli (POI)

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().

var Map = new SearchChMap({ center:"Bern/Kramgasse", circle:false, poigroups:"-" });

// Add a custom POI
Map.addPOI(new SearchChPOI({ center:[600686,199650], title:"Sightseeing",
                             html:"The famous <b>Zytglogge<\/b> tower", icon:"p2.gif" }));

// Create a POI object and attach event listeners
var P1 = new SearchChPOI({ center:[601062,199596], title:"Point of Interest",
                           html:"The mystical ghost house", icon:"p1.gif" });
P1.addEventListener("popupopen", function(e){ window.status = "POI-Box popped up!"; });
P1.addEventListener("popupclose", function(e){ window.status = ""; });
Map.addPOI(P1);

Visualizza esempio (dynpois.html)

Calcolo del percorso

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:"Zug/Grafenauweg 12", 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 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 });
  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.

Lettura delle coordinate

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. Queste informazioni vengono messe a disposizione solo se è stata indicata una coordinata, una città o una via come punto centrale della mappa. Se si indica un indirizzo completo come punto centrale della mappa, per motivi legali non siamo autorizzati a fornire queste informazioni.

var start, poi;
var Map = new SearchChMap({ center:"Zuerich", circle:false });
Map.addPOI(poi = new SearchChPOI({ html:"Start", icon:"p1.gif" }));
Map.addEventListener("load", function(e) {
  if (e.mx)
    start = [e.mx, e.my];  // Set start first time map is ready
});
Map.addEventListener("mouseclick", function(e) {
  // Check if coordinates provided, left button clicked and zoom at 0.25m per pixel
  var setpoi = e.mx && (e.button == 1) && (Map.get("zoom") <= 0.25);
  if (setpoi)
    poi.set({ center:(start = [e.mx, e.my]) });
  return !setpoi;  // Only zoom if not setting poi
});
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.
© search.ch / Tamedia Condividi su FacebookCondividi su Facebook | Più servizi: Immobili Cinema TV ... | Condizioni | Pubblicità | Contatti