← Retour aux issues

Contribuer aux tuiles et fonds de cartes / Contributing on tiles and map style

publié le , mis à jour
Avatar Codeberg de etienneJretienneJr

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

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

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

Lorsqu'une PR a été fusionnée sur cartes/serveur, il est nécessaire de tirer les modifications sur le serveur, car le script de calcul des tuiles sur une machine dédiée va chercher les scripts sur le serveur. Pour cela : s'y connecter en ssh, se placer dans ~/serveur/, et tirer les dernières modifications de la branche master avec git pull.

(paragraphe à compléter avec les infos sur le calcul hebdo)

  1. Avatar Codeberg de etienneJretienneJr

    Je note ici l'ordre des couches dans la feuille de style maplibre, histoire de vérifier qu'il n'y a pas de bugs

    background

    landcover / landcover

    maxzoom 10 avec disparition progressive de 9 à 10

    • Grass-Bare-Snow
    • Bare-Snow
    • Snow
    • Crops
    • Tree

    OMT / landuse

    minzoom 5

    • residential (minzoom 4 dans les tuiles)

    minzoom 11 dans les tuiles

    • industrial
    • retail
    • school
    • hospital

    OMT / aeroway

    • airport zone

    OMT / landcover

    • (farmland : minzoom 6 dans les tuiles, mais pas de layer)

    minzoom 9

    • Wood (8 dans les tuiles)
    • Wood symbols
    • Glacier
    • Grass

    OMT / park ?

    • park = les aires protégées (de zoom 6 à zoom 12)

    OMT / water

    • water for oceans (minzoom 6 dans les tuiles)

    bathymetry/bathymetry

    • water-depth (from bathymetry)

    OMT / landcover

    • rock
    • rock texture (seulement pour plein air et osm)
    • wetland (minzoom 9)
    • beach
    • Sand

    OMT / water

    • water, other than oceans (minzoom 6 in tiles)

    OMT / transportation

    • Pedestrian polygons
    • Pedestrian ways

    OMT / boundary

    • low_emission_zone
    • limited_traffic_zone

    OMT / landuse

    • Cemetery
    • Stadium
    • Trees
    • Tree rows

    (background Neige pour rendre blanc le style ski)

    OMT / mountain

    • Cliff and Ridge Line
    • Cliff Symbols
    • Arete Symbols

    OMT / waterway

    • River tunnel
    • River

    OMT / water

    • Water intermittent

    OMT / aeroway

    • Aeroway
    • Heliport

    OMT / transportation

    • Ferry line
    • Tunnel hatching
    • Tunnel
    • Railway tunnel
    • Railway tunnel hatching
    • Footway tunnel outline
    • Footway tunnel
    • Pier
    • Pier road

    roadLayers : toutes les routes

    cycleHighwayLayers : tous les Réseaux Express Vélo

    OMT / building

    • Building (zoom 15 à 16
    • Building 3D (minzoom 16)

    OMT / waterway

    • Aqueduct outline
    • Aqueduct

    OMT / transportation

    • Cablecar
    • Cablecar dash

    OMT / boundary

    • Other border
    • Disputed border
    • Country border

    routeLayers (itinéraires balisés, style plein air)

    tous les labels de route

    et qq autres trucs mélangés

    OMT / mountain

    • stone

    OMT / poi

    • parking (à vérifier)
    • Car utilities
    • Other POI

    OMT / park

    • Protected area labels

    d'autres labels

    OMT / poi

    • Station
    • Airport
    • Airport gate

    OMT / place

    • State labels
    • Town labels
    • City labels
    • Capital coty labels
    • Country labels
    • Continent labels

    routeLabelLayers (tous les labels des itinéraires balisés)

  2. Avatar Codeberg de jochemlajochemla

    Je voulais juste passer une tête pour mentionner le style outdoor créé par vcoppe de gpx.studio disponible en open-source sur gpxstudio/styles.

    Le détail sur la production du style est décrit dans ce commentaire, grâce à des contours et hillshading sur un terrain DTM Mapterhorn, en portant un ancien style OSM Liberty pour OpenFreeMap Liberty vecteur et satellite.

    Il pourrait d'ailleurs éventuellement être intéressant de le voir ajouté aux couches à Cartes.app!

  3. Avatar Codeberg de etienneJretienneJr

    @jochemla wrote in https://codeberg.org/cartes/web/issues/1183#issuecomment-16556039:

    Il pourrait d'ailleurs éventuellement être intéressant de le voir ajouté aux couches à Cartes.app!

    merci pour l'info, mais euh... tu n'aimes pas notre style plein air ? Il a été construit avec le groupe plein air d'osm-fr, j'y ai passé beaucoup de temps et (sans avoir regardé précisément) je soupçonne que le notre est plus complet car on a rajouté plein d'éléments dans nos tuiles qui manquaient dans le schéma OpenMapTiles. Cela dit, il reste encore un peu de boulot, tu peux regarder ces tickets et participer aux discussions.

    Dans tous les cas, on ne veut pas perdre l'utilisateur dans trop de choix possibles, donc on ne proposera qu'1 seul style outdoor.

  4. Avatar Codeberg de jochemlajochemla

    Si à y regarder plus précisément à plusieurs échelles, c'est vrai que le style outdoor développé/présenté sur cartes.app est vraiment propre - surtout dans sa version dark, qui présente assez rarement autant de détails. Les styles additionnels (secondaires, IGN etc) sont aussi plutôt pratiques à comparer. J'ai vu sur un autre ticket que vous aviez aussi la volonté de les exposer en style.json plutôt que purement dans le code, ce sera aussi pratique pour les intégrer par exemple sur d'autres apps de carto, android etc. Et entendu pour le fait que les styles customs ajoutés par l'utilisateur lui-même ne sont pas le focus de cette application et risqueraient de perdre l'utilisateur (assez drôle les cartes du Onde ou de la ecnarF)

  5. Avatar Codeberg de etienneJretienneJr

    @jochemla wrote in https://codeberg.org/cartes/web/issues/1183#issuecomment-17616140:

    Si à y regarder plus précisément à plusieurs échelles, c'est vrai que le style outdoor développé/présenté sur cartes.app est vraiment propre

    merci !

    surtout dans sa version dark

    euh, le style sombre est une version du style de base, il n'intègre pas les spécificités du style outdoors.

    J'ai vu sur un autre ticket que vous aviez aussi la volonté de les exposer en style.json plutôt que purement dans le code, ce sera aussi pratique pour les intégrer par exemple sur d'autres apps de carto, android etc.

    Ils sont déjà exposés via une api, ce qui permet de les modifier dans maputnik (c'est expliqué plus haut), mais :

    • il manque les icones, qui sont gérés via l'ajout des svg et non classiquement via 1 fichier png
    • nos tuiles ont beaucoup dévié du schéma OpenMapTiles d'origine (pour pouvoir ajouter plein de nouvelles choses) si bien que notre style est devenu spécifique de nos tuiles, je crains qu'il ne soit pas utilisable tel quel sur un autre fichier de tuiles.

✏️ Participer à la discussion