Application Programming Interface
 Recherche Web 
 Annuaire 
 Carte 
 Route 
 Météo 
 Nouvelles 
Nouveau Produits 
 FR ▼
Introduction | Premiers pas | Référence géografique | Examples | Référence de classe | Conditions d'utilisation

Introduction

Avec l'API de map.search.ch la carte interactive se laisse intégrer dans une page ou une application web. Des propres POI (Points of Interest) se laissent positionés sur la carte. Lisez la documentation suivante avec soins et étudiez les examples attentivement.

Premiers pas

La variante la plus simple pour intégrer la carte interactive est d'utiliser la fonction "Intégrer carte" situé à gauche de la carte normale. La fonction peut aussi être utilisée sans connaissance de JavaScript.

Intégration manuelle

L'API et cette documentation s'adresse à des personnes qui sont familières avec JavaScript et la programmation par objets. Des notions de base en HTML et CSS sont également indispensables.

Afin d'intégrer la carte il suffit de charger notre API-JavaScript et d'instancier la classe map avec quelques paramètres. L'extrait de la carte est attaché à un conteneur existant (p.ex. un <div>) et s'adapte à sa grandeur et sa position dans le document. L'exemple suivant affiche une carte de la grandeur de 500x400 pixel avec le centre positionné à Zurich.

<!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=ISO-8859-1" />
  <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>

Afficher l'example (helloworld.html)

Explication pas par pas

D'abord le script de l'API est chargé. Comme option la langue peut être indiqué par le paramètre lang:

<script type="text/javascript" src="http://map.search.ch/api/map.js?lang=fr"></script>

Dans une partie script la classe SearchChMap est instancié et attaché au conteneur "mapcontainer" (préréglage) qui est défini dans le body de la page HTML. Lors de l'appel le centre de la carte (Zurich) est défini par un paramètre:

<script type="text/javascript"> var Map = new SearchChMap({ center:"Zuerich" }); </script>

La carte s'initialise automatiquement dés que la page HTML est chargée. Bien entendu l'API de la carte comporte des fonctions supplémentaires afin de configurer et de contrôler la carte. Celle-ci son documentées dans la Référence des classes et sont décrites plus précisément à l'aide d'exemples.

Navigateurs pris en charge

L'API utilise les technologies JavaScript et DOM et implique ainsi un navigateur récent. La compatibilité du navigateur utilisé est contrôlée automatiquement. Vous pouvez contrôlez la compabilité aussi vous-même à l'aide de votre script, afin d'afficher d'éventuels avertissements ou erreurs. Veuillez utiliser la fonction statique SearchChMap.isBrowserCompatible() à ce sujet.

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

Les navigateurs suivants sont priss en charge pour l'instant:

  • 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+

Référence géografique

Afin de définir le centre de la carte et de positionner vos propres POI, les notations suivantes sont possibles:

Examples

Une manière simple d'intégrer la carte dans votre page web, c'est de prendre un example existant et de l'adapter selon vos besoins. Dans les examples suivants uniquement la partie importante du code JavaScript est décrite et nous nous passons d'afficher le code HTML complet. Ceci dit, vous pouvez télécharger l'exemple respectif à l'aide du lien et adapter le code à vos désirs.

Carte avec des éléments de contrôle

Les éléments de contrôle comme zoom, type de la carte ou le flèches de direction peuvent être spécifiés comme paramètre ou ils peuvent être contrôlés à l'aide de la méthode set() pendant la periode d'action de la carte.

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" });
}

Afficher l'example (controls.html)

D'abord une carte est activée avec les éléments de contrôle du zoom, du type de carte et de l'échelle. La fonction hideControls() masque tous les éléments sauf l'échelle, showControls() fait réapparaître tous les éléments de contrôle.

Centre de la carte et animation

Le centre de la carte peut aussi être redéfini pendant l'utilisation de la carte à l'aide de la méthode set(). La méthode go() déplace la carte à l'aide d'une animation vers le nouveau centre et au nouveau niveau du zoom (optionnel).

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 })
}

Afficher l'example (moveanim.html)

Les valeurs valables du paramètre zoom sont indiquées dans la référence des classes.

Contrôle par souris et clavier

Le contrôle interactif de la carte avec la souris est activé par les préréglages de la carte, comme on l'attend de map.search.ch. Ce comportement peut être adapté, respectivement des modes additionnels, comme le contrôle par clavier peuvent être activés.

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

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

Afficher l'example (interactive.html)

A l'aide de la méthode de l'objet enable() et disable() les modes de contrôle peuvent être activés ou déactivés. Une liste des modes possibles est décrit dans la référence des classes.

Affichage de POI

map.search.ch dispose d'une grande sélection de POI, qui sont subdivisés en différents groupes. A l'aide de l'API vous pouvez activer une catégorie de POI ou tout un groupe. Veuillez utiliser les méthodes de l'objet showPOIGroup() et hidePOIGroup()à ce sujet.

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");
}

Afficher l'example (poigroups.html)

Les groupes POI souhaités peuvent aussi être défini à l'aide du constructuer avec les paramètres poigroups, comme utilisé dans l'exemple. Pendant l'utilisation de la carte, les groupes peuvent être activés ou déactivés selon le besoin. Vous trouvez la liste complète de toutes les catégories et de tous le groupes POI dans la référence des classes.

Positionner ses propres POI sur la carte

L'API contient aussi des fonctions, afin de positionner ses propres POI sur la carte. Ces symboles instancés en tant qu'objet de la classe SearchChPOI (ou d'une classe dérivée) sont positionés sur la carte à l'aide de la méthode de l'objet 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);

Afficher l'example (dynpois.html)

Calculer des itinéraires

La fonction de calcul d'itinéraire de map.search.ch peut également être utilisée via un API. L'itinéraire est affiché sur la carte accompagné de la distance et du temps de parcours estimé. Pour la description de l'itinéraire, il faut établir un lien direct vers map.search.ch pour le moment.

var Map = new SearchChMap({ center:"Immensee/Artherstrasse 60", 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;
}

Afficher l'example (route.html)

Le point de départ et la destination d'un itinéraire sont transmis au constructeur ou à la méthode set() à l'aide des champs from et to. L'événement change détecte si l'itinéraire est chargé. get('routeinfo') permet d'afficher des détails tels que le temps de parcours et la distance. Pour proposer un lien vers la description de l'itinéraire, l'objet Map fournit l'URL complète pour ce faire avec getPermUrl('directions').

Affichage des coordonnées

L'API permet d'afficher les coordonnées de la position du pointeur de la souris dans les champs mx et my de l'événement lorsque l'on déplace le pointeur de la souris et clique. Cette information n'est toutefois affichée que si une coordonnée, une localité ou une rue est indiquée comme centre de la carte. Lorsqu'une adresse complète est spécifiée comme centre de la carte, nous ne pouvons pas fournir cette information pour des raisons juridiques.

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.5m per pixel
  var setpoi = e.mx && (e.button == 1) && (Map.get("zoom") <= 0.5);
  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";
  }
});

Afficher l'example (coordinates.html)

Avez-vous envie d'avantage d'informations? Dans la référence des classes vous trouvez tous les détails à propos des fonctions disponibles de l'API.
© Räber Information Management GmbH Partager sur FacebookPartager sur Facebook | plus: Immobilier Cinéma Télé ... | Aide | Conditions | Publicité | Feedback