DEV Community: Tmaps Tunisia

TMaps API in Postman: Test Geocoding in 2 Minutes

Tmaps Tunisia — Fri, 30 Oct 2026 09:47:39 +0000

Before writing a single line of code against a new API, most of us want to poke at it first and see what comes back. That's what the TMaps Postman collection is for: map tiles, address search, reverse geocoding and nearby places, each with documented parameters, example responses and tests.

Here's how to get your first response in about two minutes, and then how to automate the whole thing.

Step 1: get a key (30 seconds)

Create an API key in the TMaps console. It starts with ak_.

Postman calls the API from a server context, without an Origin header, so the key's authorized domains don't come into play here. Any valid key will do.

Step 2: fork the collection (30 seconds)

Click Run in Postman above, or open the public workspace, and choose Fork Collection. You now have your own copy of the collection in your own workspace.

The workspace README gives a quick overview of what's inside:

Step 3: set your key (30 seconds)

Open your forked collection, go to its Variables tab and add a variable called api_key, with your key as the Current value. If you prefer environments, you can also fork the TMaps environment from the public workspace and set api_key there.

That's the only setting. The collection adds the key to every request as an api_key query parameter. It's configured once in the collection's Authorization tab and every request inherits it. TMaps doesn't use an Authorization header.

Keep the key in Current value: it stays on your machine and isn't shared with your workspace.

Step 4: send your first request (30 seconds)

Open Geocoding, then Forward geocoding, and hit Send.

Each request comes with its own documentation: what it does, what it returns, and a link to the matching live demo.

The Params tab lists every parameter with a description. The optional ones (proximity, bbox, type) are already there, just unchecked. Tick them to try them out.

In the response you'll find the point in geometry.location, a formatted address, a confidence score and the Tunisian administrative breakdown (commune, delegation, governorate). No key yet? Open the saved example to see a real response:

Chaining requests

The test script of Forward geocoding saves the first result's coordinates in the lat and lng collection variables:

const results = pm.response.json().results ?? [];
if (results.length) {
  const { lat, lng } = results[0].geometry?.location ?? results[0];
  pm.collectionVariables.set('lat', lat);
  pm.collectionVariables.set('lng', lng);
}

So Reverse geocoding and Nearby search work straight away on the address you just found. No copying coordinates around by hand.

Every request also has a few tests (status code, response shape, results sorted by distance…). After sending, you'll see them in the Tests tab of the response.

Bonus: run it from the command line with Newman

The same collection runs outside Postman with Newman. The files live in the GitHub repository:

git clone https://github.com/tmaps-tn/tmaps-snippets.git
cd tmaps-snippets

npx newman run postman/TMaps-API.postman_collection.json \
  -e postman/TMaps.postman_environment.json \
  --env-var "api_key=$TMAPS_API_KEY"

Here's what a run looks like:

❏ Geocoding
↳ Forward geocoding
  GET https://api.tmaps.tn/geocoding/forward?q=Avenue Habib Bourguiba, Tunis&country=TN&limit=5&lang=fr&api_key=YOUR_API_KEY [200 OK, 3.64kB, 217ms]
  ✓  Status is 200
  ✓  Returns at least one result

↳ Reverse geocoding
  GET https://api.tmaps.tn/geocoding/reverse?lat=36.80060045491796&lng=10.191012134812192&lang=fr&api_key=YOUR_API_KEY [200 OK, 1.09kB, 29ms]
  ✓  Status is 200
  ✓  Returns an address

↳ Nearby search
  GET https://api.tmaps.tn/geocoding/nearby?lat=36.80060045491796&lng=10.191012134812192&radius=1000&categories=restaurant&limit=10&api_key=YOUR_API_KEY [200 OK, 2.38kB, 28ms]
  ✓  Status is 200
  ✓  Results are sorted by distance

│              assertions │                10 │                 0 │

In GitHub Actions

Store your key as a repository secret named TMAPS_API_KEY, then add a step:

