Raster tiles

PNG map tiles ready to plug into Leaflet, MapLibre GL or OpenLayers.

The Raster Tiles endpoint serves PNG image tiles following the standard XYZ convention (z = zoom, x / y = grid coordinates). Compatible with every web and mobile mapping library.

Endpoint

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

Parameters

Path parameters

Param	Type	Requis	Défaut	Description
`z`	integer	oui	—	Zoom level (between `0` and `18`).
`x`	integer	oui	—	X coordinate of the tile in the XYZ grid.
`y`	integer	oui	—	Y coordinate of the tile in the XYZ grid.

Query parameters

Param	Type	Requis	Défaut	Description
`api_key`	string	oui	—	Your TMaps API key.

Specs

Response format: image/png
Zoom range: 0 → 18
Tile size: 256 × 256 pixels
Retina (@2x): not supported yet
Coverage: worldwide, optimized and enriched for Tunisia

Zoom limit

When configuring your map, set maxZoom to 18. Beyond that, tiles are unavailable and the layer renders empty / grey.

Response

A successful response is a PNG file (Content-Type: image/png).

On error, you get a 4xx/5xx status with a JSON body:

{ "error": "missing api_key" }

See Error codes for the full list.

Integration — 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);

Integration — MapLibre GL JS

MapLibre supports raster layers via the sources property of the 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' }],
},
});

Integration — 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,
}),
});

Mobile integration

Every mobile SDK that supports XYZ layers (MapLibre Native, MapKit JS, react-native-maps in UrlTemplate mode, etc.) is compatible. Use the same template:

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

Cache and performance

Raster tiles are served with long-lived Cache-Control headers. On mobile, enable your library’s disk cache to reduce data usage.

Get your API key

To test the API and use it in production, create an account then generate an API key from the TMaps console. Remember to add localhost to your authorized domains when testing locally in a browser.