Carte vectorielle en Tunisie : quand passer à MapLibre ?

Dans beaucoup d'applications tunisiennes, la carte est l'écran que les utilisateurs regardent le plus longtemps. C'est là que le client suit son livreur, que l'agent immobilier montre le quartier d'un appartement, que le responsable logistique surveille ses camions entre Tunis et Sfax. Et pourtant, c'est souvent l'écran le moins travaillé : un fond de carte standard, posé tel quel, qui ressemble à celui de tous les concurrents.

Passer à une carte vectorielle avec MapLibre GL JS ne se résume pas à un choix de bibliothèque. C'est une décision produit, qui touche à votre image de marque, au confort de vos équipes et à votre facture d'API. Cet article fait le tour de ces choix. Si vous cherchez le code ligne par ligne, il est dans notre tutoriel pas à pas avec tout le code, sur dev.to.

Ce que vos utilisateurs voient vraiment changer

Avec des tuiles raster, le serveur vous envoie des images déjà dessinées. Avec des tuiles vectorielles, il envoie les données (routes, bâtiments, noms de lieux) et c'est le navigateur qui dessine la carte. Nous avons détaillé la différence technique dans notre comparatif tuiles vectorielles ou raster. Ici, ce qui nous intéresse, c'est ce que l'utilisateur final remarque :

le texte et les routes restent nets, quel que soit l'écran ;
le zoom est continu, sans ce moment où l'image floue attend la suivante ;
la carte peut pivoter et s'incliner ;
le style change en un instant, sans recharger la page.

Chacun de ces points ouvre un usage concret. Prenons-les un par un.

Démo MapLibre avec le sélecteur de styles TMaps

Une carte qui porte votre identité visuelle

TMaps propose quatre styles vectoriels prêts à l'emploi, chacun servi sous la forme d'un document JSON à l'adresse https://tiles.tmaps.tn/v-tile/{style}.json?api_key=…. Ils ne répondent pas aux mêmes besoins.

Le style streets est la carte de référence. C'est celui qu'on choisira pour le localisateur de magasins d'une chaîne de pharmacies ou d'une enseigne de prêt-à-porter : les rues et les points d'intérêt sont lisibles, rien ne détourne l'attention des points de vente.

Le style terrain met en avant le relief et les cours d'eau. Il prend tout son sens pour une application de randonnée en Kroumirie, un outil de suivi agricole dans la vallée de la Medjerda ou une plateforme qui doit montrer la dorsale et les reliefs du nord-ouest.

Style terrain de TMaps sur Tunis

Le style sunny, aux couleurs plus chaudes, convient au tourisme et au commerce : une maison d'hôtes à Djerba, un guide des plages du Cap Bon, une application de réservation à Hammamet.

Style sunny de TMaps sur Tunis

Si aucun ne colle exactement à votre charte, le JSON du style se modifie. Vous pouvez reprendre les couleurs de votre logo, changer les polices, masquer les couches qui n'intéressent pas vos utilisateurs, puis héberger votre version. Une seule règle à respecter : les URL des tuiles, dans la partie sources, doivent continuer à pointer vers tiles.tmaps.tn avec votre clé, puisque c'est ce qui authentifie votre consommation. Pour la méthode de personnalisation elle-même, notre guide pour personnaliser le style d'une carte entre dans le détail.

Le tableau de bord sombre et le mode nuit

Imaginez une salle de dispatch qui tourne jusqu'à minuit, avec trois écrans allumés en permanence. Une carte blanche y devient vite pénible : elle éblouit, elle fatigue, et les marqueurs colorés des véhicules s'y distinguent mal. Le style dark règle ce problème. Les routes passent au second plan, vos données ressortent.

Style dark de TMaps, adapté aux tableaux de bord

Comme le changement de style est instantané en vectoriel, vous pouvez aussi suivre le thème choisi par l'utilisateur sur son téléphone ou son ordinateur. Quelques lignes suffisent :

const styleUrl = (nom) => `https://tiles.tmaps.tn/v-tile/${nom}.json?api_key=${API_KEY}`;
const sombre = window.matchMedia('(prefers-color-scheme: dark)');
const appliquer = () => map.setStyle(styleUrl(sombre.matches ? 'dark' : 'streets'));
sombre.addEventListener('change', appliquer);

