Add Map on Dates

assets/js/leaflet.hugo.js

@@ -0,0 +1,108 @@
+let leafletMapsObj = {};
+let leafletMarkersObj = {};
+
+function drawTrack(trackOpts, elevationOpts, markerOpts) {
+    var opts = {
+        elevationControl: {
+            options: {
+                position: elevationOpts.graphPosition,
+                theme: elevationOpts.graphTheme,
+                width: elevationOpts.graphWidth,
+                height: elevationOpts.graphHeight,
+                margins: {
+                    top: 20,
+                    right: 20,
+                    bottom: 35,
+                    left: 50
+                },
+                followMarker: elevationOpts.graphFollowMarker,
+                collapsed: elevationOpts.graphCollapsed,
+                detached: elevationOpts.graphDetached,
+                legend: false,
+                summary: false,
+                downloadLink: '',
+                gpxOptions: {
+                    polyline_options: {
+                        className: 'track-' + trackOpts.trackId + '-',
+                        color: trackOpts.lineColor,
+                        opacity: trackOpts.lineOpacity,
+                        weight: trackOpts.lineWeight,
+                    },
+                    marker_options: {
+                        startIcon: new L.ExtraMarkers.icon({
+                            icon: markerOpts.iconStart,
+                            markerColor: markerOpts.iconStartColor,
+                            shape: markerOpts.iconStartShape,
+                            prefix: 'fa',
+                            extraClasses: markerOpts.iconStartClasses
+                        }),
+                        endIcon: new L.ExtraMarkers.icon({
+                            icon: markerOpts.iconEnd,
+                            markerColor: markerOpts.iconEndColor,
+                            shape: markerOpts.iconEndShape,
+                            prefix: 'fa',
+                            extraClasses: markerOpts.iconEndClasses
+                        }),
+                        wptIcons: {
+                            '': new L.ExtraMarkers.icon({
+                                icon: markerOpts.icon,
+                                markerColor: markerOpts.iconColor,
+                                shape: markerOpts.iconShape,
+                                prefix: 'fa',
+                                extraClasses:  markerOpts.iconClasses,
+                            })
+                        }
+                    }
+                },
+
+            },
+        },
+    };
+
+    L.control.elevation(opts.elevationControl.options).addTo(leafletMapsObj[trackOpts.mapId]).load(trackOpts.trackPath);
+
+    /*map.on('eledata_loaded', function(e) {
+        track = e.track_info;
+    });*/
+}
+
+window.downloadFile = function (sUrl) {
+
+    //iOS devices do not support downloading. We have to inform user about this.
+    if (/(iP)/g.test(navigator.userAgent)) {
+        alert('Your device does not support files downloading. Please try again in desktop browser.');
+        return false;
+    }
+
+    //If in Chrome or Safari - download via virtual link click
+    if (window.downloadFile.isChrome || window.downloadFile.isSafari) {
+        //Creating new link node.
+        var link = document.createElement('a');
+        link.href = sUrl;
+
+        if (link.download !== undefined) {
+            //Set HTML5 download attribute. This will prevent file from opening if supported.
+            var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);
+            link.download = fileName;
+        }
+
+        //Dispatching click event.
+        if (document.createEvent) {
+            var e = document.createEvent('MouseEvents');
+            e.initEvent('click', true, true);
+            link.dispatchEvent(e);
+            return true;
+        }
+    }
+
+    // Force file download (whether supported by server).
+    if (sUrl.indexOf('?') === -1) {
+        sUrl += '?download';
+    }
+
+    window.open(sUrl, '_self');
+    return true;
+};
+
+window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
+window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;

content/dates/2021-08-06-FeriAin.md

@@ -4,3 +4,8 @@ title: "Feri'Ain des Fanfarons 2021 - Thoissey"
 date: 2021-08-06T00:00:00+01:00
 ---
 
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="46.165350" mapLon="4.791313">}}
+    {{<leaflet-marker markerLat="46.165350" markerLon="4.791313">}}
+{{</leaflet-map>}}
+

content/dates/2021-12-12-PalaisDeJustice.md

@@ -4,3 +4,7 @@ title: "Passerelle du Palais de Justice - Lyon"
 date: 2021-12-12T00:00:00+01:00
 ---
 
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="45.761727" mapLon="4.829074">}}
+    {{<leaflet-marker markerLat="45.761727" markerLon="4.829074">}}
+{{</leaflet-map>}}

content/dates/2022-04-15-PontUSSB-Balances.md

@@ -13,3 +13,8 @@ Balances Publiques en vue de l'Apéro Fanfare du 22 Avril 2022
 
 ### Vidéo
 {{<video src="/video/2022-04-15/NUiJ05BRBWAZcmQDq8js.mp4">}}
