Blog SIG & Territoires

Introduction : Qu’est-ce que le format MBTiles ?

Le format MBTiles est un format de fichier permettant de stocker des tuiles cartographiques (raster ou vectorielles) dans une base de données SQLite, un moteur de base de données léger et autonome.

Conçu initialement par Mapbox, ce format a été largement adopté dans les communautés SIG, cartographiques et web mapping pour sa portabilité, sa simplicité d’utilisation et sa compatibilité avec de nombreux outils.

Concrètement, un fichier .mbtiles est une base de données unique qui peut contenir des milliers, voire des millions de tuiles géographiques organisées par niveaux de zoom, colonnes et lignes. Il évite ainsi d’avoir une arborescence complexe de fichiers sur le disque, tout en facilitant la distribution (sur le web, via USB, ou en mode déconnecté).

Le format MBTiles peut contenir :

• Des tuiles raster (généralement PNG ou JPEG),
• Ou des tuiles vectorielles (au format MVT – Mapbox Vector Tiles),
• Et des métadonnées (description, attribution, format, etc.).

Grâce à son format SQLite, MBTiles peut être facilement lu avec des outils comme sqlite3, DB Browser for SQLite, ou exploité via des serveurs légers (comme Flask ou TileServer-PHP), ce qui le rend très adapté à la formation, aux démonstrations, ou à des usages hors-ligne.

Structure interne d’un fichier MBTiles

Un fichier MBTiles est une base de données SQLite structurée selon un schéma simple et normalisé, qui permet de stocker efficacement des tuiles cartographiques sous forme raster (PNG, JPEG) ou vectorielle (PBF).

1. Les tables principales

Selon la spécification officielle (https://github.com/mapbox/mbtiles-spec), un fichier .mbtiles contient au minimum :

a) tiles

C’est la table centrale. Elle contient les tuiles encodées, chacune identifiée par ses coordonnées de zoom, colonne (x), et ligne (y) :

CREATE TABLE tiles (
zoom_level INTEGER,
tile_column INTEGER,
tile_row INTEGER,
tile_data BLOB
);

Note : Les tuiles MBTiles utilisent le système de coordonnées TMS (Tile Map Service), ce qui signifie que l’axe vertical (Y) est inversé par rapport au schéma XYZ utilisé par Leaflet. Certains serveurs ou viewers le corrigent automatiquement.

b) metadata

Cette table contient des informations générales sur le fichier et les tuiles qu’il contient, par exemple :

CREATE TABLE metadata (
  name TEXT,
  value TEXT
);

Quelques champs communs :

• name : nom du jeu de tuiles ;
• format : format des tuiles (png, jpg, pbf) ;
• minzoom, maxzoom : niveaux de zoom disponibles ;
• bounds : étendue géographique (minlon,minlat,maxlon,maxlat) ;
• center : coordonnées du centre de la carte (lon,lat,zoom) ;
• type : type de carte (baselayer, overlay) ;
• description : texte explicatif.

2. Indexation

Les fichiers MBTiles peuvent comporter des index pour accélérer l’accès aux tuiles, mais ce n’est pas obligatoire.

3. Autres vues et variantes

Certains outils (comme MapTiler ou TileMill) génèrent des vues supplémentaires ou des schémas alternatifs, comme la vue map associée à une table images dans un format optimisé (déduplication des tuiles).

Exemple :

CREATE TABLE images (
  tile_id TEXT,
  tile_data BLOB
);

CREATE TABLE map (
  zoom_level INTEGER,
  tile_column INTEGER,
  tile_row INTEGER,
  tile_id TEXT
);

Cela permet de stocker chaque image une seule fois, même si elle est utilisée à plusieurs coordonnées.

Voici une section comparative claire entre les deux types de contenus que peut stocker le format MBTiles :

Raster vs Vector : Deux types de tuiles dans les fichiers MBTiles

Le format MBTiles est polyvalent : il peut contenir des tuiles raster (images) ou vectorielles (données géographiques encodées). Chaque approche a ses avantages et convient à des cas d’usage différents.

