Tmaps Tunisia

Posted on Nov 2

Carte de la Tunisie sur votre site web en 10 minutes

#javascript #leaflet #webdev #tutorial

Vous avez une boutique, un restaurant, une agence ou un cabinet, et vous aimeriez que vos clients voient où vous trouver directement sur votre site ? Ou vous développez une application qui a besoin d'une carte de la Tunisie à jour, avec les vrais noms de rues ?

Dans ce tutoriel, on part d'une page vide pour arriver, en une dizaine de minutes, à une carte interactive avec un marqueur sur votre adresse. Pas de framework, rien à installer : un seul fichier HTML suffit.

Le résultat est visible ici : examples.tmaps.tn/01-raster-leaflet

Ou testez-la directement ici, et copiez-la sur CodePen (bouton Fork) pour modifier le code :

Les outils

On utilise Leaflet, la bibliothèque de cartes JavaScript la plus répandue, légère et gratuite. Pour le fond de carte, on prend TMaps : il couvre le monde entier, avec beaucoup plus de détails sur la Tunisie (rues, quartiers, routes nationales et régionales).

De 0 à 3 minutes : créer une clé API

Créez un compte sur la console TMaps.
Dans API Keys, cliquez sur Create API Key. Vous obtenez une clé qui commence par ak_.
Dans Authorized Domains, ajoutez les domaines où la carte va s'afficher, par exemple www.monsite.tn, et localhost pour vos tests sur votre ordinateur.

Deux pièges à éviter. Les jokers ne sont pas acceptés : *.monsite.tn ne marche pas, il faut ajouter chaque sous-domaine (www.monsite.tn, boutique.monsite.tn…). Et les requêtes doivent passer en HTTPS, le HTTP simple est refusé.

Votre clé sera visible dans le code de la page. Pas d'inquiétude, c'est normal pour une carte affichée dans le navigateur : c'est la liste des domaines autorisés qui empêche quelqu'un d'autre de l'utiliser sur son propre site.

De 3 à 7 minutes : la carte

Créez un fichier index.html, collez ce code et remplacez VOTRE_CLE_API par votre clé :

<!doctype html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Où nous trouver</title>
  <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>
  <style>
    #map { height: 450px; border-radius: 12px; }
  </style>
</head>
<body>
  <h1>Où nous trouver</h1>
  <div id="map"></div>

  <script>
    const API_KEY = 'VOTRE_CLE_API';

    // Centre de la carte [latitude, longitude] et niveau de zoom
    const map = L.map('map').setView([36.8002, 10.1815], 15);

    L.tileLayer(`https://tiles.tmaps.tn/r-tile/{z}/{x}/{y}?api_key=${API_KEY}`, {
      maxZoom: 18,
      attribution: '© <a href="https://www.tmaps.tn">TMaps</a>',
    }).addTo(map);
  </script>
</body>
</html>

Pour tester, ouvrez la page avec un petit serveur local plutôt qu'en double-cliquant sur le fichier. Dans le dossier du fichier :

npx serve .
# ou
python3 -m http.server 8000

Allez ensuite sur http://localhost:3000 (ou :8000). La carte s'affiche, et vous pouvez zoomer jusqu'au niveau de la rue :

De 7 à 9 minutes : un marqueur sur votre adresse

Ajoutez ces quelques lignes juste après .addTo(map); :

L.marker([36.8002, 10.1815])
  .addTo(map)
  .bindPopup('<b>Ma Boutique</b><br>Avenue Habib Bourguiba, Tunis')
  .openPopup();

Pour connaître les coordonnées de votre adresse, le plus simple est de la taper dans la démo de recherche d'adresse TMaps, qui affiche la latitude et la longitude. Un clic droit sur n'importe quelle carte en ligne fait aussi l'affaire.

Attention à l'ordre : Leaflet attend [latitude, longitude]. En Tunisie, la latitude tourne autour de 30 à 37 et la longitude autour de 7 à 11. Si votre marqueur atterrit dans la mer, vous avez très probablement inversé les deux.

À 10 minutes : la mise en ligne

Envoyez index.html sur votre hébergement, ou copiez le bloc <div id="map"> et les deux <script> dans une page existante (WordPress, site vitrine…). Vérifiez juste que le domaine du site figure bien dans les Authorized Domains de votre clé.

Si la carte reste grise, ouvrez la console du navigateur (F12) et regardez l'onglet Réseau. Un code 401 veut dire que la clé est absente ou révoquée. Un 403 veut dire que le domaine n'est pas autorisé, ou que la page est servie en HTTP au lieu de HTTPS.

Pour aller plus loin

TMaps : API de cartographie et de géocodage pour la Tunisie, une alternative à Google Maps
Une carte vectorielle avec mode sombre, grâce à MapLibre GL : la démo
La recherche d'adresse (géocodage) : la démo
Un formulaire de livraison avec saisie d'adresse et pin sur la carte : la démo
Tout le code source, sous licence MIT : github.com/tmaps-tn/tmaps-snippets
La documentation : tmaps.tn/documentation

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

DEV Community