{{ 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: '© <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 }}