adding leaflet-hugo maps

This will hopefully allow me to create shortcode maps with osm and
leaflet rather than google.

config/_default/config.toml

@@ -1,44 +0,0 @@
-baseURL = 'https://new.tfcconnection.org/'
-languageCode = 'en-us'
-title = 'TFC Connection'
-theme = "blowfish"
-
-DefaultContentLanguage = "en"
-# SectionPagesMenu = "main"
-enableRobotsTXT = true
-
-Paginate = 10 # this is set low for demonstrating with dummy content. Set to a higher number
-SummaryLength = 20
-
-buildDrafts = false
-buildFuture = false
-outputs.home = ["HTML", "RSS", "JSON"]
-
-[taxonomies]
-  tag = "tags"
-  category = "categories"
-  author = "authors"
-  series = "series"
-
-[sitemap]
-  changefreq = 'daily'
-  filename = 'sitemap.xml'
-  priority = 0.5
-
-[params]
-  favicon = "favicon-16x16.png"
-  site_logo = "img/logo.png"
-  description = "Connecting teens with the truth of Jesus Christ… teaching and equipping them to live out the Great Commission."
-
-
-# Privacy
-[privacy]
-  [privacy.disqus]
-    disable = true
-  [privacy.googleAnalytics]
-    disable = true
-  [privacy.instagram]
-  [privacy.twitter]
-  [privacy.vimeo]
-  [privacy.youtube]
-

config/_default/config.yaml

@@ -0,0 +1,56 @@
+baseURL: 'https://new.tfcconnection.org/'
+languageCode: en-us
+title: TFC Connection
+theme: blowfish
+DefaultContentLanguage: en
+enableRobotsTXT: true
+Paginate: 10
+SummaryLength: 20
+buildDrafts: false
+buildFuture: false
+outputs:
+  home:
+    - HTML
+    - RSS
+    - JSON
+taxonomies:
+  tag: tags
+  category: categories
+  author: authors
+  series: series
+sitemap:
+  changefreq: daily
+  filename: sitemap.xml
+  priority: 0.5
+params:
+  favicon: favicon-16x16.png
+  site_logo: img/logo.png
+  description: >-
+    Connecting teens with the truth of Jesus Christ… teaching and equipping them
+    to live out the Great Commission.
+  hugoLeaflet:
+    css:
+      - href: "https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
+        params:
+          integrity: "sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+        crossorigin: ""
+      - href: "https://unpkg.com/@raruto/leaflet-elevation@1.1.1/dist/leaflet-elevation.css"
+      - href: "css/leaflet.extra-markers.min.css"
+    js:
+      - src: "https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
+        params:
+          integrity: "sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
+        crossorigin: ""
+      - src: "js/leaflet.elevation.js"
+      - src: "js/leaflet.hugo.js"
+      - src: "js/leaflet.extra-markers.min.js"
+
+privacy:
+  disqus:
+    disable: true
+  googleAnalytics:
+    disable: true
+  instagram: {}
+  twitter: {}
+  vimeo: {}
+  youtube: {}

config/_default/params.toml

@@ -1,58 +0,0 @@
-colorScheme = "blowfish"
-defaultAppearance = "dark"
-autoSwitchAppearance = false
-enableSearch = true
-logo = "logo.png"
-
-[author]
-name = "TFC Connection"
-links = [
-  {facebook = "https://facebook.com/tfcconnection"},
-  {instagram = "https://instagram.com/tfcconnection"}
-]
-
-[header]
-  layout = "basic"
-
-[homepage]
-  layout = "page" # valid options: page, profile, hero, card, background, custom
-  # homepageImage = "/img/iceland.jpg" # used in: hero, and card
-  showRecent = false
-  showRecentItems = 5
-  showMoreLink = true
-  showMoreLinkDest = "docs"
-
-[article]
-  showDate = false
-  showDateUpdated = false
-  showAuthor = true
-  showHero = true
-  heroStyle = "background" # valid options: basic, big, background
-  showBreadcrumbs = true
-  showDraftLabel = true
-  showEdit = true
-  seriesOpened = false
-  showHeadingAnchors = true
-  showPagination = true
-  invertPagination = false
-  showReadingTime = false
-  showTableOfContents = true
-  showTaxonomies = true 
-  showAuthorsBadges = true 
-  showWordCount = false
-  showSummary = true
-  sharingLinks = [ "twitter", "reddit", "facebook", "instagram", "email"]
-
-[list]
-  showBreadcrumbs = true
-  showSummary = true
-  showTableOfContents = true
-  showCards = true
-  groupByYear = false
-
-[footer]
-  showMenu = true
-  showCopyright = true
-  showThemeAttribution = true
-  showAppearanceSwitcher = false
-  showScrollToTop = true

config/_default/params.yaml

@@ -0,0 +1,55 @@
+colorScheme: blowfish
+defaultAppearance: dark
+autoSwitchAppearance: false
+enableSearch: true
+logo: logo.png
+author:
+  name: TFC Connection
+  links:
+    - facebook: 'https://facebook.com/tfcconnection'
+    - instagram: 'https://instagram.com/tfcconnection'
+header:
+  layout: basic
+homepage:
+  layout: page
+  showRecent: false
+  showRecentItems: 5
+  showMoreLink: true
+  showMoreLinkDest: docs
+article:
+  showDate: false
+  showDateUpdated: false
+  showAuthor: true
+  showHero: true
+  heroStyle: background
+  showBreadcrumbs: true
+  showDraftLabel: true
+  showEdit: true
+  seriesOpened: false
+  showHeadingAnchors: true
+  showPagination: true
+  invertPagination: false
+  showReadingTime: false
+  showTableOfContents: true
+  showTaxonomies: true
+  showAuthorsBadges: true
+  showWordCount: false
+  showSummary: true
+  sharingLinks:
+    - twitter
+    - reddit
+    - facebook
+    - instagram
+    - email
+list:
+  showBreadcrumbs: true
+  showSummary: true
+  showTableOfContents: true
+  showCards: true
+  groupByYear: false
+footer:
+  showMenu: true
+  showCopyright: true
+  showThemeAttribution: true
+  showAppearanceSwitcher: false
+  showScrollToTop: true

layouts/_default/baseof.html

@@ -39,21 +39,22 @@
           <div
             class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"
           >
-            <a
+              <a
-              href="#the-top"
+                  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"
+                  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" }}"
+                  aria-label="{{ i18n "nav.scroll_to_top_title" }}"
-              title="{{ i18n "nav.scroll_to_top_title" }}"
+                  title="{{ i18n "nav.scroll_to_top_title" }}"
-            >
+              >
-              &uarr;
+                  &uarr;
-            </a>
+              </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>

layouts/partials/leaflet-loader.html

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

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

static/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;