Vector tiles

Four vector styles (streets, dark, terrain, sunny) consumable by MapLibre GL for ultra-fast and customizable maps.

TMaps vector tiles are distributed as Mapbox Vector Tile (.pbf) files and wrapped in a TileJSON / Mapbox Style Spec manifest, ready to be consumed by MapLibre GL.

Four styles are available, each with its own palette and theme.

Endpoint

Each style is exposed as a JSON file conforming to the Mapbox Style Specification:

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

The .pbf tiles URL is referenced inside the sources property of the returned JSON: no manual work required, MapLibre handles everything automatically.

Available styles

Style	URL	Description
streets	`https://tiles.tmaps.tn/v-tile/streets.json?api_key=…`	Clean reference map, optimized for street and POI readability.
dark	`https://tiles.tmaps.tn/v-tile/dark.json?api_key=…`	Dark variant — perfect for dashboards and night-mode apps.
terrain	`https://tiles.tmaps.tn/v-tile/terrain.json?api_key=…`	Highlights relief, water bodies and topography.
sunny	`https://tiles.tmaps.tn/v-tile/sunny.json?api_key=…`	Warm palette, ideal for tourism and retail.

Live style switch

MapLibre lets you change the style without destroying the map (map.setStyle(url)), making a dark/light toggle trivial in your app.

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

Style switching (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);
});

Mobile integration

MapLibre Native (iOS, Android) and MapLibre RN consume the style.json directly. Just pass the full URL to your constructor:

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)

Customize a style

The returned JSON follows the Mapbox Style Spec, so you can:

Download it once (curl https://tiles.tmaps.tn/v-tile/streets.json?api_key=…).
Edit the layers (colors, fonts, per-zoom visibility).
Reload your customized version (locally or self-hosted), keeping the original .pbf tiles URL.

Customization limits

The .pbf tiles URL inside sources must keep pointing at tiles.tmaps.tn with your api_key — that’s what authenticates your consumption. You can however freely edit layers, glyphs and sprite if you self-host these resources.

Specs

Tile format: Mapbox Vector Tiles (.pbf)
Zoom range: 0 → 18
Coverage: worldwide, with extra detail for Tunisia
Glyphs and sprites: hosted by TMaps, references included in the style.json

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.