Table des matières

Afficher une carte Open Street Map (OSM) avec un marqueur géolocalisé sur votre site vous permettra de personnaliser votre page de contact. Très largement inspiré du blog [Communication & Transformation Numériques des Territoires] (http://guillaume-rouan.net/blog/2016/08/17/integrez-une-carte-openstreetmap-a-votre-site-web/), voici la marche à suivre pour l’intégrer dans votre blog statique Hugo.

J’ai déjà expliqué la démarche pour un affichage de Google Maps, comment afficher des marqueurs et Street View, mais je préfère utiliser Open Street Map qui est un projet Open Source totalement libre et gratuit.

Cette carte ne conserve pas vos données, ne les utilise pas à votre insu ; elle est par ailleurs entièrement modifiable et adaptable selon vos besoins, et vous pouvez utiliser d’autres modules pour l’améliorer, la diffuser…

L’en-tête

Renseignons tout d’abord le fichier /layouts/partials/head.html de votre thème.

<!-- Nous chargeons les fichiers CDN de Leaflet.-->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="crossorigin=""></script>
		
<script type="text/javascript">
// On initialise la latitude et la longitude de Rotangy (centre de la carte)
  var lat = 49.582021;
  var lon = 2.081708;
  var macarte = null;

// Nous initialisons une liste de marqueurs
  var villes = {
  "Paris": { "lat": 48.852969, "lon": 2.349903 },
  "Rotangy": { "lat": 49.582021, "lon": 2.081708 }			
  };

// Fonction d'initialisation de la carte
  function initMap() {

// Créer l'objet "macarte" et l'insèrer dans l'élément HTML qui a l'ID "map"
  macarte = L.map('map').setView([lat, lon], 8);

// Leaflet ne récupère pas les cartes (tiles) sur un serveur par défaut. Nous devons lui préciser où nous souhaitons les récupérer. Ici, openstreetmap.fr
  L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
                    
// Il est toujours bien de laisser le lien vers la source des données
  attribution: 'données © <a href="//osm.org/copyright">OpenStreetMap</a>/ODbL - rendu <a href="//openstreetmap.fr">OSM France</a>',
    minZoom: 1,
    maxZoom: 20
  }).addTo(macarte);

// Nous parcourons la liste des villes
  for (ville in villes) {
  var marker = L.marker([villes[ville].lat, villes[ville].lon]).addTo(macarte);

// Nous ajoutons la popup. A noter que son contenu (ici la variable ville) peut être du HTML
  marker.bindPopup(ville);
  }    
  }
  window.onload = function(){

// Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
  initMap(); 
  };
</script>

Le CSS

#map{ /* la carte DOIT avoir une hauteur sinon elle n'apparaît pas */
  height:450px;
  z-index: 10;
}

L’affichage de la carte

<div id="map">
<!-- Ici s'affichera la carte -->
</div>

Le résultat

Rotangy, petit village de l'Oise