+
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="45.752182" mapLon="4.836530">}}
+    {{<leaflet-marker markerLat="45.752182" markerLon="4.836530">}}
+{{</leaflet-map>}}

content/dates/2022-04-22-PontUSSB.md

@@ -5,3 +5,8 @@ date: 2022-04-22T00:00:00+01:00
 ---
 
 Apéro Fanfare sur les quais feat Super Smash Brass et les Fat Ducks.
+
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="45.752182" mapLon="4.836530">}}
+    {{<leaflet-marker markerLat="45.752182" markerLon="4.836530">}}
+{{</leaflet-map>}}

content/dates/2022-05-13-Peepshow.md

@@ -21,3 +21,8 @@ Over zeu **PEEP** Knup **SHOW**, Mode d'emploi :
 
 ### Affiche
 {{<figure src="/images/2022-05-13/AffichePeepshow.png">}}
+
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="45.737637" mapLon="4.853652">}}
+    {{<leaflet-marker markerLat="45.737637" markerLon="4.853652">}}
+{{</leaflet-map>}}

content/dates/2022-07-30-Gazafonds.md

@@ -12,3 +12,8 @@ Festival Rock à Fond organisé par les Gazafond à Manziat (01570)
 {{<figure src="/images/2022-07-30/IMG_20220730_200333.jpg">}}
 {{<figure src="/images/2022-07-30/IMG_20220730_202412.jpg">}}
 {{<figure src="/images/2022-07-30/IMG_20220730_202417.jpg">}}
+
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="46.358619" mapLon="4.903935">}}
+    {{<leaflet-marker markerLat="46.358619" markerLon="4.903935">}}
+{{</leaflet-map>}}

content/dates/2022-07-31-DecenteDeLaSaone.md

@@ -4,3 +4,7 @@ title: "Decente de la Saône - Replonges"
 date: 2022-07-31T00:00:00+01:00
 ---
 
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="46.3044427" mapLon="4.8398536">}}
+    {{<leaflet-marker markerLat="46.3044427" markerLon="4.8398536">}}
+{{</leaflet-map>}}

content/dates/2022-08-08-FeriAin.md

@@ -3,3 +3,8 @@ type: "post"
 title: "Feri'Ain des Fanfarons 2022 - Thoissey"
 date: 2022-08-08T00:00:00+01:00
 ---
+
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="46.165350" mapLon="4.791313">}}
+    {{<leaflet-marker markerLat="46.165350" markerLon="4.791313">}}
+{{</leaflet-map>}}

content/dates/2022-10-11-MatinaleOzK.md

@@ -4,6 +4,14 @@ title: "Matinale OzK - Charpennes, Villeurbanne"
 date: 2022-10-11T00:00:00+01:00
 ---
 
-Matinale Musicale de 7:00 à 8:00 Place Charles Hernu à Charpennes, sur une idée orginale de TFA.
+Matinale Musicale de 7:00 à 8:00 place Charles Hernu à Charpennes, sur une idée orginale de TFA.
+
+### Concept
+A
 
 > Mais quelle idée de merde...
+
+### Map
+{{<leaflet-map mapHeight="200px" mapWidth="100%" mapLat="45.770751" mapLon="4.863223">}}
+    {{<leaflet-marker markerLat="45.770751" markerLon="4.863223">}}
+{{</leaflet-map>}}

layouts/partials/leaflet-loader.html

@@ -0,0 +1,35 @@
+<!-- Leaflet (JS/CSS) -->
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+      crossorigin=""/>
+<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+        crossorigin=""></script>
+
+<!-- leaflet-elevation -->
+<link rel="stylesheet" href="https://unpkg.com/@raruto/leaflet-elevation@1.1.1/dist/leaflet-elevation.css" />
+{{ $leafletElevation := resources.Get "js/leaflet.elevation.js" | minify | fingerprint "md5" }}
+<script src="{{ $leafletElevation.Permalink }}"></script>
+
+<!-- leaflet-hugo -->
+{{ $leafletHugo := resources.Get "js/leaflet.hugo.js" | minify | fingerprint "md5" }}
+<script src="{{ $leafletHugo.Permalink }}"></script>
+
+<!-- Icons -->
+<link rel="stylesheet" href="{{ .Site.BaseURL }}css/leaflet.extra-markers.min.css">
+{{ $leafletExtra := resources.Get "js/leaflet.extra-markers.min.js" }}
+<script src="{{ $leafletExtra.Permalink }}"></script>
+
+<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>

layouts/shortcodes/leaflet-map.html

@@ -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: '&copy; <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 }}

layouts/shortcodes/leaflet-marker.html

@@ -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 }}
+
+
+

layouts/shortcodes/leaflet-track.html

@@ -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 }}
+
+
+