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
Go to your account . Write your personal key, which is on the first page
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...).
Step 5: Test
Go to http://yourdomaine.com/mymap.html
Step 6: Etape 6 : Improve the available functions on your page.
Thanks to the examples, and documentation, improve the functionalities available on your page.
You can, for example:
