Librairies carto Concepts
Dans toutes les librairies du marché, les composants sont proches, et les concepts similaires, mais pas forcément identiques. Dans l’ensemble, on peut dire qu’une carte est :
- un ensemble de couches (layers)
- centrée sur un point et un zoom donnés (view)
- avec des contrôles et des interactions (zoom, pan, etc.)
- le tout créé à partir d’éléments HTML et de JavaScript
Par contre, chaque librairie n’utilise pas les mêmes «technologies» clientes pour la génération de cartes :
- Leaflet est basé sur l’utilisation d’images HTML pour le fond de carte, de SVG pour les objets vectoriels, et de HTML pour les autres composants.
- OpenLayers est basé sur l’utilisation de l’élément canvas HTML (contexte de dessin) en 2D pour le fond de carte et les objets vectoriels, et de HTML pour les autres composants.
- MapLibre est également basé sur l’utilisation de l’élément canvas HTML, mais dans un contexte 3D (WebGL), et donc potentiellement rendu par la carte graphique.
Cela influe notamment sur la performance de rendu, mais surtout sur la gestion des interactions (classiques ou pixels). Pour rappel, les différentes technologies d’affichage dans un navigateur.
Accès aux documentations officielles :
Les coordonnées#
La gestion des coordonnées est différente entre librairies :
- Leaflet utilise la notation latitude / longitude
- OpenLayers et MapLibre utilisent la notation longitude / latitude
Les projections#
Dans chacune des librairies, la projection par défaut est EPSG:3857 (Web Mercator) (également connue comme EPSG:900913, soit GOOGLE en Leet speak). La majeure partie des fonds de cartes connus sont fournis dans cette projection.
Par contre, avec Leaflet ou MapLibre, on ne manipule que des coordonnées en EPSG:4326 (WGS 84), donc latitude/longitude.
Seule OpenLayers permet nativement de manipuler d’autres projections.
Les couches#
La création d’une carte n’implique pas l’ajout de couches. Chaque librairie permet l’ajout de couches raster, vecteurs, basées sur des flux, etc.
Les styles#
Chaque librairie a un rendu par défaut pour les objets vectoriels. Il est bien entendu possible de modifier cela, de manière assez simple. Pour chaque objet, on peut appliquer des styles statiques ou dynamiques (c’est à dire, basé sur les données).
Styles statiques#
Les styles sont plus ou moins basés sur la syntaxe SVG, même si le rendu ne s’effectue pas forcément en SVG. On retrouve alors les mots-clés fill et stroke (ou presque) pour le remplissage et les contours, ainsi que toutes les autres propriétés (taille, opacité, type de jointures, etc.).
Styles dynamiques#
On parle de styles dynamiques lorsque l’on souhaite un style basé sur les métadonnées de l’objet (et donc différent pour un même groupe d’objets). Pour cela, on utilise souvent une fonction qui crée et renvoie un style.
Styles multiples#
Seules lies librairies basées sur un contexte de dessin (OpenLayers, MapLibre) permettent la création de styles multiples.
Les interactions#
Les popups#
Les popups sont les éléments HTML, qui s’ouvrent directement la carte, lors d’interactions avec les objets de la carte.