VIAMICHELIN JAVASCRIPT API


Examples

Introduction

It makes it possible to calculate a distance between 2 points, with the possibility of adding up to 6 stages (8 with the departure and the arrival).

You can add options like choosing the kind of road you want to take and informations about the kind of vehicule (car, cycle, by walk…).

You can find an easy use of the component, calculate a distance between a piont A and B on the quickstart guide.

The main use of the itinerary component

Add a stage

When you make your route, you inevitably choose a starting place and of arrival. But you can also want to pass by a specific place on your way.

The places by which the route passes are defined using the property steps. The first place will be the departure, the last place, the arrival. If others informations are mentionned, it will be considered as stages.

In the example illustrates a Paris - Bordeaux route, by passing  through 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);

 

Consult the page demonstration.

Display the path on the map

When you propose to your users a calculation of route, you want not to only to often display its duration, its cost or some informations, but especially to allow them to visualize the layout of it.

In the next example, we will display a map showing the path on the map.

In the configuration of the route, the reference related to the map will be specified with the option map. We mention the option with an object with 2 properties, and a container which contains the DOM element and the focus option which indicates that the map must be repositioned on the route.

NB: we use a map without options here. If you want to go further with this functionality, check the documentation of the map or its examples.

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

 

Consult the page demonstration.

Display the road map

You can also display the roadmap to the user.

Then, you must place a DOM element in the page which will be used as container to the roadmap, and add a reference to this element in the configuration of the route, with the roadsheet option.

 

In this example, we can see a div element, designated by the id «roadsheet » on the HTML code:

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

 

Consult the page demonstration.