Tuiles raster

Tuiles cartographiques au format PNG, prêtes à brancher dans Leaflet, MapLibre GL ou OpenLayers.

L’endpoint Raster Tiles sert des tuiles d’image PNG suivant la convention XYZ standard (z = zoom, x / y = coordonnées). Compatible avec toutes les bibliothèques cartographiques web et mobile.

Endpoint

GET https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=YOUR_API_KEY

Paramètres

Paramètres de chemin

Param	Type	Requis	Défaut	Description
`z`	integer	oui	—	Niveau de zoom (entre `0` et `18`).
`x`	integer	oui	—	Coordonnée X de la tuile dans la grille XYZ.
`y`	integer	oui	—	Coordonnée Y de la tuile dans la grille XYZ.

Paramètres de query

Param	Type	Requis	Défaut	Description
`api_key`	string	oui	—	Votre clé API TMaps.

Caractéristiques

Format de retour : image/png
Plage de zoom : 0 → 18
Taille de tuile : 256 × 256 pixels
Retina (@2x) : non supporté pour le moment
Couverture : monde entier, optimisée et enrichie pour la Tunisie

Détection de la limite de zoom

Quand vous configurez votre carte, fixez maxZoom à 18. Au-delà, les tuiles ne sont plus disponibles et la couche s’affichera vide ou en quadrillage gris.

Réponse

Une réponse réussie est un fichier PNG (Content-Type: image/png).

En cas d’erreur, vous recevez un statut HTTP 4xx/5xx avec un body JSON :

{ "error": "missing api_key" }

Voir la liste complète sur la page Codes d’erreur.

Intégration — Leaflet

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const map = L.map('map').setView([36.8002, 10.1815], 12); // Tunis

L.tileLayer(
'https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=YOUR_API_KEY',
{
  maxZoom: 18,
  attribution: '© TMaps',
}
).addTo(map);

Intégration — MapLibre GL JS

MapLibre supporte les couches raster via la propriété sources du style :

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

const map = new maplibregl.Map({
container: 'map',
center: [10.1815, 36.8002],
zoom: 12,
maxZoom: 18,
style: {
  version: 8,
  sources: {
    'tmaps-raster': {
      type: 'raster',
      tiles: ['https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=YOUR_API_KEY'],
      tileSize: 256,
    },
  },
  layers: [{ id: 'tmaps-raster', type: 'raster', source: 'tmaps-raster' }],
},
});

Intégration — OpenLayers

import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { fromLonLat } from 'ol/proj';

new Map({
target: 'map',
layers: [
  new TileLayer({
    source: new XYZ({
      url: 'https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=YOUR_API_KEY',
      maxZoom: 18,
    }),
  }),
],
view: new View({
  center: fromLonLat([10.1815, 36.8002]),
  zoom: 12,
}),
});

Intégration mobile

Tous les SDK mobiles qui supportent les couches XYZ (MapLibre Native, MapKit JS, react-native-maps en mode UrlTemplate, etc.) sont compatibles. Utilisez le même template :

https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=YOUR_API_KEY

Cache et performance

Les tuiles raster sont servies avec des en-têtes Cache-Control longue durée. Si vous intégrez côté mobile, activez le cache disque de votre lib pour réduire la consommation data.

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.