- name: Check the TMaps API
  run: |
    npx newman run postman/TMaps-API.postman_collection.json \
      -e postman/TMaps.postman_environment.json \
      --env-var "api_key=${{ secrets.TMAPS_API_KEY }}"

Now your pipeline fails as soon as an endpoint your app relies on stops answering the way it should.

One word of caution: Newman prints full request URLs, key included. Don't run it with a real key in public CI logs, or mask the output first.

What's in the collection

Folder	Request	Endpoint
Maps	Raster tile (PNG)	`GET https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}`
Maps	Vector style (MapLibre)	`GET https://tiles.tmaps.tn/v-tile/{style}.json`
Geocoding	Forward geocoding	`GET https://api.tmaps.tn/geocoding/forward`
Geocoding	Reverse geocoding	`GET https://api.tmaps.tn/geocoding/reverse`
Geocoding	Nearby search	`GET https://api.tmaps.tn/geocoding/nearby`

Going further

Geocoding API for Tunisia: www.tmaps.tn/en/geocoding
Public Postman workspace: postman.com/tmaps-tn/tmaps-api
Live demos in the browser: examples.tmaps.tn
Source code, MIT licensed: github.com/tmaps-tn/tmaps-snippets
Documentation: tmaps.tn/documentation

Questions or feedback? Leave a comment or write to support@tmaps.tn.

Tester l'API TMaps dans Postman en 2 minutes

Tmaps Tunisia — Fri, 30 Oct 2026 09:47:30 +0000

Avant d'écrire la moindre ligne de code avec une nouvelle API, on a tous envie de la tester un peu pour voir ce qu'elle renvoie. C'est exactement le rôle de la collection Postman de TMaps : tuiles de carte, recherche d'adresse, géocodage inverse et lieux à proximité, chacun avec ses paramètres documentés, des exemples de réponse et des tests.

Voici comment obtenir votre première réponse en deux minutes environ, puis comment automatiser le tout.

Étape 1 : créer une clé (30 secondes)

Créez une clé API sur la console TMaps. Elle commence par ak_.

Postman appelle l'API depuis un contexte serveur, sans en-tête Origin : les domaines autorisés de la clé ne jouent donc aucun rôle ici. N'importe quelle clé valide fera l'affaire.

Étape 2 : copier la collection (30 secondes)

Cliquez sur Run in Postman ci-dessus, ou ouvrez l'espace de travail public, puis choisissez Fork Collection. Vous avez maintenant votre propre copie de la collection, dans votre espace de travail.

Le README de l'espace de travail résume ce qu'il contient :

Étape 3 : renseigner votre clé (30 secondes)

Ouvrez votre copie de la collection, allez dans l'onglet Variables et ajoutez une variable api_key, avec votre clé comme Current value. Si vous préférez les environnements, vous pouvez aussi copier l'environnement TMaps depuis l'espace de travail public et y renseigner api_key.

C'est le seul réglage. La collection ajoute la clé à chaque requête sous forme de paramètre api_key dans l'URL. Elle est configurée une seule fois, dans l'onglet Authorization de la collection, et toutes les requêtes en héritent. TMaps n'utilise pas d'en-tête Authorization.

Gardez bien la clé dans Current value : elle reste sur votre machine et n'est pas partagée avec votre espace de travail.

Étape 4 : envoyer votre première requête (30 secondes)

Ouvrez Geocoding, puis Forward geocoding, et cliquez sur Send.

Chaque requête a sa propre documentation : ce qu'elle fait, ce qu'elle renvoie, et un lien vers la démo en ligne correspondante.

L'onglet Params liste tous les paramètres avec leur description. Les paramètres facultatifs (proximity, bbox, type) sont déjà là, simplement décochés. Cochez-les pour les essayer.

Dans la réponse, vous trouverez le point dans geometry.location, l'adresse complète dans formatted, un score confidence et le découpage administratif tunisien (commune, delegation, governorate). Pas encore de clé ? Ouvrez l'exemple enregistré pour voir une vraie réponse :

