Tuiles vectorielles

Quatre styles vectoriels (streets, dark, terrain, sunny) consommables avec MapLibre GL pour des cartes ultra-rapides et personnalisables.

Les tuiles vectorielles TMaps sont distribuées au format Mapbox Vector Tile (.pbf) et encapsulées dans un manifest TileJSON / Mapbox Style Spec prêt à être consommé par MapLibre GL.

Quatre styles sont disponibles, chacun avec sa palette et sa thématique.

Endpoint

Chaque style est exposé sous la forme d’un fichier JSON conforme à la Mapbox Style Specification :

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

L’URL des tuiles .pbf est référencée dans la propriété sources du JSON renvoyé : aucun appel manuel à faire, MapLibre gère tout automatiquement.

Styles disponibles

Style	URL	Description
streets	`https://tiles.tmaps.tn/v-tile/streets.json?api_key=…`	Carte de référence claire, optimisée pour la lecture des rues et POI urbains.
dark	`https://tiles.tmaps.tn/v-tile/dark.json?api_key=…`	Variante sombre — idéale pour les dashboards et apps en mode nuit.
terrain	`https://tiles.tmaps.tn/v-tile/terrain.json?api_key=…`	Met en avant le relief, les cours d’eau et la topographie.
sunny	`https://tiles.tmaps.tn/v-tile/sunny.json?api_key=…`	Palette chaleureuse, parfaite pour le tourisme et le retail.

Switch de style à chaud

MapLibre permet de changer le style sans détruire la carte (map.setStyle(url)), ce qui rend très simple un toggle dark/light dans votre application.

Intégration — MapLibre GL JS

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

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

map.addControl(new maplibregl.NavigationControl(), 'top-right');

Switch de style (dark / light)

const styles = {
light: 'https://tiles.tmaps.tn/v-tile/streets.json?api_key=YOUR_API_KEY',
dark:  'https://tiles.tmaps.tn/v-tile/dark.json?api_key=YOUR_API_KEY',
};

document.querySelector('#toggle-dark').addEventListener('click', () => {
const current = map.getStyle().name;
map.setStyle(current === 'dark' ? styles.light : styles.dark);
});

Intégration mobile

MapLibre Native (iOS, Android) et MapLibre RN consomment directement le style.json. Passez simplement l’URL complète à votre constructeur :

let url = URL(string: "https://tiles.tmaps.tn/v-tile/streets.json?api_key=YOUR_API_KEY")!
let mapView = MLNMapView(frame: view.bounds, styleURL: url)

Personnaliser un style

Le JSON renvoyé suit la Mapbox Style Spec, donc vous pouvez :

Le télécharger une fois (curl https://tiles.tmaps.tn/v-tile/streets.json?api_key=…).
Modifier les layers (couleurs, polices, visibilité par zoom).
Recharger votre version personnalisée (en local ou hébergée chez vous), en gardant l’URL des tuiles .pbf d’origine.

Limites de personnalisation

L’URL des tuiles .pbf dans sources doit rester pointée vers tiles.tmaps.tn avec votre api_key — c’est elle qui authentifie votre consommation. Vous pouvez en revanche modifier librement layers, glyphs et sprite si vous hébergez vos propres ressources.

Caractéristiques

Format de tuiles : Mapbox Vector Tiles (.pbf)
Plage de zoom : 0 → 18
Couverture : monde entier, niveaux de détail enrichis pour la Tunisie
Glyphs et sprites : hébergés par TMaps, références incluses dans le style.json

Obtenir votre clé

Pour tester l’API et l’utiliser en production, créez un compte puis générez une clé API depuis la console TMaps. Pensez à ajouter localhost à vos domaines autorisés si vous testez en local depuis un navigateur.