Quand les tiles (MBTiles/PMTiles) sont prêtes et servies par un serveur (TileServer GL, Martin, etc.), la “carte” que voit l’utilisateur est surtout définie par un fichier de style.

Ce style décrit quoi afficher (routes, chemins, POI…), quand l’afficher (niveaux de zoom), et comment l’afficher (couleurs, épaisseurs, labels, icônes).

Cet article explique une méthode complète pour créer, modifier, exporter et déployer un style MapLibre/Mapbox GL, ainsi que gérer fonts, glyphs et sprites.

 

Spécification du style

Le format de style utilisé est celui de Mapbox GL / MapLibre.

• Spécification officielle : https://maplibre.org/maplibre-style-spec/

Le style est un JSON qui contient notamment :

• des sources (vector/raster) : d’où viennent les données

• des layers : comment rendre chaque “couche” (routes, bâtiments, eau…)

• des sprites : icônes (POI)

• des glyphs : polices (labels)

 

Exemples de styles (inspiration)

Voici des styles “références” utiles pour comparer des choix de rendu :

• Maputnik

• Mapbox outdoor

• Mapbox streets

• Maptiler outdoor

• Komoot

• Outdooractive

• Sitytrail

• Openrunner

• Francevelotourisme

• Strava

• Alltrails

• Helloways

• Onthegomap

• Francetop

 

1) Comprendre le rôle du style dans le rendu client

Côté navigateur (MapLibre GL / Mapbox GL), le moteur :

1. télécharge le fichier style.json

2. lit les sources pour savoir où charger les tiles (vector/raster)

3. charge les sprites (icônes) et glyphs (polices)

4. applique les layers du style pour dessiner la carte au bon zoom

Important : les tiles vectorielles contiennent des données, pas le rendu.
Le style est donc l’endroit où tu pilotes :

• densité d’info (quoi/à quel zoom)

• hiérarchie (ordre d’affichage)

• lisibilité (couleurs, halo texte, épaisseurs)

• performance (nombre de layers, filtres, complexité)

 

2) Limitation importante : un style et plusieurs MBTiles

Il n'est pas possible d'avoir un même style pour plusieurs sources mbtiles, il faut alors soit :

• Utiliser un seul mbtiles (le monde)

• Combiner les mbitles si non chevauchement (sinon non prévu pour)

• Déclarer le style en double pour chaque source

Pourquoi ?

Parce qu’un style référence des sources par des identifiants (sources.{name}) et que les serveurs “mbtiles://…” ou endpoints TileJSON sont généralement structurés autour d’un dataset. Si tu changes de dataset (ou si tu en ajoutes plusieurs), tu dois :

• soit tout mettre dans une source unique,

• soit multiplier les sources (quand c’est supporté),

• soit décliner le style par source.

En pratique, la stratégie la plus simple et robuste est souvent : un seul dataset global (ou un dataset principal) et des styles adaptés.

 

3) Pré-requis : fonts, glyphs et sprites

Pour afficher correctement :

• les labels (noms de villes, routes…) → il faut des fonts + glyphs

• les icônes (POI) → il faut des sprites

 

Fonts

Télécharger les fonts :

git clone https://github.com/klokantech/klokantech-gl-fonts

Puis :

Supprimer tous les préfixes KlokanTech des répertoires.

Objectif : avoir des noms de fontstack propres et cohérents avec ceux utilisés par le style (ex: Noto Sans Regular, etc.).

 

Sprites / Glyphs depuis MapTiler

Pour démarrer rapidement, tu peux récupérer des sprites/fonts depuis MapTiler :

• https://cloud.maptiler.com/data/

Ensuite, tu peux :

• choisir un style existant,

• récupérer ses sprites et fonts,

• les héberger sur ton serveur pour être autonome.

 

4) Créer ses propres icônes / sprites

Si tu veux des POI personnalisés (ex: itinérance, points de vue, fontaines, parkings…), tu vas produire tes sprites à partir de SVG.

Référence tags OSM

• Tous les types déclarés dans OSM : Éléments_cartographiques

(Le point clé : tes icônes doivent correspondre à des catégories effectivement présentes dans tes données OSM / tes layers.)

Outil : osm-liberty (Maputnik)

Repo utile pour générer un sprite depuis des SVG :

• https://github.com/maputnik/osm-liberty

Récupérer les sources :

git clone https://github.com/maputnik/osm-liberty cd osm-liberty/ npm install

Trouver des icônes SVG

Sources d’icônes :

• icônes créées par Mapbox : https://labs.mapbox.com/maki-icons/

• https://www.flaticon.com/

• https://www.svgrepo.com/

• https://thenounproject.com/

Contraintes de taille

Créer 2 icônes dans les tailles suivantes :

• 21x21px

• 17x17px

Pourquoi deux tailles ? Parce que les styles utilisent souvent des tailles différentes selon zoom / densité / importance. Et pour la netteté, on gère aussi les sprites “retina”.

 

Générer les sprites (normal + retina)

