Open street map et Jquery

Posted on by

Depuis que google map est devenu payant de nombreux site cherche des alternatives tel que Apple (Apple remplace Google Maps par OpenStreetMap…) et fourSquare (FourSquare drops Google Maps API for OpenStreetMap…). Il semble que Open Street Map (OSM) soit une alternative crédible et j’ai donc décidé de l’essayer.

“OpenStreetMapest un projet international fondé en 2004 dans le but de créer une carte libre du monde…” plus d’info sur le site officiel ICI.

Pour test OSM j’ai utilisé un vieux projet (affichage des gares indiennes) dont l’article original est disponible ICI et une API jquery pour OSM : jQueryGeo.

“jQuery Geo is an open-source, geospatial mapping jQuery plugin from Applied Geographics developed with the intention of making spatial web mapping significantly simpler than it may initially seem. We would like to point out the term “open-source” to explictly state that Google, Bing, MapQuest, Yahoo! & Esri are generally free but not open….” plus de détails sur le site officiel ICI.

Le site a 2 buts :

  • il donne des informations sur une location contenue dans ma base de “point de voyage”. Pour cela j’utilise un Jquery autocomplete field avec comme source de donne une fonction qui fait un appel JSON a un page web. Cette page web est écrite en PHP et interroge une base SQlite pour trouver toutes les locations qui match le texte utilisateur.
  • Le second but est de convertir n’importe quelle adresse en un point géographique grâce à l’API google geocode de Google. Ensuite on désire afficher les 30 “point de voyage” les plus proches de l’adresse rentrée par l’utilisateur. Pour cela on calcul une pseudo distance entre les coordonnées de l’adresse et tous les points de notre base de données.

Voilà à quoi ressemble le résultat final que vous pouvez l’essayer ICI.

Les points clés :

La communication AJAX entre l’input field Jquery et son feeder (le service provider) est déjà décrite dans un précédant article disponible ICI et je ne la détail pas une seconde fois.

La communication avec l’API google de geocoding est assez simple. La documentation officielle est disponible ICI mais pour faire simple et rapide…. Il suffit d’inclure la “librairie”

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        ...
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        ...
    </head>
    <body>
    ...

et ensuite on peut utiliser la fonction geocode du geocoder de Google pour feeder notre autocomplete input field (comme pour n’importe quelle fonction classique, Voir la doc sur le site de Jquery ou mon article ICI pour plus de détails sur ce type d’input field)

$('input#address').autocomplete({
    source: function (request, response) {
        geocoder.geocode({
            'address': $('input#address').val()
        }, function (results, status) {
            response($.map(results, function (item) {
                console.log(item);
                return {
                    label: item.formatted_address,
                    value: item
                }
            }));
        });
    },
    ...

Le calcul de la distance entre les coordonnées géographiques (Latitude et Longitude) qui correspondent à l’adresse de l’utilisateur et l’ensemble des “points de voyage” de notre DataBase n’est pas juste. Il s’agit d’une pseudo distance pour être plus rapide dans le temps de réponse.

max(LATITUDE," . $aInput2 . ")-min(LATITUDE," . $aInput2 . ")+max(LONGITUDE," . $aInput3 . ")-min(LONGITUDE," . $aInput3 . ") as distance

L’utilisation de JqueryGeo est très simple. Cette API offre moins de service que celle de Google (les Cluster n’existent pas ce qui est gênant quand on veut afficher beaucoup de points) mais le service répond rapidement ce qui important pour le ressenti utilisateur. Il suffit d’inclure la lib (comme pour le service google).

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        ...
        <script src="//code.jquerygeo.com/jquery.geo-1.0a4.min.js" type="text/javascript"></script>
        ...
    </head>
    <body>
    ...

et ensuite la carte peut être créée avec

$("#map").geomap({
    center: [1, 43],
    zoom: 6});

que l’on va remplir avec les points de voyage en utilisant la méthode suivante

$("#map").geomap("append", {
    type: "Point",
        coordinates: [value.LONGITUDE, value.LATITUDE]
        }, {
            color: "red"
        });

Il existe une bonne documentation sur le site officiel ICI. Le code de mon exemple est un peu différent car je suis en train de changer le type de la carte pour permettre à l’utilisateur de cliquer sur la carte et d’avoir des informations sur les points sélectionnés.

$("#map").geomap({
    center: [1, 43],
    zoom: 6,
    mode: "find",
    cursors: { find: "crosshair" },
    click: function (e, geo){
      var outputHtml = "",
          result = $("#map").geomap("find", geo, 8);

      $.each(result, function () {
        outputHtml += ("Found a " + this.type + " at " + this.coordinates);
      });

      //$(".output ul").html(outputHtml);
      console.log(outputHtml);
    }
});

Je ferais une update de l’article quand j’aurai terminé.