Enchaîner les requêtes

Le script de test de Forward geocoding enregistre les coordonnées du premier résultat dans les variables lat et lng de la collection :

const results = pm.response.json().results ?? [];
if (results.length) {
  const { lat, lng } = results[0].geometry?.location ?? results[0];
  pm.collectionVariables.set('lat', lat);
  pm.collectionVariables.set('lng', lng);
}

Reverse geocoding et Nearby search fonctionnent donc tout de suite sur l'adresse que vous venez de trouver, sans recopier les coordonnées à la main.

Chaque requête a aussi quelques tests (code de statut, forme de la réponse, résultats triés par distance…). Après l'envoi, vous les retrouvez dans l'onglet Tests de la réponse.

Bonus : lancer la collection en ligne de commande avec Newman

La même collection fonctionne en dehors de Postman grâce à Newman. Les fichiers sont dans le dépôt GitHub :

git clone https://github.com/tmaps-tn/tmaps-snippets.git
cd tmaps-snippets

npx newman run postman/TMaps-API.postman_collection.json \
  -e postman/TMaps.postman_environment.json \
  --env-var "api_key=$TMAPS_API_KEY"

Voici à quoi ressemble une exécution :

❏ Geocoding
↳ Forward geocoding
  GET https://api.tmaps.tn/geocoding/forward?q=Avenue Habib Bourguiba, Tunis&country=TN&limit=5&lang=fr&api_key=VOTRE_CLE_API [200 OK, 3.64kB, 217ms]
  ✓  Status is 200
  ✓  Returns at least one result

↳ Reverse geocoding
  GET https://api.tmaps.tn/geocoding/reverse?lat=36.80060045491796&lng=10.191012134812192&lang=fr&api_key=VOTRE_CLE_API [200 OK, 1.09kB, 29ms]
  ✓  Status is 200
  ✓  Returns an address

↳ Nearby search
  GET https://api.tmaps.tn/geocoding/nearby?lat=36.80060045491796&lng=10.191012134812192&radius=1000&categories=restaurant&limit=10&api_key=VOTRE_CLE_API [200 OK, 2.38kB, 28ms]
  ✓  Status is 200
  ✓  Results are sorted by distance

│              assertions │                10 │                 0 │

Dans GitHub Actions

Enregistrez votre clé comme secret du dépôt sous le nom TMAPS_API_KEY, puis ajoutez une étape :

- name: Check the TMaps API
  run: |
    npx newman run postman/TMaps-API.postman_collection.json \
      -e postman/TMaps.postman_environment.json \
      --env-var "api_key=${{ secrets.TMAPS_API_KEY }}"

Votre pipeline échoue désormais dès qu'un endpoint dont votre application dépend ne répond plus comme prévu.

Petite mise en garde : Newman affiche les URL complètes des requêtes, clé comprise. Ne l'utilisez pas avec une vraie clé dans des logs de CI publics, ou masquez la sortie avant.

Ce que contient la collection

Dossier	Requête	Endpoint
Maps	Raster tile (PNG)	`GET https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}`
Maps	Vector style (MapLibre)	`GET https://tiles.tmaps.tn/v-tile/{style}.json`
Geocoding	Forward geocoding	`GET https://api.tmaps.tn/geocoding/forward`
Geocoding	Reverse geocoding	`GET https://api.tmaps.tn/geocoding/reverse`
Geocoding	Nearby search	`GET https://api.tmaps.tn/geocoding/nearby`

Pour aller plus loin

L'API de géocodage pour la Tunisie : www.tmaps.tn/geocoding
L'espace de travail Postman public : postman.com/tmaps-tn/tmaps-api
Les démos dans le navigateur : examples.tmaps.tn
Le code source, sous licence MIT : github.com/tmaps-tn/tmaps-snippets
La documentation : tmaps.tn/documentation

