Omphaloskepsis-2/layouts/cv/locations.html

65 lines
1.9 KiB
HTML

{{ define "title" }}
CV by Location | {{ .Site.Title }}
{{ end }}
{{ define "main-class" }}--section location-map{{ end }}
{{ define "header-scripts" }}
<link rel="stylesheet" href="/css/leaflet.css"/>
{{ end }}
{{ define "footer-scripts" }}
<script src="/js/leaflet.js"></script>
<script src="/js/leaflet-heat.js"></script>
<script>
var map = L.map('map').setView([55, -3], 3);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
{{- range $.Site.Data.locations -}}
/* L.marker([{{ .lat }}, {{ .lon }}]).addTo(map); */
{{- end -}}
L.heatLayer(
[
{{- range .Site.AllPages -}}
{{- with .Params.locations -}}
{{- range . -}}
{{- with ( index $.Site.Data.locations . ) -}}
[ {{ .lat }}, {{ .lon }} ],
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
],
{
minOpacity: 0.5,
gradient: {0.2: 'blue', 0.5: 'lime', 1: 'red'}
}
).addTo(map);
</script>
{{ end }}
{{ define "main-header" }}
<header class="site-content__header">
<h1 class="page-title">{{ .Title | safeHTML }}.</h1>
{{ .Content }}
</header>
{{ end }}
{{ define "main-body" }}
<article class="site-content__body site-content__body--chart">
<div id="map" style="width: 100%; height: 500px; margin: 0; display: block;"></div>
<ul style="grid-area: section-content">
{{- range $key, $value := $.Site.Data.locations -}}
<li itemscope itemtype="https://schema.org/Place">{{ $key }}</li>
{{- end -}}
</ul>
</article>
{{ end }}