Tuiles en Liberté

Des tuiles OpenStreetMap vectorielles libres

Gratuites, sans inscription et anonymes

new maplibregl.Map({
  style: "https://tuiles.enliberte.fr/styles/bright.json",
  ...
})

Quoi?

Ces dernières années, l’environnement technique de la cartographie web, en particulier autour d’OpenStreetMap et de MapLibre, est devenu suffisamment mature pour que n’importe-qui puisse héberger un « serveur » de tuiles cartographiques pour un cout dérisoire.

Nous^* mettons à disposition sur tuiles.enliberte.fr un fichier PMTiles, utilisable facilement avec MapLibre.

Style

Concrètement:

Un gros fichier planet.pmtiles, qui contient l’intégralité de la planète sous forme de tuiles vectorielles, est hébergé quelque part (sur un serveur Object Storage);
Chaque semaine, un script le met à jour à partir d’OpenStreetMap;
Ce fichier peut alors être utilisé comme source de données dans un style MapLibre;
Une collection de styles MapLibre, par exemple styles/bright.json, est disponible directement sur tuiles.enliberte.fr; il est aussi possible de créer votre style en référençant directement le fichier planet.pmtiles.

Configurer MapLibre

MapLibre GL JS dispose d’un plugin qui lui permet d’utiliser les fichiers PMTiles depuis le navigateur. Ce plugin est nécessaire pour utiliser des styles de cartes qui utilisent des sources de données PMTiles. L’unique obligation est d’attribuer la source aux contributeurs OpenStreetMap. Voici un exemple minimal, mais complet:

Afficher l’exemple en plein écran

<!doctype html>
<html>
  <head>
  <meta charset="utf-8" />
  <link href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css" rel="stylesheet" />
  </head>
  <body>
  <div id="map" style="width: 100%; height: 100%;"></div>
  <script type="module">
  import maplibregl from "https://cdn.jsdelivr.net/npm/maplibre-gl@5.1.0/+esm"
  import { Protocol } from "https://cdn.jsdelivr.net/npm/pmtiles@4.2.1/+esm"

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

  const map = new maplibregl.Map({
    style: "https://tuiles.enliberte.fr/styles/bright.json",
    container: "map",
    center: [2.40, 48.87],
    zoom: 13,
    attributionControl: { customAttribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }, })
  </script>
  </body>
</html>

Styles prédéfinis

Nous avons préconfiguré une série de styles MapLibre, que vous pouvez référencer directement comme dans l’exemple ci-dessus:

Source de données

Pour configurer votre propre style MapLibre, utiliser la source de données:

pmtiles://https://osm.nbg1.your-objectstorage.com/planet.pmtiles

Notez, encore une fois, le préfixe pmtiles:// qui nécessite l’utilisation du plugin pmtiles pour MapLibre.

Note: osm.nbg1.your-objectstorage.com est le nom de domaine de l’hébergeur S3 que nous utilisons (Hetzner). Pour l’instant, nous ne pouvons pas utiliser le nom de domaine tuiles.enliberte.fr, mais nous y travaillons.

Un peu d’histoire et de détails techniques

Il n’y a pas si longtemps, les cartes sur le web étaient des petites images (généralement des png de 256×256 pixels). Cela comportait de nombreux désavantages :

Générer ces tuiles était couteux en temps de calcul,
Les données à transmettre sur le fil étaient plus importantes,
Le rendu n’était pas personnalisable par l’utilisateur,
Les niveaux de zooms étaient fixes.

En 2014 Mapbox a introduit les tuiles vectorielles, dites MVT. Au lieu d’être des images, les tuiles contiennent les coordonnées des rues, batiments et emplacements d’arbres. C’est le navigateur qui fait désormais le rendu. On peut donc avoir un style dynamique, un zoom fluide sans gros pixels – tout en ayant une source de données unique sur le serveur sans trop pré-supposer du rendu qui sera effectué.

En 2018, la version 1.3 des MBTiles intègre le support des MVT. Ce format rassemble tous les fichiers dans un simple fichier SQLite: désormais un seul gros fichier permet de stocker le monde entier. Cependant, comme c’est un fichier sqlite, il faut encore un petit serveur web qui va chercher la donnée pour une coordonnée et un niveau de zoom donné.

En 2021, le format PMTiles règle ce problème: pour accéder facilement aux données des tuiles, le navigateur effectue des requêtes HTTP Range. Il n’y a plus besoin de serveur spécifique: n’importe quel serveur de fichiers HTTP suffit, et en particulier les hébergements de type Object Storage répondent parfaitement au besoin.

Une série de requêtes http sur le même fichier PMTiles, avec des plages d’octets différentes.

Comment le fichier PMTiles est-il créé?

Le fichier planet.pmtiles ne contient pas la base de données OpenStreetMap telle quelle, il faut traiter les données pour:

Ignorer certains détails selon le niveau de zoom,
Fusionner les éléments similaires,
Traduire les libellés,
Simplifier les géométries…

Plusieurs outils existent; nous avons basé notre script sur Planetiler.

Infrastructure

C’est un bien grand mot.

Hébergement:

Pour tuiles.enliberte.fr, nous utilisons l’offre S3 de Hetzner à 5€/mois pour 1To de stockage et 1To de bande-passante. Le fichier planet.pmtiles représente un peu moins de 100Go. En terme de bande passante, cela représente environ 100 000 cartes affichées. (Nous ne leur faisons pas particulièrement de pub: nous sommes satisfaits, mais d’autres acteurs ont des offres similaires. Mais si vous pouvez éviter d’aller chez Amazon, c’est toujours mieux.).

Traitement des données:

Nous lançons une instance cloud chez Hetzner pour générer le fichier planet.pmtiles. Le traitement dure moins de 3h sur une instance CCX53, soit moins de 1€ par mise à jour.

Dans les faits, les couts sont tellement faibles que nous pouvons proposer cette offre gratuitement.

Engagement et garanties

Disponibilité: il s’agit principalement d’héberger un gros fichier *quelque part sur internet*. La disponibilité dépend donc de celle de l’hébergeur, en l’occurence Hetzner.
Mises à jour: Le fichier planet.pmtiles est mis à jour une fois par semaine.
Les urls des fichiers de style sont stables; mais ils ne sont pas versionnés.
Nous ne collectons aucune information, pas même le nombre d’appels HTTP. En fait, le tableau de bord côté Hetzner n’affiche la bande passante consommée qu’au Go près.

Si vous avez besoin de mises à jour plus fréquentes, d’accompagnement sur la configuration ou de conseil, n’hésitez pas à nous contacter.

Qui sommes-nous?

Codeur·euses en Liberté est une coopérative d’indépendants en informatique, avec un goût prononcé pour la cartographie. Ces dernières années, nous avons notamment fait ceci et ceci. Nous participons aussi, entre autres, à ça et à ça.

Tuiles en liberté est né de la réalisation qu’en 2025, toutes les briques logicielles nécessaires sont là pour générer et héberger très simplement des tuiles cartographiques vectorielles, sans dépendre ni de Google, ni de MapTiler, ni de personne. (Sauf d’OpenStreetMap 🫶)

Alternatives

L’idée est très fortement inspirée de OpenFreeMap. D’autres sources peuvent être découvertes sur cette page.

Si vous avez besoin de services supplémentaires (géocoding, calcul d’itinéraire, statistiques d’utilisation), les entreprises spécialisées telles que MapTiler ou encore JawgMaps pourront vous aider. Vous avez également à disposition tous les experts et expertes de la Fédération des pros d’OpenStreetMap.