Tutoriel

But :

Ce tutoriel vous guidera dans l'utilisation de l'API ViaMichelin à travers la création de votre première carte.

Temps de réalisation :

45 minutes

Pré-requis

  • Connaissances HTML
  • Connaissances Javascript
  • Un serveur d'application web (Apache, Tomcat, Websphere, JBoss, etc...)

Etape 1 : Créez votre compte ViaMichelin

Rendez-vous sur la page d'inscription .
Remplissez et validez le formulaire pour ouvrir un compte ViaMichelin, et obtenir une clé d'utilisation pour l'API.

Exemple de formulaire d'inscription

Etape 2 : Notez votre clé

Rendez-vous sur votre compte. Notez votre clé personnelle, qui est affichée sur la première page.

Exemple de clé

Etape 3 : Créez un document HTML

Base de travail

A l'aide d'un éditeur de code source HTML comme Notepad++, Ultra-Edit, Eclipse, ou encore Dreamweaver, il va maintenant falloir créer la page qui contiendra la carte. Cette page sera encodée en UTF-8.

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title> </title>
   <body>
      <h1>Carte générée à l'aide de l'API ViaMichelin</h1>
   </body>
</html>

Appel à l'API et enregistrement

Insérez l'appel à l'API, et n'oubliez pas de noter votre clé d'enregistrement.

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title> </title>
<!-- Chargement de l'API -->
      <script type="text/javascript" 
         src="http://api.viamichelin.com/apijs/js/api.js"></script>

      <script type="text/javascript">
/* Enregistrement */
         VMAPI.registerKey("VIAMICHELIN123456789");

      </script>
   </head>

   <body>
      <h1>Carte générée à l'aide de l'API ViaMichelin</h1>
   </body>
</html>

Langue

N'hésitez-pas à ajouter la langue dans laquelle vous travaillez. Cela sera utilisé, par exemple, dans l'affichage d'un itinéraire.

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title> </title>
<!-- Chargement de l'API -->
      <script type="text/javascript" 
         src="http://api.viamichelin.com/apijs/js/api.js"></script>

      <script type="text/javascript">
/* Enregistrement */
         VMAPI.registerKey("VIAMICHELIN123456789");
/* Langue */
         VMAPI.setLanguage("fra");

      </script>
   </head>

   <body>
      <h1>Carte générée à l'aide de l'API ViaMichelin</h1>
   </body>
</html>

Emplacement de la carte

Insérez dans le corps de la page une balise destinée à recevoir la carte.

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title> </title>
<!-- Chargement de l'API -->
      <script type="text/javascript" 
         src="http://api.viamichelin.com/apijs/js/api.js"></script>

      <script type="text/javascript">
/* Enregistrement */
         VMAPI.registerKey("VIAMICHELIN123456789");
/* Langue */
         VMAPI.setLanguage("fra");

      </script>
   </head>

   <body>
      <h1>Carte générée à l'aide de l'API ViaMichelin</h1>
<!-- Emplacement de la carte -->
      <div id="yourmapdiv" style="width:400px; height:320px"></div>
   </body>
</html>

Création de la fonction

Créez une fonction javascript, qui sera appelée après le chargement complet de la page, dont le but est la création et l'affichage de la carte.

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title> </title>
<!-- Chargement de l'API -->
      <script type="text/javascript" 
         src="http://api.viamichelin.com/apijs/js/api.js"></script>

      <script type="text/javascript">
/* Enregistrement */
         VMAPI.registerKey("VIAMICHELIN123456789");
/* Langue */
         VMAPI.setLanguage("fra");

/* Création et affichage dans la page d'un objet VMMap */
         function affiche() {
         }

      </script>
   </head>

<!-- Lancement automatique du script javascript après le chargement de la page -->
   <body onload="affiche()">
      <h1>Carte générée à l'aide de l'API ViaMichelin</h1>
<!-- Emplacement de la carte -->
      <div id="yourmapdiv" style="width:400px; height:320px"></div>
   </body>
</html>

Alimentation de la fonction

Dans votre fonction javascript, créez un objet de type VMMap. Donnez lui l'emplacement, dans le corps de la page, de la future carte. Donnez lui les coordonnées du centre de la carte, ainsi qu'une valeur de zoom. Informez le de votre volonté de permettre à l'utilisateur d'intéragir avec la carte (boutons).

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
      <title> </title>
<!-- Chargement de l'API -->
      <script type="text/javascript" 
         src="http://api.viamichelin.com/apijs/js/api.js"></script>

      <script type="text/javascript">
/* Enregistrement */
         VMAPI.registerKey("VIAMICHELIN123456789");
/* Langue */
         VMAPI.setLanguage("fra");

/* Création et affichage dans la page d'un objet VMMap */
         function affiche() {

/* Création de l'objet VMMap, avec l'emplacement de la carte dans le corps de la page */
            map = new VMMap(document.getElementById("yourmapdiv"));
/* Affichage de la carte, aux coordonnées..., et de zoom... */
            map.drawMap(
               new VMLonLat(-1.5748547260234285,43.47228979932601),10
               );
/* Ajout de boutons pour l'utilisateur */
            map.showMapTools(3);

         }

      </script>
   </head>

<!-- Lancement automatique du script javascript après le chargement de la page -->
   <body onload="affiche()">
      <h1>Carte générée à l'aide de l'API ViaMichelin</h1>
<!-- Emplacement de la carte -->
      <div id="yourmapdiv" style="width:400px; height:320px"></div>
   </body>
</html>

Etape 4 : Lancez votre serveur web

Pour pouvoir fonctionner, votre page doit être présente sur le domaine correspondant à votre clé. Il vous faut donc démarrer votre serveur web (Apache, Tomcat, WebSphere, JBoss, etc...).

Démarrez Tomcat Démarrez Apache à l'aide d'EasyPHP

Etape 5 : Testez

Rendez-vous sur http://votredomaine.com/macarte.html

Votre première carte

Etape 6 : Améliorez les fonctions disponibles sur votre page.

A l'aide des exemples, et de la documentation, disponibles en ligne, améliorez les fonctionalités de votre page.
Vous pouvez ainsi, par exemple :