Affichage des cartes dans les randos

J’ai pris le temps de traiter un souhait de longue date : afficher des cartes pour visualiser les randos.

Maintenant, la page des randos dispose d’une carte présentant l’ensemble des randos du site. Et chaque rando a sa petite carte de localisation.

Techniquement, j’ai introduit le support de Leaflet dans l’entête des pages. Et grâce aux nouvelles propriétés lat et lon du frontmatter, chaque page de rando peut se géolocaliser.

Le bout de code inséré pour l’occasion :

<!--Carte-->
{{ if and .Params.lat .Params.lon }}
<!--Container-->
<div id="mainmap" style="height:300px;"></div>

<!--Populate with marker-->
<script>
//Define zoom level with default if not defined
let zoom = {{ default 9 .Params.Zoom }};
//Create Map
var map = L.map('mainmap').setView([{{.Params.lat}}, {{.Params.lon}}], zoom);
//Add tiles
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
//Simple Marker
var marker = L.marker([{{.Params.lat}}, {{.Params.lon}}]).addTo(map);
</script>
{{ end }}