Carte vectorielle de la Tunisie avec MapLibre et TMaps

Les tuiles raster sont des images de la carte. C'est simple et ça marche partout, mais on ne peut pas y toucher. Les tuiles vectorielles, elles, envoient les données de la carte (routes, bâtiments, noms de lieux) et laissent le navigateur la dessiner. Résultat : une carte nette sur tous les écrans, un zoom fluide, la possibilité de la faire pivoter ou de l'incliner, et un changement de style instantané.

Dans cet article, on utilise les tuiles vectorielles de TMaps avec MapLibre GL JS, la bibliothèque open source de cartes en WebGL, et on construit un petit sélecteur de styles.

La démo en ligne : examples.tmaps.tn/03-vector-maplibre-styles

Ou testez-la directement ici, et copiez-la sur CodePen (bouton Fork) pour modifier le code :

Comment fonctionnent les tuiles vectorielles TMaps

Vous ne demandez pas les tuiles vous-même. Chaque style est un document JSON qui suit la Mapbox Style Specification :

https://tiles.tmaps.tn/v-tile/{style}.json?api_key=VOTRE_CLE_API

Ce JSON décrit les sources de tuiles, les polices (glyphs), les icônes (sprites) et la façon de dessiner chaque couche. MapLibre le lit et va chercher tout le reste tout seul. Quatre styles sont disponibles :

1. Une première carte vectorielle

Il vous faut une clé API créée sur la console TMaps, avec votre domaine (et localhost) dans ses Authorized Domains.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Carte vectorielle de la Tunisie</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.js"></script>
  <style>
    html, body, #map { height: 100%; margin: 0; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const API_KEY = 'VOTRE_CLE_API';

    const map = new maplibregl.Map({
      container: 'map',
      style: `https://tiles.tmaps.tn/v-tile/streets.json?api_key=${API_KEY}`,
      center: [10.1815, 36.8002], // Tunis, en [lng, lat]
      zoom: 12,
      maxZoom: 18,
    });

    map.addControl(new maplibregl.NavigationControl(), 'top-right');
  </script>
</body>
</html>

Un point d'attention : MapLibre attend [longitude, latitude], l'inverse de Leaflet qui attend [lat, lng]. C'est la cause la plus fréquente d'une carte qui s'ouvre en plein océan.

2. Changer de style sans recharger la carte

map.setStyle(url) remplace le style mais garde la carte, sa position et ses contrôles. Un sélecteur simple tient en quelques lignes :

const styleUrl = (name) => `https://tiles.tmaps.tn/v-tile/${name}.json?api_key=${API_KEY}`;

for (const name of ['streets', 'dark', 'terrain', 'sunny']) {
  const button = document.createElement('button');
  button.textContent = name;
  button.addEventListener('click', () => map.setStyle(styleUrl(name)));
  document.body.append(button);
}

Voici la même vue de Tunis dans les trois autres styles. D'abord dark, idéal pour un tableau de bord :

Puis terrain :

Et enfin sunny :

Suivre le mode sombre de l'utilisateur

Comme le changement est instantané, on peut tout simplement suivre le thème du système :

const dark = window.matchMedia('(prefers-color-scheme: dark)');
const applyTheme = () => map.setStyle(styleUrl(dark.matches ? 'dark' : 'streets'));

dark.addEventListener('change', applyTheme);
applyTheme();

3. Incliner et faire pivoter

La carte est dessinée en WebGL, on peut donc l'incliner et la faire pivoter, ce qui est impossible avec des tuiles raster :

map.jumpTo({
  center: [10.179, 36.799], // Médina de Tunis
  zoom: 15.5,
  pitch: 60,     // inclinaison, en degrés
  bearing: -25,  // rotation, en degrés
});

Vos utilisateurs peuvent faire la même chose eux-mêmes : clic droit maintenu sur ordinateur, ou deux doigts sur téléphone.

4. Personnaliser un style

Le JSON du style est modifiable. Téléchargez-le, changez les couches (couleurs, polices, noms affichés selon le zoom), puis hébergez votre propre version. Gardez simplement deux règles en tête :

• les URL des tuiles dans sources doivent toujours pointer vers tiles.tmaps.tn avec votre api_key, car c'est ce qui authentifie votre consommation ;
• vous pouvez modifier librement layers, ainsi que glyphs et sprite si vous hébergez vos propres polices et icônes.

Raster ou vectoriel ?

Pour une carte simple intégrée dans une page, les tuiles raster avec Leaflet restent imbattables. Quand la carte est au cœur de votre produit, passez au vectoriel.

Pour aller plus loin

• TMaps : API de cartographie pour la Tunisie
• Toutes les démos en ligne : examples.tmaps.tn
• Le code source, sous licence MIT : github.com/tmaps-tn/tmaps-snippets
• La collection Postman : postman.com/tmaps-tn/tmaps-api
• La documentation des tuiles vectorielles : tmaps.tn/documentation

Une question ou une remarque ? Laissez un commentaire ou écrivez-nous à [email protected].