Des souris et des cartes

Accueil > Lab > Simplifions les API cartographiques

5 votes

Simplifions les API cartographiques

dimanche 8 février 2015, par Spip

Une des reproches faite aux outils de cartographie web est leur difficulté de prise en main. Alors que la carte est de plus en plus accessible, son utilisation et l’intégration dans une page web reste le domaine de spécialistes et des programmeurs.
Ne pourrait-on pas simplifier tout cela ?

Comme nous l’avons vu, intégrer une carte sur un site internet avec une des grandes API disponible n’est pas très compliqué et il suffit juste de quelques lignes de JavaScript. Cela reste cependant encore trop complexe pour certains. Il faut dire que, bien qu’Open source pour la plupart, l’étendue des fonctionnalités et le manque de documentation y sont pour quelque chose. Certaines s’en sortent mieux que d’autres en limitant le nombre de fonctionnalité (Leaflet), en repartant de zéro (OL3) ou en misant sur le poids d’un gros de l’informatique (Google).

Ne pourrait-on pas faire plus simple ?

Parmi les bibliothèques JavaScript, une est réputée pour avoir grandement simplifié le codage en JS : jQuery. On pourrait ainsi envisager un truc du genre : $("#mymap").map(); qui afficherait une carte dans la div "map".
Si l’idée semble séduisante, cela soulève deux questions :

  1. une API cartographique ne manipule pas seulement le DOM, ce qui limite l’utilisation de jQuery
  2. les possibilité d’affichage d’une carte sont nombreuses et on va très vite avoir une palanquée de fonctions du type $("#mymap").center(lon,lat); ou des paramétrages à rallonge,

Simplifions encore…

En fait, afficher une carte devrait être aussi simple qu’afficher une image sur un site (au moins pour le grand public) et on pourrait imaginer cela :

<map id="mymap">

Malheureusement HTML5 n’intègre pas de balise map. En fait pour être honnête, il y en a bien une mais pas comme on voudrait…

Il y a cependant d’autres possibilité et on pourrait envisager un plugin jQuery qui fasse le boulot, ie. afficher une carte dans une div tout seul. Il suffirait pour cela qu’il se lance au chargement de la page via :

$(document).ready (function() { $(".geoportalMap").map(); });

dans ce cas, une simple div permettrait d’afficher une carte :

<div id="mymap" class="geoportalMap">

Reste qu’on est loin de la richesse d’une API et qu’il nous faudrait ajouter quelques paramètres pour personnaliser la carte. Pour le coup, c’est HTML5 qui nous sauve en proposant d’intégrer librement des attributs débutant par data- aux éléments du DOM. La page sera valide aux yeux du navigateur, en ayant pris la précaution d’utiliser le doctype HTML5 : <!DOCTYPE html>.
Cerise sur le gâteau, jQuery peut nous aider, au travers de la data api, à accéder facilement aux attributs déclarés dans le code HTML en utilisant la fonction data().

<div id="mymap" class="geoportalMap" data-zoom="17"></div>
<script>
    console.log ($("#mymap").data("zoom"));
    //> 17
</script>

 

Voyons ce que cela donne

- Afficher une carte centrée sur un lieu donnée (lon:48.845, lat:2.424, et zoom:15) pourrait s’écrire :

<div class="geoportalMap" data-coord="48.845,2.424,15" ></div>

- Avec une punaise bleue centrée sur ces coordonnées :

<div class="geoportalMap" data-coord="48.845,2.424,15" data-pin="blue"></div>

- si on veut en plus préciser une clé API (certains le demande) et afficher plusieurs couches (carte et photo) :

<div class="geoportalMap"
   data-apikey="MA_CLE"
   data-coord="48.845,2.424,15"
   data-pin="blue"
   data-layer="MAP|PHOTO">
</div>

- et si on veut que cette punaise soit cliquable et affiche une petit texte, ajoutons le dans la div :

<div class="geoportalMap"
   data-apikey="MA_CLE"
   data-coord="48.845,2.424,15"
   data-pin="blue"
   data-layer="MAP|PHOTO">
    Coucou !
