====== Tuiles vectorielles ======

Le format de tuiles vectorielles [[https://github.com/mapbox/vector-tile-spec|Mapbox Vector Tiles (MVT)]] fourni un stockage pyramidale des tuiles pour représenter des données géographiques (//une carte 🙂//).

Ce format peut être contenues dans les formats d'archive:
  * MBTiles (sqlite)
  * [[https://github.com/protomaps/PMTiles|PMTiles]], an open archive format for pyramids of tile data, accessible via [[https://developer.mozilla.org/en-US/docs/Web/HTTP/Range_requests|HTTP Range Requests]]
  * [[#versatiles|Versatiles]]

Les tuiles doivent correspondre à un schéma pour permettre l'exploitation des données contenues:
  * schéma [[https://shortbread-tiles.org/schema/1.0/|Shortbread]] licence CC0
  * schéma [[https://openmaptiles.org/schema/|OpenMapTiles]] licence CC-BY
  * schéma [[https://docs.protomaps.com/basemaps/layers|Protomaps]] licence CC0
  * [[https://www.mapzen.com/blog/v1-vector-tile-service/|Mapzen]] (MIT)

Une [[https://github.com/mapbox/awesome-vector-tiles|liste d'outils]] autour des tuiles vectorielles (MVT), maintenue par Mapbox. À noter qu'elle ne contient ni pmtiles ni versatiles. 😕

===== Tilemaker =====

[[https://github.com/systemed/tilemaker/|Tilemaker]] permet de générer des tuiles MVT à partir d'un fichier [[https://wiki.openstreetmap.org/wiki/PBF_Format|OSM PBF]] (//donc sans PostgreSQL//) au format MBTiles ou PMTiles et selon le schéma de son choix.

Selon le [[https://openmaptiles.org/schema/|schéma OpenMapTiles]] utiliser les 2 fichiers suivants :
  * pour le config.json: https://github.com/systemed/tilemaker/blob/master/resources/config-openmaptiles.json
  * pour le process.lua: https://github.com/systemed/tilemaker/blob/master/resources/process-openmaptiles.lua

Selon le [[https://shortbread-tiles.org/schema/1.0/|schéma ShortBread]] utiliser les 2 fichiers suivants :
  * pour le config.json: https://github.com/shortbread-tiles/shortbread-tilemaker/blob/main/config.json
  * pour le process.lua: https://github.com/shortbread-tiles/shortbread-tilemaker/blob/main/process.lua

La force de tilemaker est de pouvoir modifier le schéma des tuiles avec 2 fichiers:
  * config.json pour définir la liste des layers (water, places...) et quelques metadonnées
  * process.lua pour affecter les données du fichier source dans les layers

Des [[https://wiki.openstreetmap.org/wiki/Planet.osm|fichiers PBF]] des données OpenStreetMap.

Pour découper les shapefiles SHP des polygones des [[https://osmdata.openstreetmap.de/data/coastlines.html|coastlines]], [[https://osmdata.openstreetmap.de/data/water-polygons.html|water]] et [[https://osmdata.openstreetmap.de/data/land-polygons.html|landcover]] il y a l'outil en ligne [[https://mapshaper.org/|MapShaper]].

==== Benchmark ====

Génération des MBTiles et PMTiles pour la France métropolitaine ([[https://download.geofabrik.de/europe/|geofabrik.de france-latest.osm.pbf]]).

Sur une VM OVH d2-8, soit 8 Go de RAM et 50 Go de disque, il faut utiliser ''tilemaker'' avec l'option ''--store'' car la RAM n'est pas suffisante. Pendant la génération il y aura de nombreux fichiers ''mmap_*.dat'' pour environ 15 Go. Évidement le temps de génération est super long (//~35 minutes contre 3 minutes avec c3-64//). L'intérêt est d'utiliser une VM puissante sur une courte période pour un coût modique. La facturation étant à l'heure et qu'une heure commencée est due il s'agit donc de trouver l'équilibre. 😉

Voir aussi l'option ''--shard-stores''.

Voir [[https://github.com/systemed/tilemaker/pull/618|cette discussion]] sur l'optimisation mémoire et autre réglage.

Fichiers résultats:
  * france-openmaptiles.mbtiles 3.2G
  * [[https://map.comptoir.net/france-openmaptiles.pmtiles|france-openmaptiles.pmtiles]] 2.8G

OVH d2-8 (//nécessite tilemaker --store//):
  * france-openmaptiles.mbtiles 2,099.537 seconds (//~35 minutes//)
  * france-openmaptiles.pmtiles 86.568 seconds

OVH c3-16 (//nécessite tilemaker --store//):
  * france-openmaptiles.mbtiles 516.094 seconds (//~9 minutes//)
  * france-openmaptiles.pmtiles 40.122 seconds
  * france-shortbread.mbtiles 575.294 seconds
  * france-shortbread.pmtiles 37.299 seconds

OVH c3-32:
  * france-openmaptiles.mbtiles 243.836 seconds (//~4 minutes//)
  * france-openmaptiles.pmtiles 24.989 seconds
  * france-shortbread.mbtiles 356.034 seconds (//~6 minutes//)
  * france-shortbread.pmtiles 25.933 seconds

OVH c3-64
  * france-openmaptiles.mbtiles 207.225 seconds (//~4 minutes//)
  * france-openmaptiles.pmtiles 25.102 seconds
  * france-shortbread.mbtiles 327.106 seconds (//~4 minutes//)
  * france-shortbread.pmtiles 23.531 seconds

===== PMTiles CLI =====

https://github.com/protomaps/go-pmtiles

Tilemaker semble avoir un [[https://github.com/systemed/tilemaker/issues/653|problème pour optimiser les indexes]] ce qui induit de plus nombreux et volumineux accès au serveur http.

L'idée est alors d'utiliser ''tilemaker'' pour générer une archive ''mbtiles'' puis de la convertir en ''pmtiles'' avec le client ''pmtiles cli''.

<code bash>
time docker run -it --rm -v $(pwd):/data ghcr.io/systemed/tilemaker:master \
 /data/data/france-latest.osm.pbf \
 --config /data/config-shortbread.json \
 --process /data/process-shortbread.lua \
 --output /data/data/france-openmap.mbtiles

real	8m38,578s
user	0m0,902s
sys	0m1,624s

time pmtiles convert \
 data/france-shortbread.mbtiles \
 data/france-shortbread-mbtile.pmtiles

real	0m11,404s
user	0m6,237s
sys	0m5,210s

</code>

===== versatiles =====

https://versatiles.org/

Propose un autre format d'archive de tuiles vectorielles et le serveur adapté.

  * https://github.com/versatiles-org

===== Planetiler =====

https://github.com/onthegomap/planetiler

Planetiler (pla·nuh·tai·lr, formerly named "Flatmap") is a tool that **generates Vector Tiles** from geographic data sources like OpenStreetMap. Planetiler aims to be fast and memory-efficient so that you can build a map of the world in a few hours on a single machine **without any external tools or database**.

Planetiler packages tiles into an **MBTiles** (sqlite) or **PMTiles** file.

===== Clients Javascript =====

==== Leaflet ====

Avec des plugins

https://leafletjs.com/plugins.html#vector-tiles

=== leaflet-maptilersdk ===

[[https://github.com/maptiler/leaflet-maptilersdk|code]], [[https://docs.maptiler.com/leaflet/|demo]]

On 2024-12-23 the last update is 2024-12-19

367ko : leaflet (57ko+6ko) + maptiler-sdk.umd.js (285ko+15ko) + leaflet-maptilersdk.js (4ko)

=== maplibre-gl-leaflet ===

https://github.com/maplibre/maplibre-gl-leaflet

On 2024-12-23 last update 2024-07-16

transfert (content-encoding= br) 332 Ko: leaflet (57ko+6ko) + maplibre-gl.js unzipped=803Ko (242ko+23) + leaflet-maplibre-gl.js (4ko)

=== Leaflet.MapboxVectorTile ===

https://github.com/SpatialServer/Leaflet.MapboxVectorTile

**last update 2016**-09-30

=== Protomaps-leaflet ===

https://github.com/protomaps/protomaps-leaflet

Protomaps leaflet est beaucoup plus léger (41ko, ungzip 101ko) que les autres MAIS il utilise le schéma de tuiles ''protomaps'' et les styles de rendu sont contenus dans le code.

On peut changer les couleurs avec [[https://github.com/protomaps/basemaps-themes|code]] [[https://protomaps.github.io/basemaps-themes/|demo]].

=== tangram ===

https://github.com/tangrams/tangram

WebGL Maps for Vector Data.
==== MapLibre ====

Librairie Javascript pour le rendu.

870 ko : maplibre (804ko+66ko).

Une [[https://github.com/maplibre/awesome-maplibre|liste d'outils et plugins]] autour de Maplibre.

=== Styles ===

Des [[https://github.com/openmaptiles/fonts/|fonts au format PBF]]. Les styles utilisent généralement la "Noto" mais sont aussi dispo "Metropolis", "Open Sans", "PT Sans" et "Roboto" 

Il faut aussi les "sprites" qui sont des icônes pour des POIs.

Les styles de rendu doivent être adaptés au schéma utilisé pour les tuiles.

Une démo de certains, avec qlqs p'tites modifs pour d'autres : https://map.comptoir.net/map.html#10/47.2234/0.792

Styles pour le schéma OpenMapTiles:
  * [[https://github.com/openmaptiles/maptiler-basic-gl-style|maptiler-basic]]
  * [[https://github.com/openmaptiles/osm-bright-gl-style|osm-bright]]
  * [[https://github.com/openmaptiles/maptiler-terrain-gl-style|maptiler-terrain]]
  * [[https://github.com/openmaptiles/fiord-color-gl-style|fiord-color]]
  * [[https://github.com/openmaptiles/maptiler-toner-gl-style|maptiler-toner]]
  * [[https://github.com/openmaptiles/dark-matter-gl-style|dark-matter]]
  * [[https://github.com/openmaptiles/positron-gl-style|positron]]
  * [[https://github.com/openmaptiles/osm-liberty-gl-style|osm-liberty]]

Styles pour le schéma ShortBread:
  * [[https://github.com/versatiles-org/versatiles-style/releases/tag/v4.4.1|VersaTiles Colorful]]
  * [[https://github.com/versatiles-org/versatiles-style/releases/tag/v4.4.1|VersaTiles Neutrino]]
  * [[https://github.com/versatiles-org/versatiles-style/releases/tag/v4.4.1|VersaTiles Eclipse]]
  * [[https://github.com/versatiles-org/versatiles-style/releases/tag/v4.4.1|VersaTiles Graybeard]]

Styles pour le schéma Protomaps:
  * [[https://github.com/protomaps/basemaps-themes|protomaps/basemaps-themes]] [[https://protomaps.github.io/basemaps-themes/|preview]]

Il y a l'éditeur de styles [[https://github.com/maplibre/maputnik|maputnik]] (//A free and open visual editor for the MapLibre GL styles targeted at developers and map designers//).

===== Essais de rendu - schémas & styles =====

Avec le schéma Shortbread en zoom 9 il y a de grandes zones vides alors que des villages sont connus, au moins pour se repérer dans une région, alors qu'avec le schéma OpenMapTiles ont a quelques villages. Voir ''function calcRank()'' dans ''[[https://github.com/systemed/tilemaker/blob/master/resources/process-openmaptiles.lua|process.lua]]'' pour le schéma OpenMapTiles.

{{:informatique:openstreetmap:style_shortbread_zoom_9.png?400|}} {{:informatique:openstreetmap:style_openmaptiles_zoom_9.png?400|}}

Avec les styles Shortbread & OpenMapTiles en zoom 10 il y a le choix d'un village parmi ceux à proximité, choix qui n'est pas forcément pertinent par rapport aux connaissances locales.

Ici on voudrait voir Descartes:
{{:informatique:openstreetmap:style_manque_descartes_zoom_10.png?300|}}

Avec qlqs instructions de positionnement on obtient les 2 villages: {{:informatique:openstreetmap:style_avec_descartes_zoom_10.png?300|}}

<code javascript>
 "minzoom": 8 /* pour Shortbread colorful */
 "text-justify": "auto",
 "text-variable-anchor": ["center", "top-left", "top-right", "bottom-left", "bottom-right"]
</code>