VIAMICHELIN JAVASCRIPT API


Exemples

Introduction

Le composant de calcul d'itinéraire se trouve dans l'APIJS sous l'appelation ViaMichelin.Api.Itinerary.

Il permet de calculer un itinéraire entre 2 points, avec la possibilité d’ajouter jusqu’à 6 étapes (8 avec le départ et l’arrivée).

Plusieurs types d’itinéraires sont proposés, ainsi que différentes options, tels que le type de route à emprunter (par exemple l'autoroute ou non), ou les informations concernant le véhicule.

Vous trouverez l'utilisation la plus simple du composant, c'est à dire, aller d'un point A à un point B, dans le quickstart guide.

Les principales utilisations de l'itinéraire

Ajouter une étape

Lorsque vous faites votre itinéraire, vous choisissez forcément un lieu de départ et d'arrivée. Mais vous pouvez également vouloir passer par un endroit spécifique sur votre chemin.

Les lieux par lequel passe l'itinéraire sont définis à l'aide de la propriété steps. Le premier lieu sera le départ, le dernier l'arrivée. Si d'autres éléments sont précisés dans steps, ils seront considérés comme des étapes.

Dans cet exemple, nous allons faire un itinéraire Paris - Bordeaux qui passera par Nantes.

var paris = {coords : {lon : 2.35107, lat : 48.85684}},
    bordeaux = {coords : {lon : -0.57574, lat : 44.83498}},
    nantes = {coords : {lon : -1.55714, lat : 47.21784}};

var conf = {
  steps : [
    paris,
    nantes,
    bordeaux
  ]
};
var callbacks = {
  onSuccess : function (result) {
    iti = result.header.summaries[0];
    var t = iti.totalTime,
      h = Math.floor(t / 3600),
      m = Math.floor(t % 3600 / 60),
      report = "";
    report +=   "Distance : " + iti.totalDist / 1000 + "km";
    report += "\nDurée    : " + h + "h " + m + "min";
    report += "\nCoût     : " + iti.tollCost.car / 100 + "€";
    output.innerHTML = report;
  }
};
VMLaunch("ViaMichelin.Api.Itinerary", conf, callbacks);
		

Consultez la page de démonstration.

Afficher le tracé sur une carte

Lorsque vous proposez à vos utilisateurs un calcul d'itinéraire, vous voulez souvent ne pas seulement leur afficher sa durée, son coût ou quelque information de résumé, mais surtout leur permettre d'en visualiser le tracé.

Dans cet exemple, nous allons afficher une carte sur laquelle nous afficherons le tracé de l'itinéraire.

Dans la configuration de l'itinéraire, la référence à la carte sera spécifiée avec l'option map. On renseigne l'option avec un objet à 2 propriétés, container qui contient la référence à l'élément DOM et focus qui indique que la carte doit se repositionner sur l'itinéraire.

NB : nous utilisons ici une carte sans options. Si vous voulez aller plus loin avec cette fonctionnalité, il vous est conseillé d'avoir parcouru la documentation de la cartographie ou ses exemples.

var launchItinerary = function () {
  var bordeaux = {coords : {lon : -0.57574, lat : 44.83498}},
      nantes = {coords : {lon : -1.55714, lat : 47.21784}};
  var confIti = {
    steps : [
      bordeaux,
      nantes
    ],
    map : {
      container : $_id("mapContainer"),
      focus : true
    }
  };
  VMLaunch("ViaMichelin.Api.Itinerary", confIti);
};
var confMap = {
  container : $_id("mapContainer")
};
var callbacksMap = {
  onSuccess : function () {
    launchItinerary();
  }
};
VMLaunch("ViaMichelin.Api.Map", confMap, callbacksMap);
		

Consultez la page de démonstration.

Afficher la feuille de route

En plus ou à la place du tracé sur la carte, vous pouvez afficher à l'utilisateur sa feuille de route.

Pour cela, vous devez placer un élément dom dans la page qui servira de conteneur à la feuille de route, et ajouter une référence à cet élément dans la configuration de l'itinéraire, avec l'option roadsheet.

Dans notre exemple, nous avons un élément div d'id roadsheet dans notre HTML.

var paris = {coords : {lon : 2.35107, lat : 48.85684}},
    bordeaux = {coords : {lon : -0.57574, lat : 44.83498}},
    nantes = {coords : {lon : -1.55714, lat : 47.21784}};

var conf = {
  steps : [
    paris,
    nantes,
    bordeaux
  ],
  roadsheet : $_id("roadsheet")
};
var callbacks = {
  onSuccess : function (result) {
    iti = result.header.summaries[0];
    var t = iti.totalTime,
      h = Math.floor(t / 3600),
      m = Math.floor(t % 3600 / 60),
      report = "";
    report +=   "Distance : " + iti.totalDist / 1000 + "km";
    report += "\nDurée    : " + h + "h " + m + "min";
    report += "\nCoût     : " + iti.tollCost.car / 100 + "€";
    output.innerHTML = report;
  }
};
VMLaunch("ViaMichelin.Api.Itinerary", conf, callbacks);
		

Consultez la page de démonstration.