La page « Nos agences » avec une liste d'adresses et un numéro de téléphone, tout le monde en a une. Ce que le visiteur veut, lui, c'est savoir si l'agence de Sousse est près de la gare ou à l'autre bout de la ville, et comment y aller depuis chez lui. C'est le rôle d'une carte interactive, et c'est moins compliqué à mettre en place qu'il n'y paraît, à condition d'éviter les erreurs qu'on voit sur la moitié des sites tunisiens.
Choisir le fond de carte de la Tunisie
Le fond de carte, c'est la couche de base : rues, quartiers, littoral, noms de lieux. C'est lui qui donne le ton. Pour un site vitrine, on prend en général un style clair et discret, où vos marqueurs ressortent. Pour un annuaire ou un site immobilier, un fond plus détaillé avec les noms de rues est plus utile.
Deux questions à se poser avant de choisir. Est-ce que le fond couvre correctement les zones où sont vos clients ? Un fond qui s'arrête aux grands axes de Sfax ou qui ignore les nouveaux quartiers de Raoued ou de la Soukra affichera vos agences au milieu d'une zone vide. Et dans quelle langue ? Un site en arabe avec une carte dont tous les noms sont en français, c'est un détail qui se voit. Les fonds TMaps existent en français et en arabe, dans plusieurs styles, et couvrent les 24 gouvernorats ; vous trouverez l'aperçu sur la page cartes et un exemple grandeur nature sur notre carte de la Tunisie.
Sur la technique, vous aurez le choix entre des tuiles raster (des images) et des tuiles vectorielles (des données que le navigateur dessine lui-même). Le vectoriel est plus léger à l'usage, se restyle à volonté et reste net sur les écrans haute résolution. On a détaillé la comparaison dans tuiles vectorielles ou raster ; pour un site web moderne, le vectoriel avec une bibliothèque comme MapLibre est devenu le choix par défaut.
Placer les marqueurs et afficher vos points de vente
Un marqueur, c'est un point (latitude, longitude) et une petite fiche. L'erreur classique consiste à obtenir ces coordonnées en géocodant « Avenue Habib Bourguiba, Sousse » une fois, à la main, et à ne jamais vérifier. Résultat : le marqueur tombe au milieu de l'avenue, parfois dans une autre ville qui a une avenue du même nom, et un client se retrouve devant un immeuble vide. Prenez le temps de vérifier chaque point sur la carte. Si vous avez plus d'une dizaine de points de vente, faites-les géocoder par un outil correct puis relisez les résultats un par un. Une fois validées, ces coordonnées se stockent dans votre base et vous n'aurez plus à les recalculer.
Sur la fiche elle-même, restez sobre : nom de l'agence, adresse, horaires, téléphone en lien cliquable, et un bouton « itinéraire ». Pour un annuaire avec des centaines de points (pharmacies de garde, restaurants, agences bancaires), regroupez les marqueurs proches en grappes quand on dézoome, sinon la map de la Tunisie ressemble à une éruption de boutons.
L'itinéraire vers le magasin
Le bouton « itinéraire » est ce que les visiteurs utilisent le plus, et le plus souvent depuis un téléphone. Deux approches possibles. La plus simple : ouvrir l'application de navigation du téléphone avec la destination pré-remplie. Aucune API à appeler, ça marche partout. La plus intégrée : demander la position du visiteur, calculer le trajet et le dessiner sur votre propre carte, avec la distance et le temps. C'est plus agréable et cela garde le visiteur sur votre site, mais cela demande une clé API et un peu de code. On le réserve aux sites où la carte est centrale, comme un réseau de magasins ou une plateforme immobilière.
On l'a vu chez une enseigne d'électroménager avec une dizaine de points de vente entre Tunis, Sousse et Sfax : le simple fait d'afficher « à 12 minutes de vous » sur la fiche de l'agence la plus proche a rendu cette page plus utile que tout le reste du site. Ce n'est pas un gros développement, c'est surtout une question de bien placer l'information.
Les erreurs qui reviennent tout le temps
La carte qui plombe la page. Charger une bibliothèque cartographique complète, dix couches et des tuiles en très haute résolution sur une page d'accueil, c'est ajouter des secondes de chargement pour un élément que la moitié des visiteurs ne regardera pas. Chargez la carte à la demande (quand elle entre dans l'écran, ou au clic), limitez la zone au territoire tunisien et les niveaux de zoom à ce qui est utile. Sur une page « Nous trouver », personne n'a besoin de dézoomer jusqu'à voir l'Europe.
La clé API en clair. Elle est forcément visible dans le code du navigateur, c'est inévitable pour un site public. Ce qui n'est pas inévitable, c'est de la laisser sans restriction. Limitez-la à vos domaines et surveillez la consommation. Une clé sans restriction copiée depuis votre page peut finir dans le projet de quelqu'un d'autre, et c'est vous qui recevez la facture.
Les marqueurs mal placés, on en a parlé. La plupart du temps, c'est une adresse mal géocodée, souvent parce qu'elle a été saisie sans le gouvernorat ou avec une orthographe hésitante (Ben Arous, Ben-Arous, Benarous). Un géocodeur qui connaît les variantes locales aide, mais rien ne remplace un contrôle visuel avant la mise en ligne.
Et le style qui jure. Une carte aux couleurs par défaut, vert vif et bleu criard, au milieu d'un site à la charte sobre, ça se remarque tout de suite. Avec des tuiles vectorielles, on ajuste la palette (couleurs des routes, des bâtiments, de l'eau, police des étiquettes) pour qu'elle s'accorde au reste de la page. Ce n'est pas un caprice de designer : une carte qui a l'air de faire partie du site inspire davantage confiance qu'un widget collé au milieu. La marche à suivre est dans personnaliser le style de carte.
Penser au mobile avant le reste
Une grande partie des visites sur un site tunisien de commerce ou d'annuaire se fait depuis un téléphone, souvent sur une connexion mobile moyenne. Cela change plusieurs choses.
D'abord la taille. Une carte qui prend tout l'écran sur un téléphone capture le geste de défilement : l'utilisateur veut descendre dans la page, la carte se déplace à la place, et il reste coincé. Donnez-lui une hauteur raisonnable, activez le déplacement à deux doigts, et gardez les boutons de zoom assez gros pour un pouce. Ensuite le poids : sur une connexion 4G moyenne à Kairouan ou à Gabès, les tuiles vectorielles bien mises en cache font une vraie différence par rapport à des images lourdes.
Enfin l'accessibilité, qu'on oublie presque toujours. Une carte n'est pas lisible par un lecteur d'écran, et pas non plus par un moteur de recherche. Gardez la liste des agences en texte sous la carte, avec l'adresse complète et le téléphone. C'est utile pour les personnes malvoyantes, pour le référencement local, et pour le visiteur pressé qui veut juste copier l'adresse.
Quand vous êtes prêt à intégrer votre première carte de la Tunisie, la documentation donne les exemples d'intégration web pas à pas. Comptez une après-midi pour une page « Nous trouver » propre, marqueurs vérifiés compris.
