mirror of
https://gitlab.com/mrubli/hugo-mod-leaflet.git
synced 2025-10-07 01:54:24 +00:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
67efbb6661 | ||
|
|
1c8bce4a66 | ||
|
|
3fb5f2015b | ||
|
|
891cef7a8b | ||
|
|
c7bfee6f1d |
78
README.md
78
README.md
@@ -2,21 +2,25 @@
|
||||
|
||||
This module provies a number of Hugo shortcodes for easy embedding of maps into Hugo-based websites.
|
||||
|
||||
## Table of contents
|
||||
|
||||
[TOC]
|
||||
|
||||
## Example
|
||||
|
||||
Here's an example use of the map shortcodes provided by hugo-mod-leaflet:
|
||||
|
||||
```go-html-template
|
||||
{{< leaflet-map resizable=false >}}
|
||||
{{< leaflet-layer id="ch.swisstopo.pixelkarte-farbe" selectorPosition="bottomleft" >}}
|
||||
{{< leaflet-layer id="ch.swisstopo.swissimage" >}}
|
||||
{{< leaflet-layer id="ch.swisstopo.swisstlm3d-wanderwege" >}}
|
||||
{{< leaflet-layer id="ch.swisstopo.pixelkarte-farbe" selectorPosition="bottomleft" >}}
|
||||
{{< leaflet-layer id="ch.swisstopo.swissimage" >}}
|
||||
{{< 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 >}}
|
||||
```
|
||||
|
||||
@@ -26,27 +30,38 @@ And below is how this might render:
|
||||
|
||||
## 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:
|
||||
|
||||
### Syntax summary
|
||||
#### Syntax summary
|
||||
|
||||
```go-html-template
|
||||
{{< 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-marker lat=FLOAT lon=FLOAT >}}
|
||||
|
||||
{{< leaflet-track path="URL" title="STRING" downloadable=BOOL >}}
|
||||
|
||||
{{< leaflet-scale >}}
|
||||
|
||||
{{< leaflet-elevation-profile expanded=BOOL resizable=BOOL width=INT height=INT minWidth=INT minHeight=INT maxWidth=INT maxHeight=INT >}}
|
||||
|
||||
{{< /leaflet-map >}}
|
||||
```
|
||||
|
||||
### Map options
|
||||
#### Map options
|
||||
|
||||
```
|
||||
centerLat/centerLon:
|
||||
@@ -76,7 +91,7 @@ freezeOptions:
|
||||
Example: freezeOptions=" " (to avoid the hugo-mod-leaflet default and use Leaflet.Freezy's defaults instead)
|
||||
```
|
||||
|
||||
### Layer options
|
||||
#### Layer options
|
||||
|
||||
```
|
||||
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
|
||||
Notes:
|
||||
① API key required.
|
||||
② Uses EPSG-2056 (Swiss CH1903+/LV95) projection. Cannot be combined with EPSG3857
|
||||
(WGS 84) map layers.
|
||||
② Uses EPSG-2056 (Swiss CH1903+/LV95) projection. Cannot be combined with EPSG3857 (WGS 84) map layers.
|
||||
apiKey:
|
||||
API key for tile access.
|
||||
selectorPosition:
|
||||
@@ -115,14 +129,14 @@ selectorPosition:
|
||||
Optional, defaults to "bottomleft". If specified for more than one layer, the last one wins.
|
||||
```
|
||||
|
||||
### Marker options
|
||||
#### Marker options
|
||||
|
||||
```
|
||||
lat/lon:
|
||||
Coordinates of the marker as decimal values.
|
||||
```
|
||||
|
||||
### Track options
|
||||
#### Track options
|
||||
|
||||
```
|
||||
path:
|
||||
@@ -140,7 +154,7 @@ downloadable:
|
||||
Optional, defaults to true.
|
||||
```
|
||||
|
||||
### Scale options
|
||||
#### Scale options
|
||||
|
||||
```
|
||||
position:
|
||||
@@ -148,7 +162,7 @@ position:
|
||||
Optional, defaults to "bottomright".
|
||||
```
|
||||
|
||||
### Elevation profile options
|
||||
#### Elevation profile options
|
||||
|
||||
```
|
||||
resizable:
|
||||
@@ -178,3 +192,25 @@ maxHeight:
|
||||
|
||||
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. |
|
||||
|
||||
@@ -9,10 +9,12 @@
|
||||
{{ $uniqueMapId := (printf "%s:%d" .Page.File.UniqueID .Parent.Ordinal) | md5 | safeJS }}
|
||||
|
||||
{{ $id := .Get "id" }}
|
||||
{{ $configId := replace (.Get "id") "." "_" }}
|
||||
{{ $apiKey := default (index .Site.Params.modules.leaflet $configId "apiKey") (.Get "apiKey") }}
|
||||
<script>
|
||||
map_options_{{ $uniqueMapId }}.layers.enabled.push({{ $id }});
|
||||
map_options_{{ $uniqueMapId }}.layers["{{ $id }}"] = {
|
||||
{{ with .Get "apiKey" }}
|
||||
{{ with $apiKey }}
|
||||
apiKey: '{{ . }}',
|
||||
{{ end }}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user