Héberger ses propres tuiles vectorielles OpenStreetMap avec Docker et Traefik

Navigateur (MapLibre GL JS)
        │  HTTPS
        ▼
Traefik  ── certificat Let's Encrypt, en-têtes de cache, CORS
        │  réseau Docker interne
        ▼
Martin   ── tuiles (PMTiles), polices (glyphes), style
        │
        ▼
Fichier france.pmtiles, généré par Planetiler

mkdir -p data
docker run --rm \
  -e JAVA_TOOL_OPTIONS="-Xmx2g" \
  -v "$(pwd)/data":/data \
  ghcr.io/onthegomap/planetiler:latest \
  --download --area=monaco --output=/data/monaco.pmtiles

docker run --rm \
  -e JAVA_TOOL_OPTIONS="-Xmx8g" \
  -v "$(pwd)/data":/data \
  ghcr.io/onthegomap/planetiler:latest \
  --download --area=france --output=/data/france.pmtiles --force

# martin/config.yaml
listen_addresses: 0.0.0.0:3000

# Seule l'application a le droit d'appeler le serveur depuis un navigateur.
cors:
  origin:
    - https://app.example.org
  max_age: 3600

pmtiles:
  sources:
    france: /data/france.pmtiles

fonts:
  paths:
    - /fonts

styles:
  sources:
    base: /styles/base.json

{
  "version": 8,
  "name": "Base",
  "glyphs": "https://tiles.example.org/font/{fontstack}/{range}",
  "sources": {
    "openmaptiles": {
      "type": "vector",
      "url": "https://tiles.example.org/france",
      "attribution": "© OpenMapTiles © Contributeurs OpenStreetMap"
    }
  },
  "layers": [
    { "id": "background", "type": "background",
      "paint": { "background-color": "#f4f1ea" } },
    { "id": "water", "type": "fill", "source": "openmaptiles", "source-layer": "water",
      "paint": { "fill-color": "#a8c8e8" } },
    { "id": "park", "type": "fill", "source": "openmaptiles", "source-layer": "park",
      "paint": { "fill-color": "#d5e8c4" } },
    { "id": "building", "type": "fill", "source": "openmaptiles", "source-layer": "building",
      "minzoom": 14, "paint": { "fill-color": "#e0dbd2" } },
    { "id": "roads", "type": "line", "source": "openmaptiles", "source-layer": "transportation",
      "paint": {
        "line-color": "#ffffff",
        "line-width": ["interpolate", ["linear"], ["zoom"], 8, 0.5, 16, 6]
      } },
    { "id": "places", "type": "symbol", "source": "openmaptiles", "source-layer": "place",
      "layout": {
        "text-field": ["coalesce", ["get", "name:fr"], ["get", "name"]],
        "text-font": ["Noto Sans Regular"],
        "text-size": 13
      },
      "paint": { "text-color": "#333333", "text-halo-color": "#ffffff", "text-halo-width": 1.5 } }
  ]
}