Pour une application de livraison consultée le soir, ce détail compte plus qu'on ne le croit : l'utilisateur qui a mis tout son téléphone en sombre ne se prend plus un écran blanc en pleine figure en ouvrant le suivi de sa commande.

La 3D au service de l'immobilier et du tourisme

La carte vectorielle est dessinée en WebGL, ce qui permet de l'incliner et de la faire pivoter. Avec des tuiles raster, c'est tout simplement impossible.

Pour un promoteur qui vend un programme aux Berges du Lac, une vue inclinée raconte mieux le quartier qu'une vue de dessus : on comprend l'orientation, la proximité du lac, les axes qui mènent au centre. Nous avons consacré un article entier à la cartographie pour l'immobilier en Tunisie si ce secteur vous concerne.

Côté tourisme, une médina vue en perspective donne envie de s'y promener, là où un plan à plat ressemble à un labyrinthe.

Médina de Tunis en vue inclinée à 60 degrés

Vos visiteurs peuvent aussi manipuler la vue eux-mêmes : clic droit maintenu sur ordinateur, deux doigts sur téléphone. Prévoyez simplement un bouton pour revenir à la vue nord en haut, certains utilisateurs se perdent une fois la carte tournée.

Écrans haute densité : la netteté se remarque

Une grande partie de vos clients consulte votre site sur un smartphone récent, avec un écran à haute densité de pixels. Sur ces écrans, une tuile raster standard paraît légèrement floue, et les tuiles raster TMaps n'existent pas encore en version @2x. Les tuiles vectorielles, elles, sont redessinées à la résolution exacte de l'écran. Le nom d'une rue reste aussi net sur un iPhone que sur un vieux portable.

C'est le genre de différence que personne ne formule mais que tout le monde ressent : une carte nette donne une impression de produit soigné.

Combien d'appels coûte un affichage de carte ?

C'est la question que les décideurs posent rarement au début, et qu'ils découvrent sur la première facture. Chez TMaps, chaque tuile chargée compte pour un appel. Or le nombre de tuiles nécessaires pour remplir l'écran dépend du format.

Pour une carte de 1500 × 963 pixels, le premier affichage demande environ 12 tuiles vectorielles, contre environ 35 tuiles raster. Nous l'avons mesuré sur nos démos.

Faites le calcul sur votre trafic. Si votre page avec carte est affichée 10 000 fois par mois, le premier affichage seul représente environ 120 000 appels en vectoriel, contre environ 350 000 en raster. Les déplacements et les zooms ajoutent ensuite des tuiles dans les deux cas, mais l'écart de départ reste. Pour estimer votre budget, la page tarifs donne les volumes inclus dans chaque offre.

Les pièges à connaître avant de vous lancer

Le premier concerne le matériel. Le rendu vectoriel a besoin de WebGL. Tous les navigateurs récents le gèrent, mais certains postes anciens, en administration ou en entreprise, peuvent poser problème. Si votre public utilise ce type de machines, testez avant de basculer.

Le deuxième est un classique : MapLibre attend les coordonnées dans l'ordre [longitude, latitude], l'inverse de Leaflet. Une équipe qui migre depuis Leaflet sans y penser voit Tunis s'afficher quelque part en Éthiopie, et perd une demi-journée à comprendre pourquoi.

Le troisième touche à la clé API. Elle doit lister vos domaines autorisés dans la console TMaps, sans oublier localhost pour les tests en local. Une carte qui reste grise en développement vient très souvent de là.

Le dernier vaut pour ceux qui personnalisent leur style : en réécrivant le JSON, il est facile de supprimer par erreur la clé des URL de tuiles. La carte s'affiche alors vide, sans message très explicite.

Raster ou vectoriel : comment trancher

Posez-vous une question simple : la carte est-elle un accessoire ou le cœur de votre produit ?

Si c'est une petite carte « Nous trouver » sur une page contact, les tuiles raster avec Leaflet restent imbattables de simplicité. Elles fonctionnent partout, même sur un matériel très ancien.

Si la carte est l'écran principal de votre application, si elle doit porter votre identité, suivre le mode sombre, s'incliner pour montrer un bien immobilier ou rester parfaitement nette sur mobile, le vectoriel s'impose. Et comme on l'a vu, il consomme aussi moins d'appels au premier affichage.