Installer l’outil :

npm install @beyondtracks/spritezero-cli

Important :

Le répertoire svgs ne doit contenir que les fichiers SVG et aucun autre répertoire (par défaut, déplacer les SVG de svgs_iconset vers le répertoire parent et supprimer les autres répertoires).

Génération :

./node_modules/@beyondtracks/spritezero-cli/bin/spritezero sprites/sprite ./svgs/ ./node_modules/@beyondtracks/spritezero-cli/bin/spritezero --retina sprites/sprite@2x ./svgs/

Compression (conseillée pour perf réseau) :

• Tinypng : https://tinypng.com/

Transfert vers le serveur :

scp -P 7070 -r ./sprites/* lx@51.91.107.191:/home/www/tileserver/sprites

5) Créer / modifier le style avec Maputnik

Maputnik est un éditeur graphique de style Mapbox/MapLibre.

Lancer Maputnik via Docker

mkdir maputnik sudo docker pull maputnik/editor sudo docker run -it --rm -p 8888:8888 maputnik/editor

Alternative : version “dernière” via le repo MapLibre

git clone https://github.com/maplibre/maputnik.git cd maputnik/ npm install

Puis lancer :

npm run start -- --host 0.0.0.0

Démarrer depuis un style existant (recommandé)

Pour accélérer la création, pars d’un style prédéfini :

• https://openmaptiles.org/styles/

Workflow typique :

1. récupérer style.json

2. l’importer dans Maputnik (menu d’ouverture / import)

3. remplacer les sources par tes endpoints à toi

4. ajuster layers, couleurs, icônes, labels

5. exporter le style final

 

Brancher Maputnik à tes données (TileJSON)

Dans Maputnik :

• aller dans “Data source”

• remplacer l’URL par l’URL TileJSON copiée depuis ton serveur TileServer-GL :

http://94.23.51.168:5010/data/tileset.json

Pourquoi TileJSON ?
Parce que Maputnik (et beaucoup d’outils) savent consommer une source via un endpoint qui décrit comment récupérer les tiles.

Ensuite :

• éditer visuellement

• exporter un nouveau style au format .json

 

6) Utiliser un style existant (déjà prêt)

Si tu as déjà un style (ex: export Maputnik “complet”), tu peux :

• Importer le style complet (maputnik.json) dans le menu Open

 

Si besoin, configurer chaque partie :

1) Data sources

Modifier les sources JSON dans Data sources (en indiquant bien l'URL complète) :

#map-planner : /data/world.json #hillshade : /data/hillshade_12.json

2) Style Settings

Utiliser son propre style dans Style Settings (en indiquant bien l'URL complète) :

Sprite URL : /styles/map-planner/sprite Glyphs URL : /fonts/{fontstack}/{range}.pbf

 

Puis recharger la page

 

7) Exporter et adapter le style pour ton serveur

Une fois exporté, le style doit correspondre à ton runtime (serveur + chemins d’assets).

Exemple d’ajustement (sources + sprite + glyphs) :

"sources": { "map-planner": { "type": "vector", "url": "mbtiles://europe.mbtiles" } }, "sprite": "map-planner/sprite", "glyphs": "{fontstack}/{range}.pbf",

 

8) Ajouter un fond de carte raster pour les bas zooms (0 → 6)

Sur les zooms “monde” (0 à 6), afficher toutes les données vectorielles peut être :

• inutile (trop de détails)

• lourd (beaucoup d’objets à dessiner)

• moins lisible

Solution : afficher un fond raster léger (PNG) aux faibles zooms.

Télécharger le style raster voulu :

• https://klokantech.github.io/naturalearthtiles/

Puis :

1. déclarer le MBTiles raster dans TileServer

2. l’ajouter comme Raster TileJSON URL dans Maputnik

Résultat : un rendu “propre” au monde entier (zoom bas), puis bascule progressive vers les layers vectoriels détaillés quand on zoom.

 

9) Outils utiles pour construire un style cohérent

Filtrer / comprendre les objets OSM

Pour savoir quels objets existent dans une zone et quels tags utiliser dans tes filtres de style :

• https://overpass-turbo.eu/

Référence tags OSM

• https://wiki.openstreetmap.org/wiki/Map_features

C’est la base pour relier : données OSM → couches tilemaker/planetiler → layers du style.

 

10) Bonnes pratiques de personnalisation

Quelques règles qui évitent beaucoup de frustration :

• Commencer par un style existant (OpenMapTiles) puis itérer.

• Garder une nomenclature stable entre :

  • noms des sources (map-planner, hillshade, etc.)

  • noms des layers dans les tiles (ceux produits par tilemaker/planetiler)

  • noms de sprites (fichiers SVG → sprite.json)

• Jouer avec minzoom/maxzoom dans les layers : c’est la clé de la lisibilité et de la perf.

• Tester au fur et à mesure :

  • chargement des tiles (source OK ?)

  • glyphs (labels visibles ?)

  • sprites (icônes s’affichent ?)