https://github.com/martinschneider/hugo-gpx-shortcode

Shortcode to embed GPS tracks in Hugo blogs
https://github.com/martinschneider/hugo-gpx-shortcode

Last synced: 4 months ago
JSON representation

Shortcode to embed GPS tracks in Hugo blogs

• Host: GitHub
• URL: https://github.com/martinschneider/hugo-gpx-shortcode
• Owner: martinschneider
• Created: 2020-08-02T14:13:51.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T22:23:17.000Z (about 2 years ago)
• Last Synced: 2024-03-20T17:21:20.534Z (10 months ago)
• Language: JavaScript
• Size: 617 KB
• Stars: 5
• Watchers: 4
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# GPX shortcode for Hugo

This shortcode displays GPX tracks on a map using the [Leaflet library](https://leafletjs.com).

## Usage

1. Add this repo as a submodule: `git submodule add [email protected]:martinschneider/hugo-gpx-shortcode.git themes/gpx-shortcode`.

2. Add `gpx-shortcode` as a theme to your config: e.g. `theme = ["bare", "gpx-shortcode"]`

3. Use the shortcode in your posts like this: `{{< gpx "everest.gpx" >}}`.

### Configuration (optional)

```

[params.gpx]

  leafletJS = "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet-src.min.js"

  leafletGpxJS = "https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/1.7.0/gpx.min.js"

  leafletCSS = "https://unpkg.com/[email protected]/dist/leaflet.css"

  trackColors = ["blue", "darkblue", "purple"]

  layers = [ { url = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", attribution = "(c) OpenStreetMap contributors" } ]

```

Please refer to the [code](layouts/shortcodes/gpx.html) and the [Leaflet documentation](https://leafletjs.com/) for more details.

## Demo

I use this shortcode on [my blog](https://www.grainsofsand.at).

## Support

Please feel free to submit pull requests to improve this shortcode.