Une question ou une remarque ? Laissez un commentaire ou écrivez-nous à support@tmaps.tn.

Google Maps Alternative for Tunisia: TMaps Compared

Tmaps Tunisia — Mon, 26 Oct 2026 13:42:17 +0000

If you build an app for the Tunisian market, Google Maps is the default choice. Everyone knows it, it covers everything, and you've probably used it before. Then the first invoice arrives, in US dollars, charged to an international card, and you start wondering whether there's an alternative built for Tunisia.

We built TMaps to answer that question. But instead of a sales pitch, this post compares the two the way a developer would: the code, the billing model, real prices on three scenarios, and the cases where Google is still the better pick.

We'll stick to the two most common needs: showing a map and finding an address (geocoding). Routing deserves its own comparison.

1. The code: what does a migration look like?

Showing a map

With Google Maps, you load Google's JavaScript SDK:

<div id="map" style="height: 400px"></div>
<script>
  function initMap() {
    new google.maps.Map(document.getElementById('map'), {
      center: { lat: 36.8002, lng: 10.1815 }, // Tunis
      zoom: 12,
    });
  }
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_KEY&callback=initMap"></script>

With TMaps, you pick an open-source library (Leaflet here) and point it at the TMaps tiles:

<div id="map" style="height: 400px"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  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_TMAPS_KEY', {
    maxZoom: 18,
    attribution: '© TMaps',
  }).addTo(map);
</script>

The real difference isn't the line count. With Google, your code depends on Google's SDK. With TMaps, it depends on Leaflet, OpenLayers or MapLibre, which are open source: if you ever switch tile providers, you don't rewrite your map, you change a URL.

Finding an address

On the Google side, you call the Geocoding API:

const url = new URL('https://maps.googleapis.com/maps/api/geocode/json');
url.search = new URLSearchParams({ address: 'Rue de Marseille, Tunis', region: 'tn', language: 'fr', key: GOOGLE_KEY });
const { results } = await fetch(url).then((r) => r.json());
const { lat, lng } = results[0].geometry.location;

On the TMaps side:

const url = new URL('https://api.tmaps.tn/geocoding/forward');
url.search = new URLSearchParams({ q: 'Rue de Marseille, Tunis', country: 'TN', lang: 'fr', api_key: TMAPS_KEY });
const { results } = await fetch(url).then((r) => r.json());
const { lat, lng } = results[0].geometry.location;

Good news if you're migrating: the coordinates live in the same place, geometry.location. Where they really differ is the address breakdown:

Google returns a generic address_components array where each item has types (locality, administrative_area_level_1…). Mapping those types to Tunisian administrative levels is up to you.
TMaps returns fields named after the Tunisian administrative structure:

"components": {
  "street": "Rue de Marseille",
  "commune": "Habib Thameur",
  "delegation": "Bab El Bhar",
  "governorate": "Tunis",
  "country": "TN"
}

If your delivery form asks for the delegation and the governorate, that's mapping code you don't have to write.

2. Billing: two different units

This is the part you really need to understand before comparing prices.

Google bills a map per load: when a page displays the map, that's one billable event, no matter how many tiles it loads afterwards. Geocoding is billed per request. Each product has a monthly free cap: 10,000 map loads and 10,000 geocoding requests. Beyond that, you pay per thousand, in US dollars.

TMaps counts every successful request as one call: a map tile or a geocoding request. Plans are monthly bundles priced in Tunisian dinars (TND), with a number of calls included. Past your quota, every extra 1,000 calls costs 0.5 TND, and the service is never cut off. The Free plan includes 50,000 calls a month, commercial use included.

So a TMaps map uses several calls per display. We measured it on our demos, with a 1500 × 963 pixel map:

with raster tiles (Leaflet), the first display loads 35 tiles;
with vector tiles (MapLibre), it loads 12.

Tiles already in the browser cache aren't requested again, but to stay on the safe side, we count every display as a first visit.

3. Prices on three scenarios

