DEV Community

Cover image for Migrer de Google Maps vers TMaps en Tunisie
Tmaps Tunisia
Tmaps Tunisia

Posted on

Migrer de Google Maps vers TMaps en Tunisie

#googlemaps #javascript #webdev #api

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Carte Leaflet de Tunis avec les tuiles TMaps

É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);
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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...
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

La fonction pick disparaît :

const { commune, delegation, governorate } = results[0].components;
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)