Complete example, case study

Complete example, case study

  • Display a map whose center is the address of a company
  • Display company logo on map
  • Calculate an itinary towards the company (removing the ambiguity on the starting point)
  • Proximity hotel search
  • GPS export of the company geographical coordinates
  • Display the weather
Voir l'exemple 
<html>
 <head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>ViaMichelin Maps & Drive API</title>
 
 <!-- Via Michelin Libraries -->
 <script src="http://api.viamichelin.com/apijs/js/api.js" 
 type="text/javascript"></script>
 
 <script type="text/javascript">
 /* Register key and user language */
 VMAPI.registerKey("JSBS20070201123465789");
 VMAPI.setLanguage("fra");
 
 /* Company informations */
 var entreprise_adresse = '110 Avenue Victor Hugo';
 var entreprise_cp = 92514;
 var entreprise_ville='Boulogne Billancourt';
 var entreprise_pays = '1424';
 var entreprise_logo = 
 'http://dev.viamichelin.fr/wswebsite/fra/img/petit_bib.gif';
 var entreprise_logo_texte = 'Via Michelin';
 
 /* The map */
 var map;
 var carte_largeur = 500;
 var carte_hauteur = 500;
 
 /* Javascript object to transform an address into geographical coordinates */
 var geocoder;
 var geosearch;
 var myweather;
 
 /* Company coordinates */
 var localisation_entreprise;
 var localisation_from;
 
 /* Javascript object to calculate itineraries */
 var myiti;
 var sanscarbu = false;
 var couleur_itineraire = "#00FFFF";
 
 /* The div tag id where to put the results */
 var itidiv_id = "youritidiv";
 var poidiv_id = "yourpoidiv";
 var mapdiv_id = "yourmapdiv";
 
 function initialise_adresse_et_carte(){
 /* Create a tool to transform an address into geographical point */
 geocoder = new VMGeocoder();
 
 /* Create an address object */
 var myaddress = new VMAddress();
 myaddress.address = entreprise_adresse;
 myaddress.zipCode = entreprise_cp;
 myaddress.city = entreprise_ville;
 myaddress.countryVMCode = entreprise_pays;
 
 /* What method will be called by the geocoder response */
 geocoder.addEventHandler("onCallBack", 
 initialise_carte);
 
 /* Launch the search */
 geocoder.search(myaddress);
 }
 
 /* Map init */
 function initialise_carte(){
 /* Create a map object, center it. Let's presume that there is no ambiguity. */
 map = new VMMap(document.getElementById(mapdiv_id));
 localisation_entreprise = geocoder.result;
 
 /* Map resize */
 map.addEventHandler("onCallBack", function(){
 map.resizeTo(carte_largeur, carte_hauteur);
 });
 
 /* Effective map draw */
 map.drawMap(localisation_entreprise, 15);
 
 /* Allow to put tools on the map */
 map.showMapTools();
 
 var image = new VMIcon(entreprise_logo,-12,-12);
 var coucheImage = new VMIconLayer(
 localisation_entreprise, 
 image, 
 entreprise_logo_texte);
 map.addLayer(coucheImage);
 }
 
 /* Display the countries list */
 function load_country(){
 VMCountryUtil.addEventHandler(
 "onCallBack",
 function(){
 document.getElementById("div_country").innerHTML = 
 VMCountryUtil.getSelectHTMLString("country","FRA");
 }
 );
 VMCountryUtil.loadCountryLabels();
 }
 
 function lance_itineraire(){
 myiti = new VMItinerary();
 
 /* Use user informations */
 var from_adresse = document.getElementById("adresse").value;
 var from_cp = document.getElementById("cp").value;
 var from_ville = document.getElementById("ville").value;
 var from_pays = document.getElementById("country").value;
 
 /* Create an address object */
 var myaddress = new VMAddress();
 
 /* Feed the address object */
 myaddress.address = from_adresse;
 myaddress.zipCode = from_cp;
 myaddress.city = from_ville;
 myaddress.countryVMCode = from_pays;
 
 geosearch = new VMGeoSearch();
 
 /* What method will be called by the geosearch response */
 geosearch.addEventHandler("onCallBack",calcul_from);
 
 /* Launch the search */
 geosearch.search(myaddress);
 }
 
 function calcul_from(){
 if(geosearch.results.length==1){
 localisation_from = geosearch.results[0].coords;
 document.getElementById("maybeone").style.display = "none";
 document.getElementById("maybetwo").style.display = "none";
 ajout_etapes_itineraire();
 } else {
 var qtt = document.forms['iti_form'].elements['result_reco'].options.length;
 for (var i=qtt;i>=0;i--){
 document.forms['iti_form'].elements['result_reco'].options[i] = null;
 }
 for (var j=0;j<geosearch.results.length;j++){
 document.forms['iti_form'].elements['result_reco'].options[j] = 
 new Option(geosearch.results[j].VMAmbiguityLine,j);
 }
 document.getElementById("maybeone").style.display = "block";
 document.getElementById("maybetwo").style.display = "block";
 }
 }
 
 function selectionner(){
 var index = document.forms['iti_form'].elements['result_reco'].selectedIndex;
 localisation_from = geosearch.results[index].coords;
 ajout_etapes_itineraire();
 document.getElementById("maybeone").style.display = "none"; 
 document.getElementById("maybetwo").style.display = "none";
 }
 
 /* Due to asynchronous javascript communication, itinerary method is made of several functions */
 function ajout_etapes_itineraire(){
 /* From */
 myiti.addStopOver(localisation_from);
 
 /* To */
 myiti.addStopOver(localisation_entreprise);
 
 var form = document.getElementById("iti_form").elements;
 /* Itinerary type */
 for(var i=0; i<form.itinaryType.length; i++){
 if(form.itinaryType[i].checked){
 myiti.setItineraryType(form.itinaryType[i].value);
 if(form.itinaryType[i].value==5 || form.itinaryType[i].value==6){
 sanscarbu = true;
 }
 }
 }
 if(sanscarbu){
 for(var i=0; i<form.itineraryVehicleType.length; i++){
 if(form.itineraryVehicleType[i].checked){
 myiti.setItineraryVehicleType(form.itineraryVehicleType[i].value);
 }
 }
 if(myiti.itineraryVehicleType==0){
 for(var i=0; i<form.carType.length; i++){
 if(form.carType[i].checked){
 myiti.setCarType(form.carType[i].value);
 }
 }
 }
 for(var i=0; i<form.fuelType.length; i++){
 if(form.fuelType[i].checked){
 myiti.setFuelType(form.fuelType[i].value);
 }
 }
 myiti.setFuelCost(form.fuelCost.value);
 }
 
 /* What method will be called by the itinerary response */
 myiti.addEventHandler("onCallBack", fin_itineraire);
 
 /* Launch the search */
 myiti.search(); 
 }
 
 /* Due to asynchronous javascript communication, itinerary method is made of several functions */
 function fin_itineraire(){
 document.getElementById(mapdiv_id).innerHTML = "";
 
 /* Create a new map - Add the itinerary to the map and text page */
 map = new VMMap(document.getElementById(mapdiv_id));
 map.addLayer(myiti.getItiAsVMComplexLayer(couleur_itineraire,7,0.5));
 map.drawMapFromLayers();
 map.showMapTools();
 var html = myiti.roadSheet.getHTML();
 
 document.getElementById(itidiv_id).innerHTML = html;
 
 if(!sanscarbu){
 document.getElementById("cout_carbu").innerHTML = 
 myiti.getTotalGasConsumption();
 } else {
 document.getElementById("cout_carbu").innerHTML = 0;
 }
 document.getElementById("km").innerHTML = 
 (myiti.getTotalDistance())/1000;
 }
 
 /* Show / Hide textual result to access to the hotel search */
 var itineraire_visible = true;
 function cacher_itineraire(){
 if(itineraire_visible){
 document.getElementById(itidiv_id).style.display="none";
 itineraire_visible = false;
 } else {
 document.getElementById(itidiv_id).style.display="block";
 itineraire_visible = true;
 }
 }
 
 var poiDefinition;
 var myPOIsearch;
 function lance_hotels(){
 poiDefinition = new VMPOIDefinition();
 
 poiDefinition.addEventHandler("onCallBack", recherche_hotels);
 poiDefinition.getHotelsDefiniton();
 }
 
 function recherche_hotels(){
 myPOIsearch = new VMPOISearch(poiDefinition);
 
 myPOIsearch.addEventHandler("onCallBack", reponse_hotels);
 myPOIsearch.searchHotels(localisation_entreprise);
 }
 
 function reponse_hotels(){
 if (myPOIsearch.result.VMPOIs.length > 0){
 myPOIlist = myPOIsearch.result;
 myPOIlistlayer = myPOIlist.getLayer();
 map.addLayer(myPOIlistlayer);
 document.getElementById(poidiv_id).innerHTML = myPOIlist.getHTML();
 } else {
 document.getElementById(poidiv_id).innerHTML = "Aucun h�tel";
 }
 }
 
 /* Show / Hide textual result */
 var hotels_visible = true;
 function cacher_hotels(){
 var poidiv = document.getElementById(poidiv_id);
 if(hotels_visible){
 poidiv.style.display="none";
 hotels_visible = false;
 } else {
 poidiv.style.display="block";
 hotels_visible = true;
 }
 }
 
 function export_function(){
 myexport = new VMExportAsXVM();
 myexport.exportXVM(localisation_entreprise,"export_file");
 }
 
 function meteo(){
 myweather = new VMWeatherSearch();
 myweather.searchCoords = localisation_entreprise;
 
 myweather.addEventHandler("onCallBack", meteo_display);
 myweather.getTodayWeather();
 }
 
 function meteo_ligne_entete(isToday){
 var str = "<tr>"
 + "<th>Date</th>"
 + "<th>Ensoleillement</th>";
 if(!isToday){
 str += "<th>Temp�rature minimale</th>"
 + "<th>Temp�rature maximale</th>";
 } else {
 str+= "<th>Temp�rature mesur�e</th>" 
 + "<th>Vent</th>"
 + "<th>Humidit�</th>"
 + "<th>Visibilit�</th>";
 }
 str+="</tr>";
 return str; 
 }
 
 function meteo_create(meteo_result, isToday){
 var str =
 "<tr>"
 + "<td>" + meteo_result.dayOfReport + "</td>"
 + "<td> <img src='"+meteo_result.image+"' alt='"
 +meteo_result.imageLabel+"'/></td>";
 if (!isToday) {
 str+= "<td>" + meteo_result.temperatureMinInfo+"�C </td>"
 + "<td>" + meteo_result.temperatureMaxInfo+"�C </td>";
 } else {
 str+= "<td>" + meteo_result.temperatureMesured+"�C </td>" 
 + "<td>" + meteo_result.windDirectionInfo +" "
 + meteo_result.windSpeedInfo+"km/h</td>"
 + "<td>" + meteo_result.humidityInfo+"%</td>" 
 + "<td>" + meteo_result.visibilityInfo+"m" + "</td>";
 }
 str+="</tr>";
 return str; 
 }
 
 function meteo_display(){
 var str = "<table style=\"width:600px;\" border=\"1\">"
 + meteo_ligne_entete(true)
 + meteo_create(myweather.result.todayWeather, true)
 + "<caption>Station m�t�o : "
 + myweather.result.weatherStation
 + "</caption>"
 + "</table>"; 
 document.getElementById("yourmeteodiv").innerHTML = str;
 }
 
 function meteo_demain(){
 myweather = new VMWeatherSearch();
 myweather.searchCoords = localisation_entreprise;
 
 myweather.addEventHandler("onCallBack",meteo_demain_display);
 myweather.getForecastWeather();
 }
 
 function meteo_demain_display(){
 var str = "<table style=\"width:500px;\" border=\"1\">"
 + meteo_ligne_entete(false);
 for(var i=0; i<myweather.result.forecasts.length; i++){
 str+= meteo_create(myweather.result.forecasts[i], false);
 }
 str +="<caption>Station m�t�o : "
 + myweather.result.weatherStation
 + "</caption>"
 + "</table>"; 
 document.getElementById("yourmeteodiv").innerHTML = str;
 }
 </script>
 </head>
 
 <!-- Automatic script launch, after the page loading -->
 <body onload="initialise_adresse_et_carte(); load_country();">
 <h1>ViaMichelin - Complete example</h1>
 <p>Case study</p>

 <ul>
 <li>Display a map whose center is the address of a company</li>
 <li>Display company logo on map</li>
 <li>Calculate an itinerary towards the company (removing the ambiguity on the starting point)</li>
 <li>Proximity hotel search</li>
 <li>GPS export of the company geographical coordinates</li>
 <li>Display the weather</li>
 </ul>

 <div id="yourmapdiv" style="width: 500px; height: 500px"></div>
 
 <input type="button" onclick="export_function()"
 value="GPS export" />
 <input type="button" onclick="meteo()"
 value="Weather data display" />
 <input type="button" onclick="meteo_demain()"
 value="Estimated weather data display" />
 
 <div id="yourmeteodiv"></div>
 
 <form id="iti_form">
 <fieldset>
 <legend>
 itinerary to the company
 </legend>
 <table>
 <tr>
 <th><label for="adresse">Address</label></th>
 <td>
 <input type="text" name="adresse" id="adresse" value="carnot" />
 </td>
 <th>
 <label for="cp">Postal Code</label>
 </th>
 <td>
 <input type="text" name="cp" id="cp" value="45400" />
 </td>
 </tr>
 <tr>
 <th><label for="ville">City</label></th>
 <td>
 <input type="text" name="ville" id="ville" value="" />
 </td>
 <th><label for="country">Country</label></th>
 <td colspan="3">
 <div id="div_country"></div>
 </td>
 </tr>
 <tr>
 <th id="maybeone" style="display: none">
 <label for="result_reco">
 Start point
 </label>
 </th>
 <td id="maybetwo" style="display: none" colspan="3">
 <select id="result_reco" name="result_reco"></select>
 <input type="button" onclick="selectionner()" 
 value="Select" />
 </td>
 </tr>
 <tr>
 <th>itinerary type</th>
 <td class="inline" colspan="3">
 
 <input type="radio" name="itinaryType" value="0" 
 checked="checked" id="itinaryType_0" />
 <label for="itinaryType_0">Recommended by Michelin</label>

 <input type="radio" name="itinaryType" value="1" 
 id="itinaryType_1" />
 <label for="itinaryType_1">Shortest</label>

 <input type="radio" name="itinaryType" value="2" 
 id="itinaryType_2" />
 <label for="itinaryType_2">Quickest</label>

 <input type="radio" name="itinaryType" value="3" 
 id="itinaryType_3" />
 <label for="itinaryType_3">Economical</label>

 <input type="radio" name="itinaryType" value="4"
 id="itinaryType_4" />
 <label for="itinaryType_4">Scenic</label>

 <input type="radio" name="itinaryType" value="5"
 id="itinaryType_5" />
 <label for="itinaryType_5">On foot</label>

 <input type="radio" name="itinaryType" value="6" 
 id="itinaryType_6" /> 
 <label for="itinaryType_6">By bike</label>
 </td>
 </tr>
 <tr>
 <th>Vehicle type</th>
 <td class="inline" colspan="3">
 <input type="radio" name="itineraryVehicleType" 
 id="itineraryVehicleType_0" value="0" checked="checked" />
 <label for="itineraryVehicleType_0">Automobile</label>
 
 <input type="radio" name="itineraryVehicleType" value="1"
 id="itineraryVehicleType_1" />
 <label for="itineraryVehicleType_1">Motorcycle</label>
 
 <input type="radio" name="itineraryVehicleType" value="2"
 id="itineraryVehicleType_2" />
 <label for="itineraryVehicleType_2">Caravan</label>
 </td>
 </tr>
 <tr>
 <th>Vehicle category</th>
 <td colspan="3" class="inline">
 <input type="radio" name="carType" value="0" 
 checked="checked" id="carType_0" />
 <label for="carType_0">Hatchback</label>
 
 <input type="radio" name="carType" value="1"
 id="carType_1" />
 <label for="carType_1">Compact</label>
 
 <input type="radio" name="carType" value="2"
 id="carType_2" />
 <label for="carType_2">Family</label>
 
 <input type="radio" name="carType" value="3"
 id="carType_3" />
 <label for="carType_3">Sedan</label>
 
 <input type="radio" name="carType" value="4"
 id="carType_4" />
 <label for="carType_4">Luxury</label>
 </td>
 </tr>
 <tr>
 <th>Fuel type</th>
 <td colspan="3" class="inline">
 <input type="radio" name="fuelType" 
 value="0" checked="checked" id="fuelType_0" />
 <label for="fuelType_0">Petrol</label>
 
 <input type="radio" name="fuelType"
 value="1" id="fuelType_1" />
 <label for="fuelType_1">Diesel</label>
 
 <input type="radio" name="fuelType"
 value="2" id="fuelType_2" />
 <label for="fuelType_2">LPG</label>
 </td>
 </tr>
 <tr>
 <th><label for="fuelCost">Fuel cost</label>
 </th>
 <td colspan="3">
 <input type="text" name="fuelCost" 
 id="fuelCost" value="1.1" />
 </td>
 </tr>
 <tr>
 <th></th>
 <td colspan="3">
 <input type="button" onclick="lance_itineraire();"
 value="Search" />
 <input type="button" id="cacher" onclick="cacher_itineraire();"
 value="Show/Hide the itinerary" />
 </td>
 </tr>
 </table>
 
 <p>Distance : <span id="km"></span> km 
 - Fuel cost <span id="cout_carbu"></span> €
 </p>
 </fieldset>
 </form>
 
 <div id="youritidiv"></div>
 
 <form>
 <fieldset>
 <legend>
 Looking for a hotel next to the company
 </legend>
 <input type="button" onclick="lance_hotels();" 
 value="Search" />
 <input type="button" id="cacher" onclick="cacher_hotels();"
 value="Show/Hide hotels list" /
 </fieldset>
 </form>
 
 <div id="yourpoidiv" style="display: block"></div>
 
 </body>
</html>

Documentation