Sources: the Google Maps Platform price list (updated October 21, 2026) and the TMaps pricing page. To compare, we use about 3 TND per US dollar (Central Bank of Tunisia rate on October 8, 2026). Google prices exclude taxes and international payment fees.

Scenario 1: a small showcase site

3,000 map displays and 1,000 address searches per month, commercial use.

Google: $0. Everything fits in the free caps.
TMaps: 0 TND (Free plan, commercial use allowed). With vector tiles, 3,000 displays × 12 tiles + 1,000 geocoding requests is about 37,000 calls, under the plan's 50,000.

A tie, then. The difference shows up as traffic grows: the TMaps Free plan covers about 4,000 vector map displays a month (or 1,400 with raster tiles), while Google stays free up to 10,000 map loads. In between, Google costs nothing and TMaps moves to the Starter plan at 79 TND a month. No point pretending otherwise.

Scenario 2: a delivery app

200,000 geocoding requests per month (entering and checking customer addresses), not much map display.

Google: $850/month, about 2,550 TND. The first 10,000 are free, then 90,000 at $5 per thousand and 100,000 at $4 per thousand.
TMaps: 79 TND/month (Starter plan, 200,000 calls included).

This is where the gap is widest: geocoding is a big line item on a Google invoice, and it's part of the bundle with TMaps.

Scenario 3: an e-commerce site

30,000 map displays and 20,000 address searches per month.

Google: $190/month, about 570 TND. 20,000 paid map loads at $7 per thousand, plus 10,000 paid geocoding requests at $5 per thousand.
TMaps with vector tiles (MapLibre): 229 TND/month (Growth plan). 30,000 × 12 tiles + 20,000 geocoding requests is about 380,000 calls, under the plan's 750,000.
TMaps with raster tiles (Leaflet): 599 TND/month (Business plan). At 35 tiles per display, you reach about 1,070,000 calls.

This one shows how much the technical choice matters: with vector tiles, TMaps costs about 2.5 times less than Google; with raster tiles, it ends up slightly more expensive. If your site shows a lot of maps, go vector.

Scenario	Google	TMaps
Small showcase site (3,000 maps a month)	$0	0 TND
Mid-size site (8,000 maps a month)	$0	79 TND
Delivery app	≈ 2,550 TND ($850)	79 TND
E-commerce, vector maps	≈ 570 TND ($190)	229 TND
E-commerce, raster maps	≈ 570 TND ($190)	599 TND

4. What the price list doesn't show

The street reference. This is probably the biggest difference, and no price list shows it. The TMaps database holds more than 120,000 roads, with a verified name for 72% of road segments on average. According to our coverage measurement, published and recomputed every week on the map coverage page (in French), TMaps shows on average twice as many named roads as Google Maps across Tunisia's 24 governorates, especially in suburban areas and new neighbourhoods. Streets are named in French and Arabic, including the informal local names people actually use.

For a delivery app, that's very concrete: a street with no name is an address your customer can't type, and a driver who has to call to ask for directions. This is our own measurement, not an independent audit, so check it on your area: the side-by-side pages show Google on the left and TMaps on the right, for example in Ben Arous.

Currency. Google bills in US dollars, through a billing account and an international payment method, so every move of the dinar changes your invoice. TMaps bills in dinars, with no exchange-rate exposure.

Overages. With TMaps, a traffic spike never takes the service down: it's billed at the overage rate on the next invoice. With Google, pay-as-you-go has no ceiling by default, so set quotas and budget alerts.

Arabic and Arabizi. Tunisian addresses get typed in French, in Arabic script and in Arabizi (nahj, 9asr said). Another post in this series shows how to build an address search that handles all three, and you can try it in the address search demo: type 9asr said.

Support. A team based in Tunis, working Tunisian hours, on one side; the support desk of a global platform on the other.

5. When to stay on Google Maps

An honest comparison also has to say when not to switch:

