portail-associations/docs/openmaptiles-autonome-premium.md

Cartographie autonome premium avec OpenMapTiles

Ce guide formalise le socle cartographique auto-heberge du portail pour obtenir une carte :

• rapide
• lisible
• premium
• autonome
• exploitable dans le public comme dans l'admin

Architecture retenue

Le portail repose sur trois briques distinctes :

1. OpenMapTiles Server sur le VPS pour servir :
   • le TileJSON
   • les tuiles vectorielles .pbf
   • les glyphes
   • les sprites
   • le style serveur de base OSM OpenMapTiles
2. MapLibre dans le portail pour afficher la carte dans les vues publiques et admin
3. Maputnik pour personnaliser les styles JSON sans casser le serveur de tuiles

Emplacements actuels sur le VPS

• application prod : /home/ubuntu/portail-associations
• application preprod : /home/ubuntu/portail-associations-preprod
• serveur OpenMapTiles : /home/ubuntu/openmaptiles-guyane

Conteneur constate :

• openmaptiles-guyane-tileserver-gl-1

URLs utiles

Style serveur de base

• OSM OpenMapTiles

Sources auto-hebergees

• TileJSON
• glyphes : https://www.portail-association973.com/fonts/{fontstack}/{range}.pbf
• sprites serveur : https://www.portail-association973.com/styles/OSM%20OpenMapTiles/sprite

Styles portail

• OSM Bright CCDS
• OSM Bright CCDS Admin Dense
• OSM Basic auto-heberge = style serveur OpenMapTiles

Contraintes utiles a garder

Pour rester stable en exploitation comme en local :

• le style portail OSM Bright CCDS doit utiliser un sprite absolu
• les glyphs doivent pointer vers https://www.portail-association973.com/fonts/{fontstack}/{range}.pbf
• les piles de polices doivent rester compatibles avec ce que sert vraiment OpenMapTiles

Piles recommandees :

• texte courant carte : Noto Sans Regular
• italique carte : Noto Sans Italic
• compteurs / clusters : Open Sans Bold

Eviter :

• Metropolis *
• Arial Unicode MS Bold
• les piles de plusieurs polices non supportees par le serveur de glyphes

Ordre d'execution recommande

1. verifier le serveur OpenMapTiles
2. verifier ou regnerer les tuiles Guyane
3. activer le style cible dans l'admin
4. ajuster le rendu avec Maputnik
5. verifier la carte publique et la carte admin
6. affiner ensuite l'ambiance premium dans Apparence

1. Verifier le serveur OpenMapTiles

Depuis le poste local :

./scripts/check-openmaptiles-vps.sh

Ce script controle :

• le conteneur Docker
• le style JSON serveur
• le TileJSON
• les glyphes

Healthcheck recommande

Le conteneur tileserver-gl peut rester unhealthy si son healthcheck interne vise encore localhost:8080/health alors que le serveur tourne sur un autre port expose par la stack, par exemple 8091.

Le healthcheck doit donc viser le port effectif :

healthcheck:
  test:
    [
      "CMD-SHELL",
      "node -e \"require('http').get('http://localhost:${TPORT:-8080}/health',res=>process.exit(res.statusCode===200?0:1)).on('error',()=>process.exit(1))\"",
    ]
  interval: 30s
  timeout: 5s
  retries: 5
  start_period: 20s

2. Generer ou reutiliser les tuiles Guyane

Le depot serveur utilise deja le projet OpenMapTiles officiel dans :

/home/ubuntu/openmaptiles-guyane

Relancer le serveur de tuiles

ssh ovh-vps 'cd /home/ubuntu/openmaptiles-guyane && docker compose up -d tileserver-gl'

Ouvrir Maputnik

ssh ovh-vps 'cd /home/ubuntu/openmaptiles-guyane && docker compose up -d maputnik_editor'

Maputnik sera ensuite accessible sur le port expose par le serveur si un proxy ou un tunnel SSH est mis en place.

Regenerer les tuiles

Commande lourde, a lancer seulement si besoin de regenerer la base :

ssh ovh-vps 'cd /home/ubuntu/openmaptiles-guyane && docker compose run --rm generate-vectortiles'

3. Activer un style dans le portail

Dans Administration > Référentiel associations > Carte OpenStreetMap / MapLibre, utiliser l'un des presets :

• OSM Bright auto-heberge : rendu clair premium, lisible pour l'annuaire
• OSM Basic auto-heberge : style serveur brut, plus neutre

4. Personnaliser avec Maputnik

Le flux recommande est :

1. partir du style openmaptiles-positron
2. l'ouvrir dans Maputnik
3. ajuster :
   • couleurs d'eau
   • verts
   • routes
   • contrastes
   • labels
4. reexporter le style.json
5. remplacer le fichier du portail :

client/public/map-styles/openmaptiles-positron/style.json

Le style portail doit toujours pointer vers :

• https://www.portail-association973.com/data/openmaptiles.json
• https://www.portail-association973.com/fonts/{fontstack}/{range}.pbf

Direction visuelle premium retenue

Pour la Guyane, la passe visuelle vise un rendu plus institutionnel et plus territorial :

• fond general plus chaud et plus respirant
• eau plus lisible, avec fleuves et criques mieux marques
• vegetation plus douce, sans saturer la carte
• zones urbanisees legerement rechauffees pour mieux separer le bati du fond
• routes principales plus visibles avec une hierarchie creme / sable / ocre
• labels de communes et repères plus contrastes, avec halos plus propres pour le mobile

Objectif UX :

• lecture immediate des communes et des axes utiles
• rendu plus premium, sans basculer dans une carte decorative
• coherence avec le portail, ses cards et ses panneaux

Variante admin dense

Une variante plus sobre est aussi disponible pour le pilotage :

• labels legerement plus petits
• hierarchie de communes plus resserree
• routes et repères plus discrets
• lecture plus compacte pour les vues admin denses

5. Ambiance premium dans le portail

Le fond immersif et l'opacite doivent rester dans le portail, pas dans le style cartographique lui-meme.

Bonne pratique :

• la carte reste nette et lisible
• les panneaux et cards restent opaques
• l'ambiance premium se gere via Apparence

6. Validation finale

Verifier au minimum :

• carte publique
• annuaire public
• carte admin
• filtres
• popups
• mobile
• desktop

Decision retenue

Le portail garde deux niveaux propres :

• Fond de carte : OpenMapTiles + style MapLibre
• Ambiance premium : Apparence + fond + opacite + habillage du portail

Cela evite de melanger le rendu cartographique metier avec le rendu decoratif global.