1. MBTiles Raster

• Contenu : images en PNG ou JPEG (rarement WebP).
• Utilisation : fonds de carte pré-rendus, cartes statiques, cartes historiques, orthophotos, etc.
• Format déclaré : champ format = png ou jpg dans la table metadata.
• Affichage : directement compatible avec la plupart des bibliothèques comme Leaflet, OpenLayers ou MapLibre, via un serveur de tuiles (local ou distant).
• Avantages :

  • Très simple à mettre en œuvre.
  • Rendu cohérent sur toutes les plateformes.
  • Aucun traitement côté client.

• Limites :

  • Pas d’interactivité native (pas de clic sur entité).
  • Poids plus élevé : une image par tuile.
  • Moins flexible en cas de changement de style.

2. MBTiles Vectoriels (VectorTiles)

• Contenu : données vectorielles encodées au format Mapbox Vector Tile (MVT, .pbf).
• Utilisation : cartes dynamiques, interactives, multi-styles (OpenStreetMap, plans personnalisés).
• Format déclaré : champ format = pbf dans la table metadata.
• Affichage : nécessite une bibliothèque supportant le rendu vectoriel (MapLibre GL, Mapbox GL JS, etc.).
• Avantages :

  • Léger : un seul fichier peut contenir plusieurs styles.
  • Très rapide à charger avec le bon moteur de rendu.
  • Interactif : on peut interroger les entités à la volée.

• Limites :

  • Nécessite un moteur de rendu côté client ou un serveur comme tileserver-gl.
  • Plus complexe à générer.
  • Pas encore supporté par toutes les plateformes (par exemple Leaflet ne les supporte pas directement).

En résumé

Générer des fichiers MBTiles : outils et workflows

1. MBTiles Raster (images)

Les tuiles raster sont généralement générées à partir d’une carte affichée dans un logiciel SIG ou un moteur de rendu cartographique. Voici les principaux outils :

Cas d’usage typique : carte touristique, orthophoto, carte scannée.

2. MBTiles Vectoriels (Vector Tiles)

Les tuiles vectorielles demandent un encodage en PBF et un découpage en tuiles selon la norme MVT (Mapbox Vector Tile). Cela nécessite des outils spécialisés :

Cas d’usage typique : carte de ville interactive, fonds personnalisables, projets à forte interactivité.

Structure interne d’un fichier MBTiles

Un fichier .mbtiles est une base SQLite contenant des tuiles géographiques organisées selon un schéma standardisé, qui varie légèrement entre les formats raster et vectoriel.

1. Tables principales

tiles (ou map + images pour vectoriels multi-part)

Remarque : en format vectoriel, certaines implémentations comme tilemaker séparent les métadonnées d’image (images) et les positions (map). On crée alors une vue tiles qui les combine.

metadata

Table clé-valeur (clé = texte, valeur = texte) qui contient des informations essentielles pour l’interprétation du fichier.

(optionnel) grids, grid_data, keymap

Utilisées pour le format UTFGrid, une forme obsolète d’interactivité dans les fonds raster.

Remarques importantes

• Les coordonnées tile_row sont souvent inversées selon le système de tuile :

  • TMS (Tile Map Service) : l’origine est en bas à gauche.
  • XYZ (Web standard) : l’origine est en haut à gauche.
  • La plupart des serveurs et viewers modernes utilisent XYZ.

• Le champ tile_data contient :

  • Une image compressée (png, jpg) pour raster.
  • Un objet PBF zlib-compressé pour vectoriel.

• Pour les tuiles vectorielles, le champ json dans metadata peut contenir : { "vector_layers": [ { "id": "buildings", "description": "", "minzoom": 12, "maxzoom": 16, "fields": { "name": "String", "height": "Number" } } ] }

Utilisation des fichiers MBTiles avec Leaflet

Leaflet est une bibliothèque JavaScript populaire pour la création de cartes interactives. Elle prend en charge l’intégration de nombreux types de fonds de carte, y compris les fichiers MBTiles. Voici les étapes typiques et les cas d’usage pour intégrer des fichiers MBTiles dans une carte Leaflet.