Your traffic fits in Google's free caps but not in the TMaps Free plan (roughly 4,000 to 10,000 maps a month): with Google, you won't pay anything.
Your app covers several countries, and Tunisia is just one market among others.
You rely on services TMaps doesn't offer: Street View, Google's global places database with reviews and photos, or mobile SDKs your team already knows.

On the other hand, TMaps makes sense when Tunisia is your main market, when your customers live in new or suburban neighbourhoods where named streets make the difference, when you geocode a lot of addresses, when you want a fixed invoice in dinars, or when you'd rather build your map on open-source libraries.

See for yourself

Compare both maps in Ben Arous, Sfax or Nabeul
Road coverage, governorate by governorate: map coverage (in French)
Try the API without writing code in the Postman collection
Live demos and their code: examples.tmaps.tn

Prices quoted here are from October 2026 and can change: always check the official price lists before you decide. Questions about a migration? Leave a comment or write to support@tmaps.tn.

Migrer de Google Maps vers TMaps en Tunisie

Tmaps Tunisia — Mon, 26 Oct 2026 10:33:40 +0000

Vous avez une application tunisienne qui tourne sur Google Maps et vous envisagez de passer à TMaps. Bonne nouvelle : pour les deux usages les plus courants, afficher une carte et transformer une adresse en coordonnées, la migration tient en quelques fichiers. Cet article passe en revue ce qui change dans le code, ce qui ne change pas, et le piège de facturation à connaître avant de mettre en production.

Ce guide ne parle pas d'itinéraires : on se limite à la carte et au géocodage.

Étape 1 : remplacer le SDK Google par Leaflet

Côté Google, une carte typique ressemble à ceci :

<div id="map" style="height: 400px"></div>
<script>
  function initMap() {
    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 36.8002, lng: 10.1815 },
      zoom: 12,
    });
    new google.maps.Marker({ position: { lat: 36.8002, lng: 10.1815 }, map });
  }
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=VOTRE_CLE_GOOGLE&callback=initMap"></script>

TMaps ne fournit pas de SDK propriétaire. On garde une bibliothèque open source et on lui donne l'URL des tuiles TMaps. Avec Leaflet, l'équivalent s'écrit :

<div id="map" style="height: 400px"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const map = L.map('map').setView([36.8002, 10.1815], 12);
  L.tileLayer('https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=VOTRE_CLE_TMAPS', {
    maxZoom: 18,
    attribution: '© TMaps',
  }).addTo(map);
  L.marker([36.8002, 10.1815]).addTo(map);
</script>

Quelques correspondances utiles pendant la réécriture :

Google Maps JS	Leaflet
`new google.maps.Map(el, { center, zoom })`	`L.map(el).setView([lat, lng], zoom)`
`new google.maps.Marker({ position, map })`	`L.marker([lat, lng]).addTo(map)`
`{ lat: 36.8, lng: 10.18 }`	`[36.8, 10.18]`
chargement asynchrone et `callback=initMap`	script classique, la carte existe tout de suite

Plus de callback global, plus de clé Google dans le HTML. Et surtout, votre code ne dépend plus d'un fournisseur : changer de source de tuiles un jour reviendra à modifier une URL.

Étape 2 : passer au vectoriel (vraiment)

Le raster avec Leaflet est la façon la plus directe de remplacer Google, mais ce n'est pas celle que nous conseillons pour la production. Avec MapLibre GL JS et les tuiles vectorielles, la migration reste aussi courte :

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

Piège classique en venant de Google : MapLibre attend [longitude, latitude]. Si votre carte s'ouvre au milieu de l'océan, c'est presque toujours ça.

La raison de ce conseil tient à la facturation, détaillée plus bas.

Étape 3 : migrer le géocodage

Ici, le changement est minime. Avant :

const url = new URL('https://maps.googleapis.com/maps/api/geocode/json');
url.search = new URLSearchParams({ address: 'Rue de Marseille, Tunis', region: 'tn', language: 'fr', key: GOOGLE_KEY });
const { results } = await fetch(url).then((r) => r.json());
const { lat, lng } = results[0].geometry.location;

