Modifier nos styles maison

Emplacements des fichiers

Nos styles maison Standard, Sombre, Transports, CoMaps, Plein air sont :

• tous gérés dans le fichier base.ts.
  • Ils affichent les même couches de style, et dans le même ordre (jusqu'à preuve du contraire) mais avec des tailles ou couleurs différentes.
  • résultat, ce fichier peut être un peu compliqué à comprendre, mais c'est beaucoup plus facile à maintenir comme ça en 1 fichier plutôt que de gérer 5 fichiers séparés.
• avec des appels à roadLayers.ts pour tout ce qui concerne les routes
• et à terrainLayers pour les lignes de niveaux et les ombrages
• et à cycleHighwayLayers pour le rendu des pistes cyclables (à vérifier?)

Langage

Le langage utilisé dans ces feuilles de style est décrit dans les MapLibre Style Spec. Regarder en particulier les rubriques :

• Layers pour voir toutes les propriétés disponibles dans les différents types de couches
• Expressions pour écrire des filtres ou gérer des rendus différentiels

Modifications en WYSIWYG dans maputnik

Pour tester des modifications de notre style maison (sans avoir besoin de lancer une instance de dev), il est possible de le charger dans maputnik :

• ouvrir maputnik
• dans Open / Load from URL, indiquer : https://cartes.app/api/styles?key=base ou key=outdoors etc

Le rendu n'est pas parfaitement identique, puisqu'il va manquer les icônes, mais on peut a priori tester les modifications de tout le reste.

TODO

• il reste des syntaxes dépréciées dans nos styles (héritage du style utilisé comme point de départ) qu'il faudrait mettre à jour.

Ajouter un nouveau fond dans cartes.app

Emplacements utiles

• Les fonds de cartes sont listés dans /app/style/style.ts
• Le menu des fonds de cartes est géré par /app/styles/StyleChooser.tsx
• Les styles en eux même sont stockés dans /app/styles

Ajout du fond dans style.ts

• la clé des items dans la liste est utilisée comme key pour identifier le style,
  • le fichier image à utiliser pour l'illustration soit s'appeler {key}.png
  • la key doit être rajoutée dans la variable homeMadeTerrainStyles si on veut que le mode terrain soit disponible,
  • la key doit être rajoutée dans la variable homeMadeClickableStyles si on veut que les icones soient ajoutées et soient cliquables.
• le nom lisible est à indiquer en label
• en cas de group, le premier s'affiche dans le menu, puis les suivants s'affichent une fois le premier sélectionné ;
• les secondary n'apparaissent qu'en dépliant la 2e liste. Les unlisted n'apparaissent jamais (mais sont accessible par l'url)

En cas d'ajout d'un style externe, il peut y avoir des restrictions d'accès à un site par un autre qui obligent à recopier tout le fichier de style.

Génération des tuiles maison

Principe

Nos tuiles maison sont générées par tilemaker grâce au script lua et au fichier json de config dans /tilemaker/resources sur le repo serveur. Puis le mbtiles résultant est transformé en pmtiles grâce à (go-)pmtiles. (la commande tilemaker pour générer directement un pmtiles a des défauts, il vaut mieux le faire en 2 étapes).

Sur le serveur, les tuiles planètes sont calculées chaque samedi soir, pour profiter de l'extrait OSM hebdomadaire planet.osm.pbf qui vient d'être publié le samedi matin (à noter, il a commencé à être calculé le lundi, donc a déjà 4j "de retard", et aura 10j de retard le vendredi suivant)

Les tuiles (brutes) sont visibles sur pmtiles.io

Installations préalables

• installer tilemaker
• installer pmtiles

Modifier tilemaker

En cas de modifications dans le code source de tilemaker, il est nécessaire de le recompiler avec un clean préalable, soit :

make clean
make
sudo make install

Si les modifs donnent lieu à une PR sur le repo tilemaker, il est nécessaire une fois la PR fusionnée de mettre à jour le soft sur le serveur serveur.cartes.app. Pour cela : s'y connecter en ssh, se placer dans ~/tilemaker/, tirer les dernières modifications de la branche master avec git pull puis recompiler avec les 3 commandes ci-dessus.

Modifier le script Lua de génération des tuiles

Les 2 scripts lua et json de config sont dans /tilemaker/resources sur le repo serveur.

Les docs de tilemaker (notamment CONFIGURATION et RELATIONS) sont très utiles pour comprendre les fonctions Lua disponibles et leur utilisation.

Calculer des tuiles en local sur un extrait OSM

Commencer par télécharger un extrait .osm.pbf chez geofabrik : un département (30s de calcul) ou une (ancienne) région (2 min) est largement suffisant pour des tests en local.

Ensuite, calculer les tuiles avec la commande qui permet de préciser le chemin vers ces 2 fichiers, et les fichiers d'input et d'output (commande à vérifier, j'ai un petit doute) :

tilemaker --input /path/to/your/area.osm.pbf \
          --output /path/to/your/area.mbtiles \
          --config /path/to/cartes/serveur/tilemaker/resources/config-openmaptiles.json \
          --process  /path/to/cartes/serveur/tilemaker/resources/process-openmaptiles.lua

puis transformer le mbtiles en pmtiles (idem, à vérifier) : ./pmtiles convert /path/to/your/area.mbtiles /path/to/your/area.pmtiles

Vérifier le contenu sur pmtiles.io

Pour regarder la contenu (brut mais complet) du pmtiles généré, ouvrir pmtiles.io et le glisser dedans. Et comparer aux tuiles planète sur le serveur.

Tester dans l'app

Pour tester en dev le pmtiles généré il faut le copier dans /cartes/web/app/styles/ et modifier la ligne suivante en indiquant le bon nom de fichier : https://codeberg.org/cartes/web/src/commit/99dd2088e17e459383321b14cbdaedcdf5dc0e70/app/styles/base.ts#L40

Ne pas oublier de recommenter la ligne avant de commiter !

Génération des tuiles couvrant la planète sur le serveur scaleway