Tutorial

Goal:

This tutoriel is to show you how to use of ViaMichelin API through the creation of your first map.

Time to complete:

45 minutes

Prerequisites

Knowledge of HTML
Knowledge of Javascript
A web server (Apache, Tomcat, Websphere, JBoss, etc...)

Step 1 : Create a ViaMichelin account

Go to register page .
Fied and submit the form to create a ViaMichelin account, and get a key allowing you to use the API.

Be careful, for a test on your local machine, put "localhost" as a domain

Step 2: Get your key

Check your e-mails and write your personal key.

Step 3 : Create a HTML document

Work basis

With a HTML source editor, as Notepad++, Ultra-Edit, Eclipse, or Dreamweaver, you'll have to create your HTML page to put your map in, UTF-8 encoded.

<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
 <title> </title>
 <body>
 <h1>Map generated by ViaMichelin API</h1>
 </body>
</html>

Using the API

Insert an API call, don't forget to write here your key.

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

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

 </script>
 </head>

 <body>
 <h1>Map generated by ViaMichelin API</h1>
 </body>
</html>

Language

The language you work in. It will be used, for example, in an itinerary.

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

 <script type="text/javascript">
/* Register */
 VMAPI.registerKey("VIAMICHELIN123456789");
/* Language */
 VMAPI.setLanguage("gbr");

 </script>
 </head>

 <body>
 <h1>Map generated by ViaMichelin API</h1>
 </body>
</html>

Map site

Put in the page body, a tag for the map.

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

 <script type="text/javascript">
/* Register */
 VMAPI.registerKey("VIAMICHELIN123456789");
/* Language */
 VMAPI.setLanguage("gbr");

 </script>
 </head>

 <body>
 <h1>Map generated by ViaMichelin API</h1>
<!-- Map location -->
 <div id="yourmapdiv" style="width:400px; height:320px"></div>
 </body>
</html>

Create the function

Create a javascript function, it'll be called after the page loaded. It's to create and post the map in the body.

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

 <script type="text/javascript">
/* Register */
 VMAPI.registerKey("VIAMICHELIN123456789");
/* Language */
 VMAPI.setLanguage("gbr");

/* Create a VMMap object and display the map in the page */
 function affiche() {
 }

 </script>
 </head>

<!-- Automatic javascript launch, after the page loading -->
 <body onload="affiche()">
 <h1>Map generated by ViaMichelin API</h1>
<!-- Map location -->
 <div id="yourmapdiv" style="width:400px; height:320px"></div>
 </body>
</html>

Function feed

In your javascript function, create a VMMap object. Give it the map location, in the body tag. Give it center coordinates too, and a zoom value. Give it the order to put buttons on the map.

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

 <script type="text/javascript">
/* Register */
 VMAPI.registerKey("VIAMICHELIN123456789");
/* Language */
 VMAPI.setLanguage("gbr");

/* Create a VMMap object and display the map in the page */
 function affiche() {

/* Create a VMMap object, with the map location */
 map = new VMMap(document.getElementById("yourmapdiv"));
/* Display the map, coordinates and zoom value needed */
 map.drawMap(
 new VMLonLat(-1.5748547260234285,43.47228979932601),10
 );
/* User buttons */
 map.showMapTools(3);

 }

 </script>
 </head>

<!-- Automatic javascript launch, after the page loading -->
 <body onload="affiche()">
 <h1>Map generated by ViaMichelin API</h1>
<!-- Map location -->
 <div id="yourmapdiv" style="width:400px; height:320px"></div>
 </body>
</html>

Step 4: Launch your server

To work, your page has to be on the domain you've written in your ViaMichelin account. So, you've to start your web server (Apache, Tomcat, WebSphere, JBoss, etc...).