Omphaloskepsis-2/layouts/cv/locations.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 }}

        {{ .Scratch.Set "maxItems" 0 }}
        {{ .Scratch.Set "numOfItems" 0 }}

        {{ range $key, $value := $.Site.Data.locations }}
            {{ $childPosts := where $.Site.Pages ".Params.locations" "intersect" ( slice $key ) }}
            {{ $.Scratch.Set "numOfItems" ( len $childPosts ) }}
            {{ if ( gt ( $.Scratch.Get "numOfItems" ) ( $.Scratch.Get "maxItems" ) ) }}
                {{ $.Scratch.Set "maxItems" ( $.Scratch.Get "numOfItems" ) }}
            {{ end }}
        {{ end }}

        L.heatLayer(
            [
            {{- range $key, $value := $.Site.Data.locations -}}
                {{- $childPosts := where $.Site.Pages ".Params.locations" "intersect" ( slice $key ) -}}
                [ {{ .lat }}, {{ .lon }}, {{ len $childPosts }} ],
            {{- end -}}
            ],
            {
                max: {{ $.Scratch.Get "maxItems" }},
                gradient: { 0.4: 'blue', 0.65: '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>
</article>
{{ end }}