hazza/hugo-mod-leaflet
1
0
Fork 0
mirror of https://gitlab.com/mrubli/hugo-mod-leaflet.git synced 2025-10-08 02:24:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: hazza:v0.1.0
Branches Tags
hazza:master hazza:next
hazza:v0.1.0
...
compare: hazza:master
Branches Tags
hazza:next hazza:master
hazza:v0.1.0

5 Commits
v0.1.0 ... master

Author SHA1 Message Date
Martin Rubli
67efbb6661 README.md: Document the apiKey configuration option 2025-04-15 17:20:46 +02:00
Martin Rubli
1c8bce4a66 layouts: layer: Allow retrieving API key from config 
The config key name is the layer name with '.' replaced with '_'. For example:

params:
  modules:
    leaflet:
      com_thunderforest_outdoors:
        apiKey: abcdef1234567890abcdef1234567890

If the key is specified in both the config file and the tag attribute, the
latter takes precedence.

Implements #6
 2025-04-15 17:20:13 +02:00
Martin Rubli
3fb5f2015b README.md: Add instructions for getting started 2025-04-09 22:28:43 +02:00
Martin Rubli
891cef7a8b README.md: Add table of contents 2025-04-09 22:05:20 +02:00
Martin Rubli
c7bfee6f1d README.md: Whitespace fixes 2025-04-09 22:03:08 +02:00
2 changed files with 60 additions and 22 deletions
Expand all files Collapse all files

78
README.md
View File