</div>

- et pourquoi pas se centrer directement sur une adresse ?

<div class="geoportalMap"
   data-apikey="MA_CLE"
   data-address="2 av Pasteur, saint-Mandé, france"
   data-pin="blue">
    C'est ici !
</div>

 

Continuons encore un peu

Cela ne va cependant pas nous permettre d’atteindre le rendu d’une "vrai" carte web et on pourrait s’attendre à mieux d’une API. Si on veut aller plus loin dans la personnalisation de la carte, afficher des couches avec des opacités différentes ou plus d’une punaise, la balise div seule ne suffira plus. Qu’à cela ne tienne, ajoutons en d’autres.

- Ainsi, pour intégrer une liste de couches (layer) dans la carte, on pourrait écrire :

<div class="geoportalMap" data-coord="48.845,2.424,15" >
    <ul class="geoportalContainer">
        <!-- Mes couches de base -->
        <li class="geoportalLayer"data-layer="PHOTO"></li>
        <li class="geoportalLayer" data-layer="OSM" ></li>
        <!-- Mes couches en superposition -->
        <li class="geoportalOverlay" data-layer="PARCELS" ></li>
        <li class="geoportalOverlay"
           data-layer="ROADS"
           style="visibility:visible; opacity:0.6"></li>
    </ul>
</div>

On utilise ici la balise de style pour coder la visibilité de la couche ou son opacité.

- et pour ajouter un fichier KML avec des lignes de 3 pixels de couleur vertes, nous ajouterons un simple lien sur ce fichier :

<div class="geoportalMap" data-coord="48.845,2.424,15">
    <!-- Mes Layers -->
    <ul class="geoportalContainer">
        <li>
            <a title="KML" class="geoportalFile"
               href="data/stationnement.kml"
               data-popup="true"
               style="opacity:0.6; color:green; width:3px;"></a>
        </li>
    </ul>
</div>

On remarquera qu’en reportant le style dans un balise classique on peut ainsi utiliser la personnalisation via le css, ce qui peut être pratique pour personnaliser les cartes sur son site :

.geoportalMap .geoportalFile
{   visibility: visible;
    color: #03f;
    background-color: #03f;
    opacity: 0.5;
    width: 5px;
}
Voir en ligne (KML)(GPX)(GeoJSON)

- Et pourquoi ne pas ajouter des informations à la main sur la carte, des points cliquable ou un cercle ?

<div class="geoportalMap" data-coord="48.845,2.424,15">
    <ul class="geoportalContainer">
        <!-- Mes formes -->
        <li class="geoportalCircle" data-coord="48.84475,2.4237,50" >
            Je suis un cercle...
        </li>
        <!-- Une punaise -->
        <li class="geoportalPin"
           data-coord="48.84475,2.4237"
           data-center="true"
           style="background-image:url(punaise.gif);">
                <a href='http://fr.wikipedia.org/wiki/Principe_KISS'>
                      KISS !
                </a>
                <br />C'est facile !
        </li>
    </ul>
</div>

Le contenu du popup à afficher lors d’un clic est intégré directement dans la balise

  • .

    Pour terminer

    De cette manière, il est possible d’afficher une carte sans une ligne de Javascript, juste avec un peut de HTML ! Aussi simple qu’afficher une image !
    Les grincheux me diront qu’il manque encore des fonctionnalités, qu’a cela ne tienne, il suffit de récupérer la carte contenu dans la div grâce à jQuery : $("#mymap").data("map"); et le tour est joué, on a accès aux différentes fonctionnalité de l’API d’origine… et pour une intégration complète $("#mymap").mapReady(function (map){...}); permet d’être prévenu lorsque la carte est prête.

    Voilà, j’espère vous avoir convaincu…
    Pour ceux que cela intéresse et qui voudraient aller plus loin, le code est disponible en Open source sur Github.

  • Un message, un commentaire ?

    Site en travaux

    Site en travaux

    Attention : un problème technique (serveur SQL) empêche l’accès à cette partie du site. Merci de votre compréhension.