Après :

const url = new URL('https://api.tmaps.tn/geocoding/forward');
url.search = new URLSearchParams({ q: 'Rue de Marseille, Tunis', country: 'TN', lang: 'fr', api_key: TMAPS_KEY });
const { results } = await fetch(url).then((r) => r.json());
const { lat, lng } = results[0].geometry.location;

Quatre paramètres renommés (address devient q, region devient country, language devient lang, key devient api_key) et c'est tout. La dernière ligne est strictement identique : les coordonnées sont dans geometry.location, comme chez Google. Le code qui place un marqueur ou enregistre une position en base n'a pas à bouger.

Étape 4 : simplifier le découpage de l'adresse

C'est là que la migration fait gagner du code. Chez Google, l'adresse détaillée arrive sous forme de tableau générique address_components, et il faut aller chercher chaque niveau par son type :

const pick = (type) =>
  results[0].address_components.find((c) => c.types.includes(type))?.long_name;

const governorate = pick('administrative_area_level_1');
const city = pick('locality');
// et la délégation ? À vérifier au cas par cas selon l'adresse...

Ce code de correspondance est fragile : les types génériques ne collent pas toujours aux niveaux administratifs tunisiens, et on finit avec des cas particuliers. TMaps renvoie directement des champs nommés selon le découpage du pays :

"components": {
  "street": "Rue de Marseille",
  "commune": "Habib Thameur",
  "delegation": "Bab El Bhar",
  "governorate": "Tunis",
  "country": "TN"
}

La fonction pick disparaît :

const { commune, delegation, governorate } = results[0].components;

Pour un formulaire de livraison qui calcule ses frais par délégation, c'est une source de bugs en moins.

Le piège : l'unité de facturation n'est pas la même

Avant de comparer des factures, il faut comprendre ce qu'on compte.

Google facture la carte au chargement : une page qui affiche une carte compte pour un, quel que soit le nombre de tuiles téléchargées ensuite.
TMaps compte chaque requête réussie : une tuile, c'est un appel ; un géocodage, c'est un appel.

Une carte TMaps consomme donc plusieurs appels par affichage. Mesuré sur nos démos avec une carte de 1500 × 963 pixels, le premier affichage charge environ 35 tuiles en raster (Leaflet) contre 12 en vectoriel (MapLibre). Les tuiles déjà en cache dans le navigateur ne sont pas redemandées, mais pour estimer votre consommation, comptez chaque affichage comme une première visite.

D'où le conseil de l'étape 2 : à trafic égal, le vectoriel divise à peu près par trois le nombre d'appels liés à la carte. Si vous migrez une application qui affiche beaucoup de cartes, c'est le réglage qui pèse le plus sur la facture. Le géocodage, lui, reste à un appel par requête dans les deux cas.

Et les prix ?

On ne refait pas le calcul ici. Nous avons publié un comparatif complet de Google Maps et TMaps avec les prix en dinars sur plusieurs scénarios (petite vitrine, livraison, e-commerce), le référentiel des rues, et les cas où il vaut mieux rester sur Google. Les grilles de TMaps sont sur la page tarifs.

Avant de migrer, regardez aussi la carte elle-même sur votre zone : les pages « Comparez vous-même » affichent Google et TMaps côte à côte, par exemple sur Ben Arous.

Checklist de migration

Remplacer le script Google par Leaflet, ou mieux, MapLibre avec les tuiles vectorielles.
Inverser l'ordre des coordonnées si vous passez à MapLibre ([lng, lat]).
Renommer les paramètres du géocodage, garder la lecture de geometry.location.
Supprimer le code de correspondance des address_components au profit de components.
Estimer la consommation en tuiles par affichage, pas en chargements de carte.

