hugo-leaflet
hugo-leaflet copied to clipboard
altrdev
Hugo Shortcodes for inserting a OSM Map, Marker or Track into your posts by using leaflet
Shortcodes for inserting a OSM (Open Street Maps) Map, Marker or Track into your posts by using leaflet.
I use Leaflet, a custom version of Leaflet Elevation and Leaflet ExtraMarkers
Initially based on the work of Simon Frey
Table of Contents
- Table of Contents
- Prerequisite
- Installation
- Usage
- Map only
- Shortcut
- Parameters
leaflet-map
- Map with one marker
- Shortcut
- Parameters
leaflet-marker
- Map with multiple marker
- Shortcut
- Map with gpx track
- Shortcut
- Parameters
leaflet-track
- Map only
- License
Prerequisite
Make sure you already have Font Awesome icons in your project
Installation
- Copy the layouts folder over (containing the shortcuts)
- Copy the assets folder over (containing js)
- Copy the static folder over (containing css and images)
- Call the loader partial layout in every post or globally in the theme
{{ partial "leaflet-loader" . }}
I recommend add it globally in your <head> and use a parameter to include or exclude like this:
{{ if .HasShortcode "leaflet-map" }}
{{ partial "leaflet-loader" . }}
{{ end }}
Usage
Map only
Shortcut
{{< leaflet-map mapHeight="500px" mapWidth="100%" mapLat="27.66995" mapLon="85.43249" >}}
Parameters leaflet-map
| Parameter | Description | Mandatory | Default | Possible values |
|---|---|---|---|---|
| mapHeight | Map height size | no | "400px" | any number in px |
| mapWidth | Map width size | no | "100%" | any number in px or % |
| mapLat | Latitude where to center the map | yes | "" | any valid coords number |
| mapLon | Longitude where to center the map | yes | "" | any valid coords number |
| mapId | Unique id. Useful for add multiple map in the post with same longitude and latitude | no | md5(mapLat,mapLon) | any string |
| zoom | The zoom level. If set, it must be parsable as int. | no | "13" | any number |
| scrollWheelZoom | Enable or disable zoom with mouse scroll wheel | no | "true" | "true" or "false" |
Result
Map with one marker
Shortcut
{{< leaflet-map ... >}}
{{< leaflet-marker markerLat="27.66995" markerLon="85.43249" >}}
{{< /leaflet-map >}}
Parameters leaflet-marker
| Parameter | Description | Mandatory | Default | Possible values |
|---|---|---|---|---|
| markerLat | Latitude where to place the marker | yes | "" | any number in px |
| markerLon | Longitude where to place the marker | yes | "" | any number in px or % |
| markerContent | Popup content text | no | "" | any text, html accepted |
Result
Map with multiple marker
Shortcut
{{< leaflet-map ... >}}
{{< leaflet-marker markerLat="27.66995" markerLon="85.43249" >}}
{{< leaflet-marker markerLat="27.66995" markerLon="85.43255" >}}
{{< leaflet-marker markerLat="27.66995" markerLon="85.43345" >}}
{{< /leaflet-map >}}
Result
Map with GPX track
Shortcut
{{< leaflet-map ... >}}
{{< leaflet-track trackPath="track.gpx" lineColor="#3796bf" lineWeight="5" >}}
{{< /leaflet-map >}}
Parameters leaflet-track
| Parameter | Description | Mandatory | Default | Possible values |
|---|---|---|---|---|
| trackPath | Your GPX file. You must place in static/gpx folder. |
yes | "" | any filename like "my_track.gpx" |
| lineColor | Line track color | no | "#006EFF" | any valid hex color |
| lineWeight | Line track weight on the map | no | "3" | any number |
| lineOpacity | Line track opacity on the map | no | "1" | decimal range from 0 to 1 |
| graphPosition | Elevation graph position on the map. Not valid if you use graphDetached |
no | "topright" | "myLocation" |
| graphTheme | Elevation graph theme already present | no | "steelblue-theme" | "steelblue-theme", "lime-theme" or "purple-theme" |
| graphWidth | Elevation graph width. Not valid if you use graphDetached |
no | "500" | any number |
| graphHeight | Elevation graph height | no | "150" | any number |
| graphFollowMarker | Auto zoom on the mouse movement over the map | no | false | true or false |
| graphCollapsed | Hide elevation graph below the button | no | false | true or false |
| graphDetached | Detach elevation graph outside map | no | true | true or false |
| markerIcon | Waypoint Fontawesome icon name | no | "fa-thumb-tack" | "fa-thumb-tack" (see fontawesome documentation) |
| markerIconColor | Waypoint icon color | no | "cyan" | "red", "orange-dark", "orange", "yellow", "blue-dark", "cyan", "purple", "violet", "pink", "green-dark", "green", "green-light", "black", "white" |
| markerIconShape | Waypoint icon shape | no | "penta" | "circle", square, penta or star |
| markerIconClasses | Extra classes for extends icon css | no | "fa-icon-marker" | "my-class my-second-class" |
| markerStartIcon | Start Waypoint Fontawesome icon name | no | "fa-play" | "fa-play" (see fontawesome documentation) |
| markerStartIconColor | Start Waypoint icon color | no | "green-light" | "red", "orange-dark", "orange", "yellow", "blue-dark", "cyan", "purple", "violet", "pink", "green-dark", "green", "green-light", "black", "white" |
| markerStartIconShape | Start Waypoint icon shape | no | "circle" | "circle", square, penta or star |
| markerStartIconClasses | Extra classes for extends start icon css | no | "fa-icon-marker fa-icon-start-stop" | "my-class my-second-class" |
| markerEndIcon | End Waypoint Fontawesome icon name | no | "fa-flag-checkered" | "fa-flag-checkered" (see fontawesome documentation) |
| markerEndIconColor | End Waypoint icon color | no | "red" | "red", "orange-dark", "orange", "yellow", "blue-dark", "cyan", "purple", "violet", "pink", "green-dark", "green", "green-light", "black", "white" |
| markerEndIconShape | End Waypoint icon shape | no | "circle" | "circle", square, penta or star |
| markerEndIconClasses | Extra classes for extends end icon css | no | "fa-icon-marker fa-icon-start-stop" | "my-class my-second-class" |
Result
With graphDetached=false
License
altrdev