adding leaflet-hugo maps
This will hopefully allow me to create shortcode maps with osm and leaflet rather than google.
This commit is contained in:
parent
31bab3cf3b
commit
16bcf8b091
18 changed files with 2074 additions and 112 deletions
|
|
@ -39,21 +39,22 @@
|
|||
<div
|
||||
class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"
|
||||
>
|
||||
<a
|
||||
href="#the-top"
|
||||
class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
|
||||
aria-label="{{ i18n "nav.scroll_to_top_title" }}"
|
||||
title="{{ i18n "nav.scroll_to_top_title" }}"
|
||||
>
|
||||
↑
|
||||
</a>
|
||||
<a
|
||||
href="#the-top"
|
||||
class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"
|
||||
aria-label="{{ i18n "nav.scroll_to_top_title" }}"
|
||||
title="{{ i18n "nav.scroll_to_top_title" }}"
|
||||
>
|
||||
↑
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</main>
|
||||
{{- partial "footer.html" . -}}
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
{{- partial "search.html" . -}}
|
||||
{{- partial "search.html" . -}}
|
||||
{{ end }}
|
||||
{{ partial "leaflet-loader" . }}
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
21
layouts/partials/leaflet-loader.html
Normal file
21
layouts/partials/leaflet-loader.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{{ range $.Site.Params.hugoLeaflet.css }}
|
||||
<link rel="stylesheet" href="{{ .href }}" crossorigin="{{ .crossorigin }}" {{ range $key, $value := .params }} {{ $key | safeURL }}="{{ $value }}" {{ end }} />
|
||||
{{ end }}
|
||||
|
||||
{{ range $.Site.Params.hugoLeaflet.js }}
|
||||
<script src="{{ .src }}" crossorigin="{{ .crossorigin }}" {{ range $key, $value := .params }} {{ $key | safeURL }}="{{ $value }}" {{ end }} ></script>
|
||||
{{ end }}
|
||||
|
||||
<style>
|
||||
.fa-icon-marker {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.download-track {
|
||||
background-color: #e1e1e1;
|
||||
text-align: center;
|
||||
margin-bottom: 25px;
|
||||
border-radius: 0 0 10px 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
30
layouts/shortcodes/leaflet-map.html
Normal file
30
layouts/shortcodes/leaflet-map.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
{{ if .IsNamedParams }}
|
||||
|
||||
{{ $mapLat := default "" (.Get "mapLat") }}
|
||||
{{ $mapLon := default "" (.Get "mapLon") }}
|
||||
{{ $zoom := default "13" (.Get "zoom") }}
|
||||
{{ $mapWidth := default "100%" (.Get "mapWidth") }}
|
||||
{{ $mapHeight := default "400px" (.Get "mapHeight") }}
|
||||
{{ $mapId := default (md5 (printf "%s%s" $mapLat $mapLon)) (.Get "mapId") }}
|
||||
{{ $scrollWheelZoom := default "true" (.Get "scrollWheelZoom") }}
|
||||
|
||||
<!--Container-->
|
||||
<div id='mapid_{{ $mapId }}' class="leaflet-map" style='width: {{ $mapWidth }}; height: {{ $mapHeight}};'></div>
|
||||
|
||||
<script>
|
||||
//Create Map
|
||||
leafletMapsObj[{{ $mapId }}] = L.map('mapid_{{ $mapId }}').setView([{{ $mapLat }}, {{ $mapLon }}], {{ $zoom }});
|
||||
{{ if eq $scrollWheelZoom "false" }}
|
||||
leafletMapsObj[{{ $mapId }}].scrollWheelZoom.disable();
|
||||
{{ end }}
|
||||
//Add tiles
|
||||
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
}).addTo(leafletMapsObj[{{ $mapId }}]);
|
||||
|
||||
</script>
|
||||
{{.Inner}}
|
||||
|
||||
{{ else }}
|
||||
{{ errorf "Leaflet Hugo Shortcode: please provide named Parameters" }}
|
||||
{{ end }}
|
||||
32
layouts/shortcodes/leaflet-marker.html
Normal file
32
layouts/shortcodes/leaflet-marker.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{{ if .IsNamedParams }}
|
||||
|
||||
{{ $markerLat := default "" (.Get "markerLat") }}
|
||||
{{ $markerLon := default "" (.Get "markerLon") }}
|
||||
{{ $markerContent := default "" (.Get "markerContent") }}
|
||||
|
||||
{{ with .Parent }}
|
||||
|
||||
{{ $mapLat := default "" (.Get "mapLat") }}
|
||||
{{ $mapLon := default "" (.Get "mapLon") }}
|
||||
{{ $mapId := default (md5 (printf "%s%s" $mapLat $mapLon)) (.Get "mapId") }}
|
||||
{{ $markerId := md5 (printf "%s%s%s" $mapId $markerLat $markerLon)}}
|
||||
|
||||
<script>
|
||||
//Marker
|
||||
leafletMarkersObj[{{ $markerId }}] = L.marker([{{ $markerLat }}, {{ $markerLon }}]).addTo(leafletMapsObj[{{ $mapId }}]);
|
||||
|
||||
{{ if $markerContent }}
|
||||
leafletMarkersObj[{{ $markerId }}].bindPopup("{{ $markerContent }}").openPopup();
|
||||
{{ end }}
|
||||
</script>
|
||||
|
||||
{{ else }}
|
||||
{{ errorf "Leaflet Hugo Shortcode: impossible using marker outside leaflet-map" }}
|
||||
{{ end }}
|
||||
|
||||
{{ else }}
|
||||
{{ errorf "Leaflet Hugo Shortcode: please provide named Parameters for marker" }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
82
layouts/shortcodes/leaflet-track.html
Normal file
82
layouts/shortcodes/leaflet-track.html
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
{{ if .IsNamedParams }}
|
||||
|
||||
{{ $trackPath := default "" (.Get "trackPath") }}
|
||||
{{ $lineColor := default "#006EFF" (.Get "lineColor") }}
|
||||
{{ $lineWeight := default "3" (.Get "lineWeight") }}
|
||||
{{ $lineOpacity := default "1" (.Get "lineOpacity") }}
|
||||
|
||||
{{ $graphPosition := default "topright" (.Get "graphPosition") }}
|
||||
{{ $graphTheme := default "steelblue-theme" (.Get "graphTheme") }}
|
||||
{{ $graphWidth := default "500" (.Get "graphWidth") }}
|
||||
{{ $graphHeight := default "150" (.Get "graphHeight") }}
|
||||
{{ $graphFollowMarker := default false (.Get "graphFollowMarker") }}
|
||||
{{ $graphCollapsed := default false (.Get "graphCollapsed") }}
|
||||
{{ $graphDetached := default true (.Get "graphDetached") }}
|
||||
|
||||
{{ $markerIcon := default "fa-thumb-tack" (.Get "markerIcon") }}
|
||||
{{ $markerIconColor := default "cyan" (.Get "markerIconColor") }}
|
||||
{{ $markerIconShape := default "penta" (.Get "markerIconShape") }}
|
||||
{{ $markerIconClasses := default "fa-icon-marker" (.Get "markerIconClasses") }}
|
||||
{{ $markerStartIcon := default "fa-play" (.Get "markerStartIcon") }}
|
||||
{{ $markerStartIconColor := default "green-light" (.Get "markerStartIconColor") }}
|
||||
{{ $markerStartIconShape := default "circle" (.Get "markerStartIconShape") }}
|
||||
{{ $markerStartIconClasses := default "fa-icon-marker fa-icon-start-stop" (.Get "markerStartIconClasses") }}
|
||||
{{ $markerEndIcon := default "fa-flag-checkered" (.Get "markerEndIcon") }}
|
||||
{{ $markerEndIconColor := default "red" (.Get "markerEndIconColor") }}
|
||||
{{ $markerEndIconShape := default "circle" (.Get "markerEndIconShape") }}
|
||||
{{ $markerEndIconClasses := default "fa-icon-marker fa-icon-start-stop" (.Get "markerEndIconClasses") }}
|
||||
|
||||
{{ with .Parent }}
|
||||
|
||||
{{ $mapLat := default "" (.Get "mapLat") }}
|
||||
{{ $mapLon := default "" (.Get "mapLon") }}
|
||||
{{ $mapId := default (md5 (printf "%s%s" $mapLat $mapLon)) (.Get "mapId") }}
|
||||
{{ $trackId := md5 (printf "%s%s" $mapId $trackPath)}}
|
||||
|
||||
<script>
|
||||
trackOpts = {
|
||||
mapId: "{{ $mapId }}",
|
||||
trackId: "{{ $trackId }}",
|
||||
trackPath: '{{ "gpx" | absURL }}/{{$trackPath}}',
|
||||
lineColor: "{{ $lineColor }}",
|
||||
lineWeight: "{{ $lineWeight }}",
|
||||
lineOpacity: "{{ $lineOpacity }}"
|
||||
};
|
||||
elevationOpts = {
|
||||
graphPosition: "{{ $graphPosition }}",
|
||||
graphTheme: "{{ $graphTheme }}",
|
||||
graphWidth: "{{ $graphWidth }}",
|
||||
graphHeight: "{{ $graphHeight }}",
|
||||
graphFollowMarker: {{ $graphFollowMarker }},
|
||||
graphCollapsed: {{ $graphCollapsed }},
|
||||
graphDetached: {{ $graphDetached }}
|
||||
};
|
||||
markerOpts = {
|
||||
icon: "{{ $markerIcon }}",
|
||||
iconColor: "{{ $markerIconColor }}",
|
||||
iconShape: "{{ $markerIconShape }}",
|
||||
iconClasses: "{{ $markerIconClasses }}",
|
||||
iconStart: "{{ $markerStartIcon }}",
|
||||
iconStartColor: "{{ $markerStartIconColor }}",
|
||||
iconStartShape: "{{ $markerStartIconShape }}",
|
||||
iconStartClasses: "{{ $markerStartIconClasses }}",
|
||||
iconEnd: "{{ $markerEndIcon }}",
|
||||
iconEndColor: "{{ $markerEndIconColor }}",
|
||||
iconEndShape: "{{ $markerEndIconShape }}",
|
||||
iconEndClasses: "{{ $markerEndIconClasses }}"
|
||||
};
|
||||
drawTrack(trackOpts, elevationOpts, markerOpts);
|
||||
</script>
|
||||
|
||||
<div class="download-track" onclick="downloadFile('{{ "gpx" | absURL }}/{{ $trackPath }}');"><p class="download-track-link">Download</p></div>
|
||||
|
||||
{{ else }}
|
||||
{{ errorf "Leaflet Hugo Shortcode: impossible using track outside leaflet-map" }}
|
||||
{{ end }}
|
||||
|
||||
{{ else }}
|
||||
{{ errorf "Leaflet Hugo Shortcode: please provide named Parameters for marker" }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue