Utiliser Bing Maps dans une page Web

Pour celles et ceux qui on visité mon curriculum vitæ en ligne, je ne sais pas si vous avez remarqué, mais il y a une petite icône en bas à droite permettant d’afficher une carte interactive pour visualiser où j’habite et éventuellement calculer un itinéraire pour si rendre.

Voir la carte

Alors comment ai-je fait ? J’ai utilisé l’API de Bing Maps, l’API de géolocalisation du navigateur et le Web Service GeoNames.

Voici comment procéder :

Mettre en place la cartographie Bing Maps

Pour cela, il m’a fallu commencer par mettre sur la page le code nécessaire au chargement de la carte :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Carte</title>
    <script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6&amp;mkt=fr-fr"></script>
    <script type="text/javascript" src="carte.js"></script>
  </head>
  <body onload="creerCarte();">
    <!-- Emplacement de la carte -->
    <div id="maCarte" style="position: absolute; width: 70%; height: 95%;">&nbsp;</div>
  </body>
</html>

Puis le code JavaScript pour charger la carte, sachant à l’aide de mon TomTom ma position.

// Initialise les variables
var map = null;
var layer;
var shape;

function creerCarte()
{
  // Créer la carte dans le calque maCarte
  map = new VEMap("maCarte");
  map.LoadMap();

  // Passe la carte en kilomètres
  map.SetScaleBarDistanceUnit(VEDistanceUnit.Kilometers);

  // Créer la couche pour la punaise
  layer = new VEShapeLayer();
  map.AddShapeLayer(layer);

  // Centre la carte sur les coordonnées de ma maison
  map.SetCenterAndZoom(new VELatLong(48.25317, -4.08820), 15);

  // Créer la punaise
  shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());
  shape.SetTitle("Lionel PLAIS");
  shape.SetDescription("9 Rue De La Passerelle<br />29590 Pont-de-Buis-Lès-Quimerc’h<br />France");

  // Place la punaise sur la carte
  layer.AddShape(shape);
}

Voilà, normalement la carte doit se charger sur votre page Web.

Permettre le calcul d’itinéraire

Maintenant que le visiteur sait où j’habite, l’idéal serai qu’il puisse calculer un itinéraire pour se rendre chez moi. Pour cela il me faut d’abord avoir l’adresse du visiteur. J’ai donc ajouté un formulaire d’adresse :

    <div id="mesControles">
      <span class="titre">Calculer un itinéraire&nbsp;:</span><br />
      <!-- Formulaire de saisie de l'adresse -->
      <div>
        <table>
          <tbody>
            <tr>
              <td>
                <label for="rue">
                  Rue&nbsp;:
                </label>
              </td>
              <td>
                <input type="text" id="rue" value="9 Rue De La Passerelle" />
              </td>
            </tr>
            <tr>
              <td>
                <label for="ville">
                  Ville&nbsp;:
                </label>
              </td>
              <td>
                <input type="text" id="ville" value="Pont-de-Buis-Lès-Quimerc’h" />
              </td>
            </tr>
            <tr>
              <td>
                <label for="pays">
                  Pays&nbsp;:
                </label>
              </td>
              <td>
                <input type="text" value="France" />
              </td>
            </tr>
          </tbody>
        </table>
        <button onclick="calculer();">Calculer</button>
      </div>
      <hr />
      <!-- Emplacement d'affichage du parcours à effectuer -->
      <div id="parcours">
        &nbsp;
      </div>
    </div>

Maintenant, le code JavaScript pour calculer le parcours :

// Lance le calcul pour trouver l'itinéraire
function calculer()
{
  try {
    // Récupère l'adresse saisie
    var AdresseDepart = document.getElementById("rue").value + ", " + document.getElementById("ville").value + ", " + document.getElementById("pays").value;

    // Récupère l'arrivé
    var PositionArrivee = new VELatLong(48.25317, -4.08820);

    // Créer les options d'itinéraire
    var options = new VERouteOptions();
    options.DistanceUnit = VERouteDistanceUnit.Kilometer;
    options.RouteCallback = chargerOption;

    // Calcul l'itinéraire
    map.GetDirections([AdresseDepart, PositionArrivee],
      options);
  }
  catch(e) {
    alert(e.message);
  }
}