@@ -2,21 +2,25 @@
This module provies a number of Hugo shortcodes for easy embedding of maps into Hugo-based websites. This module provies a number of Hugo shortcodes for easy embedding of maps into Hugo-based websites.
## Table of contents
[TOC]
## Example ## Example
Here's an example use of the map shortcodes provided by hugo-mod-leaflet: Here's an example use of the map shortcodes provided by hugo-mod-leaflet:
```go-html-template ```go-html-template
{{< leaflet-map resizable=false >}} {{< leaflet-map resizable=false >}}
{{< leaflet-layer id="ch.swisstopo.pixelkarte-farbe" selectorPosition="bottomleft" >}} {{< leaflet-layer id="ch.swisstopo.pixelkarte-farbe" selectorPosition="bottomleft" >}}
{{< leaflet-layer id="ch.swisstopo.swissimage" >}} {{< leaflet-layer id="ch.swisstopo.swissimage" >}}
{{< leaflet-layer id="ch.swisstopo.swisstlm3d-wanderwege" >}} {{< leaflet-layer id="ch.swisstopo.swisstlm3d-wanderwege" >}}
{{< leaflet-scale position="bottomright" >}} {{< leaflet-scale position="bottomright" >}}
{{< leaflet-track path="track.gpx" color="DarkRed" >}} {{< leaflet-track path="track.gpx" color="DarkRed" >}}
{{< leaflet-elevation-profile expanded=true resizable=true width=300 height=150 >}} {{< leaflet-elevation-profile expanded=true resizable=true width=300 height=150 >}}
{{< /leaflet-map >}} {{< /leaflet-map >}}
``` ```
@@ -26,27 +30,38 @@ And below is how this might render:
## Documentation ## Documentation
### Getting started
An [example website is available](https://gitlab.com/mrubli/hugo-mod-leaflet-example/) that illustrates how to use hugo-mod-leaflet in your own Hugo website.
In a nutshell:
1. Add a dependency to `gitlab.com/mrubli/hugo-mod-leaflet.git` in your configuration (typically `hugo.toml` or `hugo.yaml`).
2. Find out how the theme of your choice lets you add code to the site's `<head>` section. A good candidate to look is `layouts/_default/baseof.html` or other files in the same directory. (The example website [uses](https://gitlab.com/mrubli/hugo-mod-leaflet-example/-/blob/master/layouts/partials/site-scripts.html) the `layouts/partials/site-scripts.html` customization point of the [Ananke theme](https://github.com/theNewDynamic/gohugo-theme-ananke).)
3. Invoke the `leaflet-loader` shortcode from the `<head>` section. Typically, you'd do this with a snippet like this one:
```
{{ if .HasShortcode "leaflet-map" }}
{{ partial "leaflet-loader" . }}
{{ end }}
```
4. Now you can use the shortcodes provided by hugo-mod-leaflet in your content files.
### Shortcodes
The current shortcode documentation is contained at the top of [leaflet-map.html](layouts/shortcodes/leaflet-map.html) but is reproduced here for convenience: The current shortcode documentation is contained at the top of [leaflet-map.html](layouts/shortcodes/leaflet-map.html) but is reproduced here for convenience:
### Syntax summary #### Syntax summary
```go-html-template ```go-html-template
{{< leaflet-map centerLat=FLOAT centerLon=FLOAT zoom=INT width="STRING" height="STRING" resizable=BOOL maximizable=BOOL freezable=BOOL freezeOptions="STRING" >}} {{< leaflet-map centerLat=FLOAT centerLon=FLOAT zoom=INT width="STRING" height="STRING" resizable=BOOL maximizable=BOOL freezable=BOOL freezeOptions="STRING" >}}
{{< leaflet-layer id="STRING" apiKey="STRING" >}} {{< leaflet-layer id="STRING" apiKey="STRING" >}}
{{< leaflet-marker lat=FLOAT lon=FLOAT >}} {{< leaflet-marker lat=FLOAT lon=FLOAT >}}
{{< leaflet-track path="URL" title="STRING" downloadable=BOOL >}} {{< leaflet-track path="URL" title="STRING" downloadable=BOOL >}}
{{< leaflet-scale >}} {{< leaflet-scale >}}
{{< leaflet-elevation-profile expanded=BOOL resizable=BOOL width=INT height=INT minWidth=INT minHeight=INT maxWidth=INT maxHeight=INT >}} {{< leaflet-elevation-profile expanded=BOOL resizable=BOOL width=INT height=INT minWidth=INT minHeight=INT maxWidth=INT maxHeight=INT >}}
{{< /leaflet-map >}} {{< /leaflet-map >}}
``` ```
### Map options #### Map options
``` ```
centerLat/centerLon: centerLat/centerLon:
@@ -76,7 +91,7 @@ freezeOptions:
Example: freezeOptions=" " (to avoid the hugo-mod-leaflet default and use Leaflet.Freezy's defaults instead) Example: freezeOptions=" " (to avoid the hugo-mod-leaflet default and use Leaflet.Freezy's defaults instead)
``` ```
### Layer options #### Layer options
``` ```
id: id:
@@ -106,8 +121,7 @@ id:
https://map.geo.admin.ch/?topic=swisstopo&bgLayer=ch.swisstopo.pixelkarte-farbe&lang=en&layers=ch.swisstopo-karto.schneeschuhrouten&layers_opacity=0.8 https://map.geo.admin.ch/?topic=swisstopo&bgLayer=ch.swisstopo.pixelkarte-farbe&lang=en&layers=ch.swisstopo-karto.schneeschuhrouten&layers_opacity=0.8
Notes: Notes:
① API key required. ① API key required.
② Uses EPSG-2056 (Swiss CH1903+/LV95) projection. Cannot be combined with EPSG3857 ② Uses EPSG-2056 (Swiss CH1903+/LV95) projection. Cannot be combined with EPSG3857 (WGS 84) map layers.
(WGS 84) map layers.
apiKey: apiKey:
API key for tile access. API key for tile access.
selectorPosition: selectorPosition:
@@ -115,14 +129,14 @@ selectorPosition:
Optional, defaults to "bottomleft". If specified for more than one layer, the last one wins. Optional, defaults to "bottomleft". If specified for more than one layer, the last one wins.
``` ```
### Marker options #### Marker options
``` ```
lat/lon: lat/lon:
Coordinates of the marker as decimal values. Coordinates of the marker as decimal values.
``` ```
### Track options #### Track options
``` ```
path: path:
@@ -140,7 +154,7 @@ downloadable:
Optional, defaults to true. Optional, defaults to true.
``` ```
### Scale options #### Scale options
``` ```
position: position:
@@ -148,7 +162,7 @@ position:
Optional, defaults to "bottomright". Optional, defaults to "bottomright".
``` ```
### Elevation profile options #### Elevation profile options
``` ```
resizable: resizable:
@@ -178,3 +192,25 @@ maxHeight:
Note: Elevation profiles are only supported if exactly one track is present. Note: Elevation profiles are only supported if exactly one track is present.
``` ```
### Configuration options
There are a number of module-specific options you can add to your site configuration under the `params.modules.leaflet` key.
For example, in a YAML config file:
```yaml
params:
modules:
leaflet:
com_thunderforest_outdoors:
apiKey: YOUR_API_KEY_GOES_HERE
com_thunderforest_cycle:
apiKey: YOUR_API_KEY_GOES_HERE
com_thunderforest_landscape:
apiKey: YOUR_API_KEY_GOES_HERE
```
| Key | Description |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `<layer_id>.apiKey` | API key for the layer with the given ID. Note that the layer ID is the same as in the `leaflet-layer` shortcode options but with dots replaced with underscores. If the API is specified in the configuration _and_ the shortcode options, the latter takes precedence. |

4
layouts/shortcodes/leaflet-layer.html
View File

@@ -9,10 +9,12 @@
{{ $uniqueMapId := (printf "%s:%d" .Page.File.UniqueID .Parent.Ordinal) | md5 | safeJS }} {{ $uniqueMapId := (printf "%s:%d" .Page.File.UniqueID .Parent.Ordinal) | md5 | safeJS }}
{{ $id := .Get "id" }} {{ $id := .Get "id" }}
{{ $configId := replace (.Get "id") "." "_" }}
{{ $apiKey := default (index .Site.Params.modules.leaflet $configId "apiKey") (.Get "apiKey") }}
<script> <script>
map_options_{{ $uniqueMapId }}.layers.enabled.push({{ $id }}); map_options_{{ $uniqueMapId }}.layers.enabled.push({{ $id }});
map_options_{{ $uniqueMapId }}.layers["{{ $id }}"] = { map_options_{{ $uniqueMapId }}.layers["{{ $id }}"] = {
{{ with .Get "apiKey" }} {{ with $apiKey }}
apiKey: '{{ . }}', apiKey: '{{ . }}',
{{ end }} {{ end }}
}; };