Comment ajouter une carte OpenStreetMap (Leaflet) sur un site Turbosite

OpenStreetMap (OSM) est une base de données cartographique gratuite, une alternative ouverte à Google Maps et Yandex Maps. Leaflet est la bibliothèque JavaScript la plus populaire pour afficher OSM sur un site web. Entièrement gratuit, sans clés API, sans limites. Idéal pour les projets où il est important d’éviter les services payants. L’installation prend 5 à 10 minutes.

Ce dont vous aurez besoin

Les coordonnées du lieu que vous souhaitez afficher (latitude/longitude) — vous pouvez les trouver sur openstreetmap.org (clic droit sur le point → « Show address »)
Un site publié sur Turbosite
5 à 10 minutes

Étape 1. Obtenir les coordonnées de votre lieu

Ouvrez openstreetmap.org.
Recherchez l’adresse ou l’organisation souhaitée.
Faites un clic droit sur le point souhaité → « Show address ».
Les coordonnées au format 52.5200,13.4050 (latitude, longitude) apparaîtront dans la barre d’adresse. Notez-les.

Étape 2. Préparer le code HTML

Contrairement à Google Maps et 2GIS, OSM ne dispose pas de constructeur iframe prêt à l’emploi — la carte se connecte via la bibliothèque Leaflet. Voici le code prêt à l’emploi que vous pouvez utiliser :

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<div id="map" style="height: 400px; width: 100%;"></div>

<script>
  var map = L.map('map').setView([52.5200, 13.4050], 15);

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  L.marker([52.5200, 13.4050]).addTo(map)
    .bindPopup('Nous sommes ici')
    .openPopup();
</script>

Ce qu’il faut personnaliser :

52.5200, 13.4050 — remplacez les deux occurrences par vos coordonnées (latitude, longitude).
15 — niveau de zoom de la carte (13–17 pour une ville ; plus le chiffre est élevé, plus le zoom est proche).
Nous sommes ici — le texte dans la fenêtre contextuelle (popup) au-dessus du marqueur.
height: 400px — hauteur de la carte.

Étape 3. Insérer le code dans Turbosite

La carte apparaît à un endroit précis de la page.

Ouvrez votre site dans Turbosite.
Ajoutez un bloc « Code HTML » à l’endroit souhaité sur la page (généralement dans le bloc « Contacts »).
Collez le code Leaflet préparé.
Enregistrez les modifications.
Publiez le site.

📷 [capture d’écran Turbosite — à ajouter : bloc Code HTML dans le corps de la page avec le code Leaflet].

Étape 4. Vérifier que la carte fonctionne

Ouvrez le site publié.
Faites défiler jusqu’au bloc contenant la carte — la carte OpenStreetMap avec le marqueur devrait se charger.
Cliquez sur le marqueur — une fenêtre contextuelle avec votre texte devrait apparaître.
Vérifiez le zoom (molette de la souris ou pincement sur mobile).

Questions fréquentes

Pourquoi utiliser OSM au lieu de Google Maps ? Les principales raisons : entièrement gratuit sans limites ni clés API, aucune inscription requise, aucun risque de coupure de service. L’inconvénient est que les données peuvent être moins à jour dans les petites régions.

Est-il possible d’ajouter plusieurs marqueurs ? Oui, répétez L.marker([latitude, longitude]).addTo(map).bindPopup('Texte'); pour chaque marqueur.

La carte ralentit le site. Leaflet et les tuiles OSM se chargent à la demande. S’il n’y a qu’une seule carte sur la page, il n’y aura aucun problème.

Peut-on styliser la carte aux couleurs de la marque ? Oui, mais pas via les tuiles OSM standard. Utilisez des fournisseurs de tuiles tiers (Mapbox, Stadia Maps, Thunderforest) — certains sont gratuits pour les faibles charges, d’autres sont payants.

Dois-je indiquer l’attribution OpenStreetMap ? Oui, c’est obligatoire — c’est une exigence de la licence. Dans le code fourni ci-dessus, elle est déjà présente dans la ligne attribution.

Pour aller plus loin

Documentation Leaflet — manuel complet
Guide de démarrage rapide Leaflet — introduction rapide
OpenStreetMap — la carte elle-même
Fournisseurs de tuiles alternatifs — pour changer le style de la carte