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.
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.
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>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>
Afficher l'example (helloworld.html)
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="//search.ch/map/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:"Zürich" });
</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.
Afin de définir le centre de la carte et de positionner vos propres POI, les notations suivantes sont possibles:
"Bern,Marktgasse 46" ou "8001,Bahnhofstrasse")[200000, 600000])[46.9491490042, 7.4368858337])"d/mu4zdnjn2")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.
Les éléments de contrôle comme zoom, type de la carte ou l'échelle 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.
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", zoomlevel:11 });
}
// Animated movement to Zürich-Seebach
function movetoSeebach() {
map.go({ center:[683371,252535], zoomlevel:15 })
}
Afficher l'example (moveanim.html)
Les valeurs valables du paramètre zoom sont indiquées dans la référence des classes.
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:"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");
}
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.
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().
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);
Afficher l'example (dynpois.html)
Si ses propres POI sont placés sur la carte, vous pouvez avoir la carte de déterminer automatiquement le niveau de zoom et le centre pour montrer tous les points en ne spécifiant pas center et zoom et en ajoutant 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" }));
Afficher l'example (centerpois.html)
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:"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;
}
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').
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 (mx=E, my=N) lorsque l'on déplace le pointeur de la souris et clique.
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";
}
});
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.