1. Prérequis : Un serveur de tuiles

Avant d’utiliser des fichiers MBTiles avec Leaflet, il est nécessaire de mettre en place un serveur de tuiles, car Leaflet ne charge pas directement des fichiers MBTiles locaux. Ce serveur va servir les tuiles en tant qu’images ou en format vectoriel, accessibles via une URL.

Les options pour héberger les MBTiles sont variées :

• TileStache
• Tileserver-GL
• Flask + Flask-tile (pour une installation légère)
• Tileserver-php

Une fois le serveur configuré, il peut diffuser les tuiles via HTTP, que Leaflet peut appeler pour les afficher sur la carte.

2. Intégration de MBTiles avec Leaflet

Voici un exemple simple d’utilisation d’un serveur de tuiles avec Leaflet pour afficher des données provenant d’un fichier .mbtiles :

Exemple avec tuiles raster

a)Lancer le serveur de tuiles

Positionnez-vous dans le répertoire contenant les tuiles raster.

php.exe -S localhost:8081

lancez le seveur de tuiles

La page html suivante affiche le contenu des tuiles du fichier countries.mbtiles situé dans le sous_dossier tiles/. Dans le navigateur vous devez rentrer l’adresse localhost:8081/nom_de_la_page.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Carte Mondiale</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        html, body, #map { height: 100%; margin: 0; }
    </style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
    var map = L.map('map').setView([45, 2], 5);

    L.tileLayer('tileserver.php?file=tiles/countries.mbtiles&z={z}&x={x}&y={y}', {
        tileSize: 256,
        minZoom: 0,
        maxZoom: 6,
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);
</script>
</body>
</html>

Le résultat est le suivant:

3. Tuiles vectorielles (MBTiles PBF)

Si vous utilisez un fichier MBTiles vectoriel (par exemple, généré par MapTiler ou Mapbox), vous devrez configurer Leaflet avec un plugin qui peut interpréter les tuiles vectorielles. Leaflet.VectorGrid est l’un des plugins qui permet de gérer les tuiles vectorielles dans Leaflet.

Exemple avec tuiles vectorielles (PBF)

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Carte Vectorielle MBTiles avec Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.vectorgrid@1.1.0/dist/Leaflet.VectorGrid.js"></script>
</head>
<body>
    <div id="map" style="height: 600px;"></div>

    <script>
        var map = L.map('map').setView([ -19.7, 63.35], 12); // Centré sur Rodrigues

        // Charger les tuiles vectorielles MBTiles
        L.vectorGrid.protobuf("http://localhost:8081/tileserver.php?file=tiles/map.mbtiles&z={z}&x={x}&y={y}", {
            vectorTileLayerStyles: {
                // Styles pour les tuiles vectorielles
                building: {
                    fillColor: 'blue',
                    weight: 1,
                    fillOpacity: 0.6
                },
                park: {
                    fillColor: 'green',
                    weight: 1,
                    fillOpacity: 0.6
                }
            }
        }).addTo(map);
    </script>
</body>
</html>

Dans cet exemple, le serveur Flask ou Tileserver-GL est utilisé pour fournir les tuiles vectorielles, que Leaflet rend sous forme de vecteurs à l’aide de L.vectorGrid.

Mais, attention, ce n’est pas aussi simple qu’avec les tuiles raster.

Symbologie

La première différence réside sur le fait que les tuiles vectorielles, contrairement aux tuiles raster, n’ont pas de symbologie associée au niveau du serveur. Vosu êtes alors obligés de définir la symbologie au niveau du client html. Vous pouvez le constater dans le code exemple ci-dessus:

vectorTileLayerStyles: {
                // Styles pour les tuiles vectorielles
                building: {
                    fillColor: 'blue',
                    weight: 1,
                    fillOpacity: 0.6
                },
                park: {
                    fillColor: 'green',
                    weight: 1,
                    fillOpacity: 0.6
                }
            }

Ce qu’il faut aussi savoir c’est qu’il n’y a pas de symbologie par défaut. Si une couche n’a pas de définition de symbologie au niveau du vectorTileLayerStyles, elle ne sera pas affihée. Dans notre exemple, seuls les bâtiments et les parcs seront affichés, toutes les autres couches (routes, etc.) seront ignorées.

Dépendances

Leaflet.VectorGrid possède plusieurs dépendance qui peuvent compliquer le fonctionnement du serveur de tuiles local. Quand on affiche un fichier .mbtiles converti en .pbf via tileserver.php (par exemple), on fait appel à des tuiles vectorielles brutes depuis un serveur PHP local, sans les bons headers ou encodages. Or :

• Ces tuiles nécessitent pbf.js (ce qu’on peut ajouter: src= »https://unpkg.com/pbf@3.2.1/dist/pbf.js »)
• Mais aussi @mapbox/vector-tile pour décoder les contenus .pbf

Or, cette dernière n’est pas disponible sous forme de fichier .js utilisable directement dans une page HTML : elle est écrite pour Node.js ou pour un bundler moderne (Webpack, Vite, etc.).

Encodage

Le code PHP de tileserver.php par défaut est configuré pour gérer des tuiles raster (image PNG), mais pas des tuiles vectorielles (.pbf).

Il faudra donc ajuster le fichier tileserver.php pour servir des tuiles vectorielles (PBF):

Modification de l’en-tête Content-Type:
Pour des tuiles vectorielles, il faut spécifier un en-tête Content-Type: application/x-protobuf, car les tuiles vectorielles sont des fichiers au format Protobuf (.pbf), et non des images PNG.

Exemple de Code PHP modifié pour servir des tuiles vectorielles (PBF) :

<?php
// Ouverture de la base de données SQLite
$db = new SQLite3($_GET['file']);

// Extraction des coordonnées de la tuile
$z = (int) $_GET['z'];
$x = (int) $_GET['x'];
$y = (int) $_GET['y'];

// Conversion du système de coordonnées TMS vers XYZ
$y = (1 << $z) - 1 - $y;  // TMS flip

// Préparation de la requête pour extraire la tuile correspondante
$stmt = $db->prepare("SELECT tile_data FROM tiles WHERE zoom_level = :z AND tile_column = :x AND tile_row = :y");
$stmt->bindValue(':z', $z, SQLITE3_INTEGER);
$stmt->bindValue(':x', $x, SQLITE3_INTEGER);
$stmt->bindValue(':y', $y, SQLITE3_INTEGER);
$res = $stmt->execute();

// Si une tuile est trouvée
if ($row = $res->fetchArray()) {
    // Définir l'en-tête approprié pour les tuiles vectorielles Protobuf
    header('Content-Type: application/x-protobuf');
    
    // Retourner les données de la tuile
    echo $row['tile_data'];
} else {
    // Si aucune tuile n'est trouvée, renvoyer une erreur 404
    http_response_code(404);
}
?>

4. Scalabilité et autres utilisations

Les fichiers MBTiles sont particulièrement pratiques dans les scénarios où :

• La performance est un enjeu important, car les tuiles peuvent être diffusées efficacement grâce à un serveur de tuiles optimisé.
• Vous souhaitez distribuer un grand nombre de tuiles hors ligne ou dans un environnement sans connexion à Internet (tuiles pré-générées et stockées dans un seul fichier).
• Les tuiles sont générées à partir de données qui évoluent fréquemment, et vous avez la possibilité de les mettre à jour ou de les remplacer avec un minimum de perturbation pour les utilisateurs finaux.

Conclusion

Le format MBTiles est très bien adapté aux applications Leaflet, car il offre une solution simple et efficace pour servir des tuiles géospatiales, qu’elles soient raster ou vectorielles. Avec une installation légère et un serveur de tuiles bien configuré, il devient facile d’afficher des cartes de manière performante et de gérer une grande quantité de données géospatiales.

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !

Atilio Francois