// Option pour l'itinéraire
function chargerOption(route)
{
  var legs     = route.RouteLegs;
  var turns    = "<span class=\"titre\">Parcours&nbsp;:</span><br />"
    + "<span class=\"TitreParcours\">Distance total&nbsp;: " + route.Distance.toFixed(1) + "&nbsp;km</span><br />";
  var numTurns = 0;
  var leg      = null;

  // Récupérer les points intermédiaires
  for(var i = 0; i < legs.length; i++)
  {
    // Enregistrer ce point pour ne pas avoir à le repasser
    leg = legs[i];

    // Parcourir chaque point intermédiaire.
    var turn = null;
    for(var j = 0; j < leg.Itinerary.Items.length; j ++) {
      turn = leg.Itinerary.Items[j];
      numTurns++;
      turns += "<span class=\"Numero\">" + numTurns + ".</span>&nbsp;" + turn.Text + " <span class=\"Distance\">(" + turn.Distance.toFixed(1) + "&nbsp;km)</span><br />";
    }
  }

  // Affiche le parcours sur la page Web
  document.getElementById("parcours").innerHTML = turns;
}

Récupérer automatiquement l’adresse du visiteur

Maintenant que la saisie d’adresse et le calcul d’itinéraire et codé. Pourquoi ne pas utiliser les fonctionnalités de géolocalisation des navigateurs récents pour détecter où habite mon visiteur. Tous d’abord, j’ajoute un bouton sur ma page Web :

<button onclick="recupererAdresse();">Récupérer votre adresse</button>

Et maintenant j’ajoute le framework jQuery, ainsi qu’un petit script pour corriger les bugs lors des requêtes AJAX avec Internet Explorer.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="xdr.js"></script>

Le code source du script xdr.js et disponible en ligne à l’adresse :
https://github.com/jaubourg/ajaxHooks/blob/master/src/xdr.js
Maintenant, le code pour récupérer la position de mon visiteur, puis son adresse (enfin, juste la ville où il habite 🙂 ).

// Récupère l'adresse du visiteur
function recupererAdresse()
{
  if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(recupererPosition, erreurPositionnement);
  }
  else
  {
    alert("La g\351olocalisation n\'est pas support\351e par votre navigateur.");
  }
}

// Récupère la position du visiteur
function recupererPosition(position)
{
  $.ajax(
  {
    // Paramètre la requête AJAX
    url       : "http://ws.geonames.org/findNearbyPlaceName",
    dataType  : "xml",
    data      :
    {
      lang  : "fr",
      type  : "xml",
      lat   : position.coords.latitude,
      lng   : position.coords.longitude
    },
    success     : function(resultat)
    {
      // Récupère les informations reçu via GeoName.org
      $("#rue").val("");
      $("#ville").val($(resultat).find("name").text());
      $("#pays").val($(resultat).find("countryName").text());
    },
    error       : function(xhr, ajaxOptions, thrownError)
    {
      // Affiche le message d'erreur
      alert("Une erreur c\'est produite :\n" + thrownError + ".");
    }
  });
};

// Affiche un message s'il y a une erreur de positionnement
function erreurPositionnement(erreur)
{
  switch(erreur.code)
  {
    case erreur.PERMISSION_DENIED:
      alert("L\'utilisateur a refus\351 la demande de g\351olocalisation.");
      break;
    case erreur.POSITION_UNAVAILABLE:
      alert("L\'information de localisation est indisponible.");
      break;
    case erreur.TIMEOUT:
      alert("La demande de localisation de l\'utilisateur a expir\351.");
      break;
    case erreur.UNKNOWN_ERROR:
      alert("Une erreur inconnue c\'est produite.");
      break;
  }
}

Voilà, vous avez maintenant toutes les clés en main pour créer une page Web permettant à vos visiteurs de trouver le meilleur itinéraire pour allez de chez eux à chez vous 😉 .

Publicités

~ par ILP sur 23 novembre 2012.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

 
%d blogueurs aiment cette page :