Les démos et leur code sont sur examples.tmaps.tn, et le dépôt tmaps-snippets contient les exemples de cette série. Une question sur votre migration ? Laissez un commentaire ou écrivez-nous à support@tmaps.tn.

MapLibre GL Vector Tiles with TMaps: Dark Mode and 3D

Tmaps Tunisia — Fri, 23 Oct 2026 13:28:05 +0000

Raster tiles are pictures of the map. They're simple and they work everywhere, but what you get is what you get. Vector tiles send the map data itself (roads, buildings, labels) and let the browser draw it. That means the map stays sharp on any screen, zooming is smooth, you can rotate and tilt it, and you can restyle it instantly.

In this post we'll use TMaps vector tiles with MapLibre GL JS, the open-source WebGL map library, and build a little style switcher with four styles.

Live demo: examples.tmaps.tn/03-vector-maplibre-styles

How TMaps vector tiles work

You don't request the tiles yourself. Each style is a JSON document that follows the Mapbox Style Specification:

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

That JSON lists the tile sources, the fonts (glyphs), the icons (sprites) and how every layer should be drawn. MapLibre reads it and fetches the rest on its own. There are four styles to choose from:

Style	Good for
`streets`	Everyday reference map, easy to read streets and points of interest
`dark`	Dashboards and night mode
`terrain`	Relief, rivers and topography
`sunny`	Tourism and retail, warmer colours

1. A first vector map

You'll need a TMaps API key from the TMaps console, with your domain (and localhost) in its Authorized Domains.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Vector map of Tunisia</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.0/dist/maplibre-gl.css">
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.6.0/dist/maplibre-gl.js"></script>
  <style>
    html, body, #map { height: 100%; margin: 0; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    const API_KEY = 'YOUR_API_KEY';

    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, as [lng, lat]
      zoom: 12,
      maxZoom: 18,
    });

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

One thing to watch: MapLibre takes [longitude, latitude], the opposite of Leaflet's [lat, lng]. Mixing them up is the most common reason a map opens in the middle of the ocean.

2. Switch styles without reloading the map

map.setStyle(url) swaps the style but keeps the map, its position and its controls. A basic switcher is only a few lines:

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);
}

Here's the same view of Tunis in the other three styles. First dark, which works well on dashboards:

Then terrain:

And sunny:

Follow the user's dark mode

Since switching is instant, you can simply follow the operating system's theme:

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

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

3. Tilt and rotate

The map is drawn with WebGL, so you can tilt and rotate it, which raster tiles simply can't do:

map.jumpTo({
  center: [10.179, 36.799], // Medina of Tunis
  zoom: 15.5,
  pitch: 60,     // tilt, in degrees
  bearing: -25,  // rotation, in degrees
});

Users can do the same thing themselves with a right-click drag on desktop, or two fingers on a phone.

4. Customize a style

The style JSON is yours to tweak. Download it, change the layers (colours, fonts, which labels show up at which zoom), and host your own copy. Just keep two things in mind:

the tile URLs in sources must still point to tiles.tmaps.tn with your api_key, because that's how your usage is authenticated;
you're free to change layers, and also glyphs and sprite if you host your own fonts and icons.

Raster or vector?

	Raster	Vector
Libraries	Leaflet, OpenLayers, any XYZ client	MapLibre GL JS, MapLibre Native
High-density screens	Blurry (no @2x yet)	Always sharp
Changing the style	Needs new tiles	Instant, in the browser
Rotate and tilt	No	Yes
Older devices	Very light	Needs WebGL

For a simple map embedded in a page, raster tiles with Leaflet are hard to beat (that's the first post of this series). When the map is the heart of your product, go vector.

Going further

About TMaps: Tunisia maps, geocoding and routing API
Live demos: examples.tmaps.tn
Source code, MIT licensed: github.com/tmaps-tn/tmaps-snippets
Postman collection: postman.com/tmaps-tn/tmaps-api
Vector tiles documentation: tmaps.tn/documentation

Questions or feedback? Leave a comment or write to support@tmaps.tn.