Rumperuu/Omphaloskepsis-2
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: map in locations view

Browse source
This commit is contained in:
Ben Goldsworthy 2025-02-20 01:23:36 +01:00
parent 16e7d6ef83
commit 312c4ed725
Signed by: Rumperuu
SSH key fingerprint: SHA256:v3uompaUiPqV2w1/AIRWBSQOxr2dntH9Xs/y8fDnUPU
3 changed files with 68 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
layouts/locations/list.html
View file

@ -1,45 +1,53 @@
{{ define "title" }} {{ define "title" }}
Locations | {{ .Site.Title }} Locations |
{{ .Site.Title }}
{{ end }} {{ end }}
{{ define "main-class" }}--section location-map{{ end }} {{ define "main-class" }}--section location-map{{ end }}
{{ define "header-scripts" }} {{ define "header-scripts" }}
<!-- Leaflet --> <!-- Leaflet -->
<link rel="stylesheet" href="/css/leaflet/leaflet.css" /> <link
<link rel="stylesheet" href="/js/leaflet-fullscreen/leaflet.fullscreen.css" /> rel="stylesheet"
href="/css/leaflet/leaflet.css"
/>
<link
rel="stylesheet"
href="/js/leaflet-fullscreen/leaflet.fullscreen.css"
/>
{{ end }} {{ end }}
{{ define "footer-scripts" }} {{ define "footer-scripts" }}
<!-- Leaflet --> <!-- Leaflet -->
<script src="/js/leaflet/leaflet.js"></script> <script src="/js/leaflet/leaflet.js"></script>
<!-- Leaflet Heat --> <!-- Leaflet Heat -->
<script src="/js/leaflet-heat/leaflet-heat.js"></script> <script src="/js/leaflet-heat/leaflet-heat.js"></script>
<!-- Leaflet Fullscreen --> <!-- Leaflet Fullscreen -->
<script src="/js/leaflet-fullscreen/leaflet.fullscreen.min.js"></script> <script src="/js/leaflet-fullscreen/leaflet.fullscreen.min.js"></script>
<script> {{- partial "cv/locations/heatmap.js" ( dict "all_pages" $.Site.AllPages "locations" $.Site.Data.locations ) -}}
{{- partial "cv/locations/heatmap.js" ( dict "all_pages" $.Site.AllPages ) -}}
</script>
{{ end }} {{ end }}
{{ define "main-header" }} {{ define "main-header" }}
<header class="site-content__header"> <header class="site-content__header">
<h1 class="page-title">{{ .Title | safeHTML }}.</h1> <h1 class="page-title">{{ .Title | safeHTML }}.</h1>
{{ .Content }} {{ .Content }}
</header> </header>
{{ end }} {{ end }}
{{ define "main-body" }} {{ define "main-body" }}
<article class="site-content__body site-content__body--chart"> <article class="site-content__body site-content__body--chart">
<div id="map" style="width: 100%; height: 500px; margin: 0; display: block;"></div> <div
id="map"
style="width: 100%; height: 500px; margin: 0; display: block;"
></div>
{{- with ( partial "util/render_recursive_list.html" ( dict "sc" $ "pc" . "items" $.Site.Data.locations "schemaType" "Place" ) ) -}} {{- with ( partial "util/render_recursive_list.html" ( dict "sc" $ "pc" . "items" $.Site.Data.locations "schemaType" "Place" ) ) -}}
<section style="grid-area: section-content"> <section style="grid-area: section-content">
{{- . -}} {{- . -}}
</section> </section>
{{- end -}} {{- end -}}
</article> </article>
{{ end }} {{ end }}

73
layouts/partials/cv/locations/heatmap.js
View file

@ -1,47 +1,50 @@
/* {{/*
Recursively render an ordered or unordered list from a set of arbitrarily- Recursively render an ordered or unordered list from a set of arbitrarily-
deeply-nested items. deeply-nested items.
@params all_pages All site pages @params all_pages All site pages
*/ @params locations All locations
var map = L.map('map', {
fullscreenControl: true
}).setView([55, -3], 3);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
{{- $locations := partialCached "util/get_location_leaf_nodes.html" $.Site.Data.locations -}}
{{/*
{{- range .Site.AllPages -}}
{{- with .Params.locations -}}
{{- range . -}}
{{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
L.marker([{{ .lat }}, {{ .lon }}]).addTo(map);
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
*/}} */}}
L.heatLayer( <script>
[ var map = L.map('map', {
{{- range .all_pages -}} fullscreenControl: true
}).setView([55, -3], 3);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
{{- $locations := partialCached "util/get_location_leaf_nodes.html" .locations -}}
{{/*
{{- range .Site.AllPages -}}
{{- with .Params.locations -}} {{- with .Params.locations -}}
{{- range . -}} {{- range . -}}
{{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}} {{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
[ {{ .lat }}, {{ .lon }} ], L.marker([{{ .lat }}, {{ .lon }}]).addTo(map);
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
{{- end -}} {{- end -}}
], */}}
{
minOpacity: 0.5, L.heatLayer(
gradient: {0.1: 'blue', 0.3: 'lime', 0.8: 'orange', 1: 'red'} [
} {{- range .all_pages -}}
).addTo(map); {{- with .Params.locations -}}
{{- range . -}}
{{- with ( index $locations ( replaceRE `, [A-Z]+` "" . ) ) -}}
[ {{ .lat }}, {{ .lon }} ],
{{- end -}}
{{- end -}}
{{- end -}}
{{- end -}}
],
{
minOpacity: 0.5,
gradient: {0.1: 'blue', 0.3: 'lime', 0.8: 'orange', 1: 'red'}
}
).addTo(map);
</script>

0
static/css/leaflet-fullscreen/leaflet.fullscreen.css → static/js/leaflet-fullscreen/leaflet.fullscreen.css
View file