Exemple complet - Etude de cas

Exemple complet - Etude de cas

  • Afficher une carte dont le centre est l'adresse d'une entreprise
  • Ajouter le logo de l'entreprise sur la carte
  • Permettre à l'utilisateur de calculer un itinéraire vers l'entreprise (avec levée d'ambiguïté sur le point de départ)
  • Permettre à l'utilisateur de trouver un hôtel à proximité
  • Faire un export GPS des coordonnées géographiques de l'entreprise
  • Afficher la météo
Voir l'exemple 
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <title>ViaMichelin Maps & Drive API</title>
        
      <!-- Librairies Via Michelin -->
      <script src="http://api.viamichelin.com/apijs/js/api.js" 
          type="text/javascript"></script>
      
      <script type="text/javascript">
          /* Clef d'enregistrement et langue de l'utilisateur */
          VMAPI.registerKey("JSBS20070201123465789");
          VMAPI.setLanguage("fra");
         
         /* Informations initiales à propos de l'entreprise */
         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';
         
         /* La carte */
         var map;
         var carte_largeur = 500;
         var carte_hauteur = 500;
                  
         /* L'objet qui permet de transformer une adresse en point géolocalisé */
         var geocoder;
         var geosearch;
         var myweather;
         
         /* Les coordonnées calculées de l'entreprise */
         var localisation_entreprise;
         var localisation_from;
         
         /* L'objet qui permet de calculer des itinéraires */
         var myiti;
         var sanscarbu = false;
         var couleur_itineraire = "#00FFFF";
         
         /* L'identifiant des balises div dans lesquelles on affiche les résultats */
         var itidiv_id = "youritidiv";
         var poidiv_id = "yourpoidiv";
         var mapdiv_id = "yourmapdiv";
         
         function initialise_adresse_et_carte(){
            /* Création d'un outil transformant une adresse en point géographique */
             geocoder = new VMGeocoder();
             
             /* Création d'un objet adresse */
             var myaddress = new VMAddress();
             myaddress.address = entreprise_adresse;
             myaddress.zipCode = entreprise_cp;
             myaddress.city = entreprise_ville;
             myaddress.countryVMCode = entreprise_pays;
   
            /* Quelle méthode sera appelée lorsque le géocoder répondra */
             geocoder.addEventHandler("onCallBack", 
                 initialise_carte);
                
             /* Lancement de la recherche */
             geocoder.search(myaddress);
         }
         
         /* Initialisation de la carte */
         function initialise_carte(){
             /* Création de l'objet carte, centrage, on considère que le géocoder ne va pas détecter d'ambüiguité sur l'adresse initiale de l'entreprise */
            map = new VMMap(document.getElementById(mapdiv_id));
            localisation_entreprise = geocoder.result;
            
            /* Redimensionnement de la taille de la carte */
            map.addEventHandler("onCallBack", function(){
                map.resizeTo(carte_largeur, carte_hauteur);
            });
            
            /* Dessin effectif de la carte */
            map.drawMap(localisation_entreprise, 15);
            
            /* Permet d'ajouter les outils cartographiques de navigation */
            map.showMapTools();
   
            var image = new VMIcon(entreprise_logo,-12,-12);
            var coucheImage = new VMIconLayer(
                localisation_entreprise, 
                image, 
                entreprise_logo_texte);
            map.addLayer(coucheImage);
         }
         
         /* L'affichage de la liste des pays */
         function load_country(){
            VMCountryUtil.addEventHandler(
               "onCallBack",
               function(){
                  document.getElementById("div_country").innerHTML = 
                  VMCountryUtil.getSelectHTMLString("country","FRA");
               }
            );
            VMCountryUtil.loadCountryLabels();
         }
         
         function lance_itineraire(){
            myiti = new VMItinerary();
            
            /* Récupération des informations données par l'utilisateur */
            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;
            
            /* Création d'un objet adresse */
             var myaddress = new VMAddress();
                
             /* Alimentation de l'adresse */
             myaddress.address = from_adresse;
             myaddress.zipCode = from_cp;
             myaddress.city = from_ville;
             myaddress.countryVMCode = from_pays;
   
            geosearch = new VMGeoSearch();
   
            /* Quelle méthode sera appelée lorsque le geosearch répondra */
            geosearch.addEventHandler("onCallBack",calcul_from);
            
            /* Lancement de la recherche */
            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";
         }
         
         /* La communication javascript est asynchrone, la fonction d'itinéraire est donc composée de plusieurs fonctions */
         function ajout_etapes_itineraire(){
            /* Provenance */
            myiti.addStopOver(localisation_from);
            
            /* Destination */
            myiti.addStopOver(localisation_entreprise);
            
            var form = document.getElementById("iti_form").elements;
            /* Type d'itinéraire */
            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);
            }
      
            /* Quelle méthode sera appelée lorsque l'itinéraire répondra */
            myiti.addEventHandler("onCallBack", fin_itineraire);
            
            /* Lancement de la recherche */
            myiti.search(); 
         }
         
         /* La communication javascript est asynchrone, la function d'itinéraire est donc composée de plusieurs fonctions */
         function fin_itineraire(){
            document.getElementById(mapdiv_id).innerHTML = "";
            
            /* Création d'une nouvelle carte - Ajout du tracé de l'itinéraire sur la carte et en texte */
            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;
         }
         
         /* Afficher / Cacher le résultat textuel de l'itinéraire pour voir facilement le résultat de la recherche d'hôtels */
         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";
              }
         }
         
         /* Afficher / Cacher le résultat textuel de la recherche d'hôtels */
         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>
   
   <!-- Lancement automatique du script javascript après le chargement de la page -->
   <body onload="initialise_adresse_et_carte(); load_country();">
      <h1>ViaMichelin - Exemple complet</h1>
      <p>Etude de cas</p>

      <ul>
         <li>Afficher une carte dont le centre est l'adresse d'une entreprise</li>
         <li>Ajouter le logo de l'entreprise sur la carte</li>
         <li>Permettre à l'utilisateur de calculer un itinéraire vers l'entreprise (avec levée d'ambiguïté sur le point de départ)</li>
         <li>Permettre à l'utilisateur de trouver un hôtel à proximité</li>
         <li>Faire un export GPS des coordonnées géographiques de l'entreprise</li>
         <li>Afficher la météo</li>
      </ul>

      <div id="yourmapdiv" style="width: 500px; height: 500px"></div>
      
      <input type="button" onclick="export_function()"
         value="Exporter les coordonnées de l'entreprise vers votre GPS" />
      <input type="button" onclick="meteo()"
         value="Afficher les données météo" />
      <input type="button" onclick="meteo_demain()"
         value="Afficher les prévisions météo" />
      
      <div id="yourmeteodiv"></div>
      
      <form id="iti_form">
         <fieldset>
            <legend>
               Recherche d'itinéraire vers l'entreprise
            </legend>
            <table>
               <tr>
                  <th><label for="adresse">Adresse</label></th>
                  <td>
                     <input type="text" name="adresse" id="adresse" value="carnot" />
                  </td>
                  <th>
                     <label for="cp">Code Postal</label>
                  </th>
                  <td>
                     <input type="text" name="cp" id="cp" value="45400" />
                  </td>
               </tr>
               <tr>
                  <th><label for="ville">Ville</label></th>
                  <td>
                     <input type="text" name="ville" id="ville" value="" />
                  </td>
                  <th><label for="country">Pays</label></th>
                  <td colspan="3">
                     <div id="div_country"></div>
                  </td>
               </tr>
               <tr>
                  <th id="maybeone" style="display: none">
                     <label for="result_reco">
                        Selectionner votre point de départ
                     </label>
                  </th>
                  <td id="maybetwo" style="display: none" colspan="3">
                     <select id="result_reco" name="result_reco"></select>
                     <input type="button" onclick="selectionner()" 
                        value="Selectionner" />
                  </td>
               </tr>
               <tr>
                  <th>Type de trajet</th>
                  <td class="inline" colspan="3">
                     
                     <input type="radio" name="itinaryType" value="0" 
                        checked="checked" id="itinaryType_0" />
                     <label for="itinaryType_0">Conseillé</label>

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

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

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

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

                     <input type="radio" name="itinaryType" value="5"
                        id="itinaryType_5" />
                     <label for="itinaryType_5">Piéton</label>

                     <input type="radio" name="itinaryType" value="6" 
                        id="itinaryType_6" />            
                     <label for="itinaryType_6">Vélo</label>
                  </td>
               </tr>
               <tr>
                  <th>Type de véhicule</th>
                  <td class="inline" colspan="3">
                     <input type="radio" name="itineraryVehicleType" 
                        id="itineraryVehicleType_0" value="0" checked="checked" />
                     <label for="itineraryVehicleType_0">Voiture</label>
            
                     <input type="radio" name="itineraryVehicleType" value="1"
                        id="itineraryVehicleType_1" />
                     <label for="itineraryVehicleType_1">Moto</label>
            
                     <input type="radio" name="itineraryVehicleType" value="2"
                        id="itineraryVehicleType_2" />
                     <label for="itineraryVehicleType_2">Caravane</label>
                  </td>
               </tr>
               <tr>
                  <th>Type de voiture</th>
                  <td colspan="3" class="inline">
                     <input type="radio" name="carType" value="0" 
                        checked="checked" id="carType_0" />
                     <label for="carType_0">Citadine</label>
                     
                     <input type="radio" name="carType" value="1"
                        id="carType_1" />
                     <label for="carType_1">Compacte</label>
                     
                     <input type="radio" name="carType" value="2"
                        id="carType_2" />
                     <label for="carType_2">Familiale</label>
                  
                     <input type="radio" name="carType" value="3"
                        id="carType_3" />
                     <label for="carType_3">Routiere</label>
                     
                     <input type="radio" name="carType" value="4"
                        id="carType_4" />
                     <label for="carType_4">Luxe</label>
                  </td>
               </tr>
               <tr>
                  <th>Type de carburant</th>
                  <td colspan="3" class="inline">
                     <input type="radio" name="fuelType" 
                        value="0" checked="checked" id="fuelType_0" />
                     <label for="fuelType_0">Essence</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">GPL</label>
                  </td>
               </tr>
               <tr>
                  <th><label for="fuelCost">Prix du carburant</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="Chercher un itinéraire" />
                     <input type="button" id="cacher" onclick="cacher_itineraire();"
                        value="Afficher/Cacher l'itinéraire" />
                  </td>
               </tr>
            </table>
            
            <p>Distance : <span id="km"></span> km 
               - Coût Carburant <span id="cout_carbu"></span> €
            </p>
         </fieldset>
      </form>
      
      <div id="youritidiv"></div>
      
      <form>
         <fieldset>
            <legend>
               Recherche d'hôtels à proximité de l'entreprise
            </legend>
            <input type="button" onclick="lance_hotels();" 
               value="Chercher un hôtel" />
            <input type="button" id="cacher" onclick="cacher_hotels();"
               value="Afficher/Cacher la liste d'hôtels" /
         </fieldset>
      </form>
      
      <div id="yourpoidiv" style="display: block"></div>
      
   </body>
</html>

Documentation associée