# docker-compose.yml
services:
  traefik:
    image: traefik:${TRAEFIK_VERSION}
    command:
      - --providers.docker=true
      - --providers.docker.exposedbydefault=false
      - --entrypoints.web.address=:80
      - --entrypoints.websecure.address=:443
      - --entrypoints.web.http.redirections.entrypoint.to=websecure
      - --entrypoints.web.http.redirections.entrypoint.scheme=https
      - --certificatesresolvers.le.acme.tlschallenge=true
      - --certificatesresolvers.le.acme.email=${ACME_EMAIL}
      - --certificatesresolvers.le.acme.storage=/letsencrypt/acme.json
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - ./letsencrypt:/letsencrypt
    restart: unless-stopped

  martin:
    image: ghcr.io/maplibre/martin:${MARTIN_VERSION}
    command: ["--config", "/config/config.yaml"]
    volumes:
      - ./martin:/config:ro
      - ./data:/data:ro
      - ./fonts:/fonts:ro
      - ./styles:/styles:ro
    labels:
      - traefik.enable=true
      - traefik.http.services.tiles.loadbalancer.server.port=3000

      # Les tuiles : changent une fois par mois, gardées un jour, resservies une semaine
      # pendant leur revalidation.
      - traefik.http.routers.tiles.rule=Host(`tiles.example.org`)
      - traefik.http.routers.tiles.entrypoints=websecure
      - traefik.http.routers.tiles.tls.certresolver=le
      - traefik.http.routers.tiles.service=tiles
      - traefik.http.routers.tiles.middlewares=tiles-gzip,cache-tiles

      # Les polices : ne changent jamais, gardées un mois.
      - traefik.http.routers.fonts.rule=Host(`tiles.example.org`) && PathPrefix(`/font`)
      - traefik.http.routers.fonts.entrypoints=websecure
      - traefik.http.routers.fonts.tls.certresolver=le
      - traefik.http.routers.fonts.service=tiles
      - traefik.http.routers.fonts.middlewares=tiles-gzip,cache-fonts

      # Le style et les descriptions : changent quand vous les retouchez, gardés cinq minutes.
      - traefik.http.routers.style.rule=Host(`tiles.example.org`) && (PathPrefix(`/style`) || Path(`/catalog`) || Path(`/france`))
      - traefik.http.routers.style.entrypoints=websecure
      - traefik.http.routers.style.tls.certresolver=le
      - traefik.http.routers.style.service=tiles
      - traefik.http.routers.style.middlewares=tiles-gzip,cache-style

      # Compression gzip (et Brotli pour les navigateurs qui la demandent).
      - traefik.http.middlewares.tiles-gzip.compress=true
      - traefik.http.middlewares.tiles-gzip.compress.encodings=gzip,br

      # En-têtes de cache, un par type de contenu.
      - traefik.http.middlewares.cache-tiles.headers.customresponseheaders.Cache-Control=public, max-age=86400, stale-while-revalidate=604800
      - traefik.http.middlewares.cache-fonts.headers.customresponseheaders.Cache-Control=public, max-age=2592000, immutable
      - traefik.http.middlewares.cache-style.headers.customresponseheaders.Cache-Control=public, max-age=300
    restart: unless-stopped

# .env : épinglez des versions précises, publiées et testées.
TRAEFIK_VERSION=v3.x.y
MARTIN_VERSION=x.y.z
ACME_EMAIL=[email protected]

docker compose up -d
curl -sI https://tiles.example.org/catalog

# Une tuile : déjà compressée par Martin, avec son cache d'un jour.
curl -sI -H "Accept-Encoding: gzip, br" https://tiles.example.org/france/12/2064/1495 \
  | grep -iE "content-encoding|cache-control"

# Le style : compressé par Traefik, cinq minutes de cache.
curl -sI -H "Accept-Encoding: gzip, br" https://tiles.example.org/style/base \
  | grep -iE "content-encoding|cache-control"

npm install maplibre-gl

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";

const map = new maplibregl.Map({
  container: "map",
  style: "https://tiles.example.org/style/base",
  center: [1.444, 43.604], // Toulouse
  zoom: 12,
});

map.addControl(new maplibregl.NavigationControl());

#!/usr/bin/env sh
# update-tiles.sh : à lancer par une tâche planifiée (cron), par exemple chaque mois.
set -eu
cd /srv/tiles
docker run --rm -e JAVA_TOOL_OPTIONS="-Xmx8g" -v "$(pwd)/data":/data \
  ghcr.io/onthegomap/planetiler:latest \
  --download --area=france --output=/data/france-next.pmtiles --force
# Bascule : le nouveau fichier remplace l'ancien d'un coup, puis Martin le recharge.
mv data/france-next.pmtiles data/france.pmtiles
docker compose restart martin

npm install pmtiles

import maplibregl from "maplibre-gl";
import { Protocol } from "pmtiles";

const protocol = new Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);

// Dans le style : la source pointe directement sur le fichier.
// "url": "pmtiles://https://cartes.example.org/france.pmtiles"