jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > Géolocaliser Lille

Géolocaliser Lille

dimanche 20 août 2006, par Fil

Le microformat geo sert à indiquer une localisation géographique. On va en faire quelque chose d’utile.


Tout d’abord, un peu de background sur le microformat geo : c’est un petit morceau de HTML dans lequel sont indiquées des coordonnées géographiques (latitude, longitude).

Un tag geo est constitué d’un élement quelconque possédant la classe .geo, et contenant deux éléments de type <abbr />, l’un portant la classe latitude et un title indiquant la valeur numérique de latitude, l’autre portant la classe longitude :

<div class="geo">
<abbr class="latitude" title="37.408183">N 37° 24.491</abbr>
<abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>

Nous allons programmer un script jQuery qui repérera tous les blocs de ce type sur notre page, et les enrichira d’un lien vers une application de cartographie (ici Google Maps).

Après le classique chargement de jquery.js :

<script src="http://jquery.com/src/latest/"
 type="text/javascript"></script>

nous attendons que la page soit prête, et nous lançons alors, sur tous les éléments portant la classe geo, une fonction :

$(document).ready(function() {
 $(".geo").each(function() {
    ...
 });
});

Cette fonction va chercher, à l’intérieur dudit élément, les éléments de type abbr portant la classe latitude et ayant un attribut title.

Ce qui s’exprime sous la forme : $(this).find("abbr.latitude[@title]")

Cela nous renvoie un objet jQuery, dont on prend le premier (et probablement le seul) item avec .get(0), item dont on lit ensuite l’attribut title dans une variable :

var latitude = $(this).find("abbr.latitude[@title]").get(0).title;

Même chose en suite pour la longitude :

var longitude = $(this).find("abbr.longitude[@title]").get(0).title;

Il ne reste alors plus qu’à composer notre URL géographique [1], et à ajouter une image avec le bon lien à la fin du bloc geo

if (latitude && longitude) {
 var url = 'http://maps.google.com/'
  + '?ll='+latitude+','+longitude + '&spn=0.1,0.1';
 $(this).append('<a href="'+url
  +'" target="map"><img src="'
  +'http://www.jquery.info/IMG/jpg/googlemaps.jpg'
  +'" /></a>');
}

Et c’est tout !

P.-S.

Exemple d’emploi de cette technique avec SPIP, sur un site de programmation de concerts : si chaque salle de spectacle est un mot-clé, il suffit de mettre le tag geo dans le descriptif du mot-clé, puis d’afficher ceci avec une boucle pour que les articles correspondants se voient dotés d’un lien cartographique.

On peut même ajouter latitude et longitude dans les « champs extras » pour ne pas avoir à composer soi-même le tag geo.

Documents joints

Notes

[1] La variable &spn=0.1,0,1 indique l’échelle de la carte.

Répondre à cet article

8 Messages de forum

  • Géolocaliser Lille

    21 septembre 2006 11:44, par Fil

    A noter qu’il existe un plugin GoogleMaps pour jQuery : http://www.dyve.net/jquery/?googlemaps

    Répondre à ce message

  • (logo)

    Géolocaliser Lille

    9 octobre 2006 21:41

    Peut être c’est hors sujet, mais y a t il un moyen d’insérer un lien vers une page extérieure dans le texte affiché dans la bulle dans la carte ?

    Répondre à ce message

  • (logo)

    Géolocaliser Lille

    7 février 2007 23:45, par francis

    Comment faites vous pour obtenir facilement les valeurs TITLE ?
    D’avance merci

    Répondre à ce message

    • Géolocaliser Lille 7 février 2007 23:49, par Fil

      ici on a fait
      $(xxx).get(0).title;

      mais tu peux faire plus court (à partir de jQuery 1.1) :
      $(xxx).attr('title');

      Répondre à ce message

      • (logo)
        Géolocaliser Lille 11 février 2007 11:38, par Francis

        Oui je suis d’accord pour cela mais je parle de la conversion de N 37° 24.491 en 37.408183 car autant les coordonnées de type 37°xxx sont affichées un peu partout et récupérable pour faire un geotag (partie affichable) mais l’autre partie non...

        A la limite ce qui serait top serait une fonction remplissant directement $(this).find("abbr.latitude[@title]").get(0).title ; non pas avec title mais avec la valeur title convertie depuis N 37° 24.491.

        L’idée serait ainsi de ne se soucier que des valeurs affichées et pas de celle invisibles qui serait elle prise en compte directement par jquery. Mon niveau javascript ne me permet malheureusement pas d’en arriver là.

        D’après ce que je comprend il faudrait faire un truc html du genre quand je créée ma page je met dedans : « abbr class="latitude" title="[variable js]" »N 37° 24.491« /abbr » et au chargement de la page une fonction qui ferait une conversion de N 37° 24.491 en numérique puis ferait un document.write dans title pour remplacer [variable js] et que tous cela ne nuise pas en plus au fonctionnement de $(this).find("abbr.latitude[@title]")

        Répondre à ce message

        • (logo)
          Géolocaliser Lille 29 novembre 2007 18:45, par Olivier Mengué

          L’intérêt des microformats, c’est que des programmes puissent les utiliser pour faire de l’indexation. Il est donc important que la valeur de l’attribut title soit écrite dans le HTML fourni par le serveur et non pas généré sur le client par JavaScript.

          Répondre à ce message

  • (logo)

    Géolocaliser Lille

    21 décembre 2009 01:17, par Loïc

    Salut

    je possède un site web (www.fearide.com)
    basé sur WordPress, je crée des articles tout au long de mon voyage
    Pour le moment, je géolocalise mes articles manuellement sur une carte googleMap, en plaçant un repère sur cette carte, en y ajoutant le lien de mon article. La carte est insérée ensuite sur la page d’accueil du site.

    Je viens de découvrir une extension wordpress qui me permettrait de géolocaliser automatiquement mes articles avec cette petite info GEO dont tu parles ( l’extension s’appelle GeoMark)

    J’aimerai avoir une carte différente, qui reprend tous mes articles, géolocalisés... automatiquement !
    Où puis-je trouver ce qui pourrait traiter l’info "geolocalisation des articles", les replacer sur une carte, et faisant le même travail que ma carte google map, mais automatiquement ?

    Merci d’avance !

    Loïc

    Voir en ligne : Patagaska, de la patagonie à l’Alaska

    Répondre à ce message


Derniers commentaires