Files
JohnTech/layouts/places/list.html

57 lines
1.5 KiB
HTML

{{ define "main" }}
<h1 id="{{ .Title | urlize }}">{{ .Title | markdownify }}</h1>
{{ .Content }}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<div id="map" style="height: 500px; width: 100%; border-radius: 4px; margin-bottom: 1rem;"></div>
<script>
var map = L.map('map').setView([30, 0], 2);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var places = [
{{ range .Pages }}
{{ if and .Params.lat .Params.lon }}
{
title: {{ .Title }},
lat: {{ .Params.lat }},
lon: {{ .Params.lon }},
url: {{ .RelPermalink }}
},
{{ end }}
{{ end }}
];
var bounds = [];
places.forEach(function(place) {
var marker = L.marker([place.lat, place.lon]).addTo(map);
marker.bindPopup('<a href="' + place.url + '">' + place.title + '</a>');
bounds.push([place.lat, place.lon]);
});
if (bounds.length > 0) {
map.fitBounds(bounds, { padding: [50, 50] });
}
</script>
<ul>
{{ range .Pages.ByDate.Reverse }}
{{ .Render "li" }}
{{ end }}
</ul>
{{ end }}
{{ define "aside" }}
{{ if .Params.description }}
<p>{{ .Params.description }}</p>
{{ end }}
{{ end }}