GéopoleAccueil > Lab > Simplifions les API cartographiques
Simplifions les API cartographiques
dimanche 8 février 2015, par
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 :
- une API cartographique ne manipule pas seulement le DOM, ce qui limite l’utilisation de jQuery
- 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 :
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 :
dans ce cas, une simple div permettrait d’afficher une carte :
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().
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 :
Avec une punaise bleue centrée sur ces coordonnées :
si on veut en plus préciser une clé API (certains le demande) et afficher plusieurs couches (carte et photo) :
et si on veut que cette punaise soit cliquable et affiche une petit texte, ajoutons le dans la div :
et pourquoi pas se centrer directement sur une adresse ?
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 :
<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 :
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 :
{ visibility: visible;
color: #03f;
background-color: #03f;
opacity: 0.5;
width: 5px;
}
Et pourquoi ne pas ajouter des informations à la main sur la carte, des points cliquable ou un cercle ?
<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 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 ! Voilà, j’espère vous avoir convaincu…Pour terminer
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.
Pour ceux que cela intéresse et qui voudraient aller plus loin, le code est disponible en Open source sur Github.