Des souris et des cartes

Accueil > Lab > Simplifions les API cartographiques

4 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>
Télécharger

 

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>
Voir en ligne

- 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>
Télécharger

- 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>
Télécharger
Voir en ligne

- 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>
Télécharger

 

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>
Télécharger

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

Voir en ligne

- 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>
Télécharger

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;
}
Télécharger
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>
Télécharger

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

  • .
    Voir en ligne

    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 ?

    Forum sur abonnement

    Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

    Connexion | s’inscrire | mot de passe oublié ?

    Vos commentaires

    • Le 8 août 2016 à 11:31, par sig_pnv En réponse à : Simplifions les API cartographiques

      Bonjour,
      merci pour cet article très intéressant entre l’api Geoportail et JQuery comme pour les autres (en français en plus). Je travaille actuellement sur une appli carto web avec AngularJs et Leaflet avec des inclusions en JQuery donc cela peut être intéressant. Déjà pas mal de vos articles nous ont aidé pour utiliser l’api geoportail dans nos applis.
      Bonne continuation.
      Christophe

    Lab

    Dans la même rubrique

    Mots-clés

    2009-2017 Géopole
    Plan du site | | Contact | RSS 2.0

    SPIP