Les tuiles raster sont des images figées. Les tuiles vectorielles transmettent la géométrie brute que le navigateur dessine lui-même en WebGL : rotation, inclinaison, changement de style instantané, étiquettes toujours droites, rendu net sur tous les écrans. MapLibre GL JS est la bibliothèque open source de référence pour les exploiter.
Raster vs vecteur
| Tuiles raster | Tuiles vectorielles | |
|---|---|---|
| Contenu | Images PNG/JPEG | Géométries encodées (format MVT / PBF) |
| Style | Fixé côté serveur | Défini côté client, modifiable à la volée |
| Rotation / 3D | Non | Oui |
| Poids | Plus lourd | Souvent 2 à 5× plus léger |
| Interaction | Aucune sur le fond | Survol et requêtes sur chaque objet |
Première carte MapLibre
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
<script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
<div id="map" style="height:100vh"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
style: 'https://tiles.openfreemap.org/styles/liberty', // style public gratuit
center: [2.35, 48.853], // [lon, lat] — attention, inverse de Leaflet !
zoom: 14,
pitch: 50,
bearing: -20
});
map.addControl(new maplibregl.NavigationControl());
</script>Anatomie d'un style
Un style est un document JSON qui décrit les sources (d'où viennent les données) et les couches (comment les dessiner, dans quel ordre) :
{
"version": 8,
"sources": {
"omt": { "type": "vector", "url": "https://exemple.org/tiles.json" }
},
"layers": [
{ "id": "fond", "type": "background", "paint": { "background-color": "#0b111d" } },
{
"id": "eau", "type": "fill", "source": "omt", "source-layer": "water",
"paint": { "fill-color": "#16324f" }
},
{
"id": "routes", "type": "line", "source": "omt", "source-layer": "transportation",
"paint": { "line-color": "#2ee6c5", "line-width": ["interpolate", ["linear"], ["zoom"], 10, 0.5, 16, 4] }
}
]
}Pour éditer un style visuellement, utilisez Maputnik.
Expressions data-driven
Les expressions permettent de calculer un style à partir des attributs ou du zoom. Exemple : colorer des communes selon leur densité.
map.on('load', () => {
map.addSource('communes', { type: 'geojson', data: 'communes.geojson' });
map.addLayer({
id: 'densite',
type: 'fill',
source: 'communes',
paint: {
'fill-color': [
'step', ['get', 'densite'],
'#f3edff', 50, '#c7b5ff', 200, '#8b6cff', 1000, '#5a35d6', 5000, '#2a0f7a'
],
'fill-opacity': 0.8
}
});
});Bâtiments en 3D
map.addLayer({
id: 'batiments-3d',
type: 'fill-extrusion',
source: 'openmaptiles',
'source-layer': 'building',
minzoom: 14,
paint: {
'fill-extrusion-color': '#8b6cff',
'fill-extrusion-height': ['coalesce', ['get', 'render_height'], 10],
'fill-extrusion-opacity': 0.7
}
});Générer vos propres tuiles
- Tippecanoe transforme un GeoJSON volumineux en tuiles vectorielles optimisées :
tippecanoe -o communes.pmtiles -zg --drop-densest-as-needed communes.geojson - PMTiles est un format « une archive, zéro serveur » : un simple fichier statique lu par requêtes HTTP Range. Idéal pour héberger sur un serveur Apache classique.
- Martin ou pg_tileserv servent des tuiles directement depuis PostGIS.
Avec le protocole PMTiles, une carte vectorielle complète tient dans un hébergement mutualisé : pas de base de données, pas de serveur de tuiles, juste un fichier.
Démonstration
Des tuiles vectorielles OpenMapTiles servies par OpenFreeMap, avec la couche de bâtiments 3D de ce tutoriel :
À essayer : changez de style (les mêmes données, redessinées instantanément), colorez les bâtiments selon leur hauteur (expression step), passez l'eau en violet (setPaintProperty), cliquez un bâtiment pour lire sa hauteur, et faites tourner ou incliner la carte (clic droit + glisser, ou deux doigts).