hugo-leaflet

KO | EN

gitlite — search

#javascript #hacktoberfest #ai #llm #golang #android #machine-learning #deep-learning #docker #cli #kubernetes #pytorch #security #mcp

(★ 58)

Hugo Shortcodes for inserting a OSM Map, Marker or Track into your posts by using leaflet

hugo-leaflet Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Shortcodes for inserting a OSM (Open Street Maps) Map, Marker or Track into your posts by using leaflet.

I use [Leaflet](https://github.com/Leaflet/Leaflet), a custom version of [Leaflet Elevation](https://github.com/Raruto/leaflet-elevation) and [Leaflet ExtraMarkers](https://github.com/coryasilva/Leaflet.ExtraMarkers)

Initially based on the work of [Simon Frey](https://github.com/simonfrey/hugo-leaflet)

## Table of Contents

- [Table of Contents](#table-of-contents)
- [Prerequisite](#prerequisite)
- [Installation](#installation)
- [Usage](#usage)
    - [Map only](#map-only)
        - [Shortcut](#shortcut)
        - [Parameters `leaflet-map`](#parameters-leaflet-map)
    - [Map with one marker](#map-with-one-marker)
        - [Shortcut](#shortcut-1)
        - [Parameters `leaflet-marker`](#parameters-leaflet-marker)
    - [Map with multiple marker](#map-with-multiple-marker)
        - [Shortcut](#shortcut-2)
    - [Map with gpx track](#map-with-gpx-track)
        - [Shortcut](#shortcut-3)
        - [Parameters `leaflet-track`](#parameters-leaflet-track)
- [License](#license)

## Prerequisite
Make sure you already have Font Awesome icons in your project

## Installation

[Download the project as ZIP](https://github.com/altrdev/hugo-leaflet/archive/master.zip)

1. Copy the layouts folder over (containing the shortcuts)
2. Copy the assets folder over (containing js)
3. Copy the static folder over (containing css and images)
4. 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`

#### Result
![Map Example](https://raw.githubusercontent.com/altrdev/hugo-leaflet/master/others/images/example-map.png)

### 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 Example](https://raw.githubusercontent.com/altrdev/hugo-leaflet/master/others/images/example-marker.png)

### 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 Example](https://raw.githubusercontent.com/altrdev/hugo-leaflet/master/others/images/example-multi-marker.png)

### Map with GPX track

#### Shortcut
```
{{< leaflet-map ... >}}
    {{< leaflet-track trackPath="track.gpx" lineColor="#3796bf" lineWeight="5" >}}
{{< /leaflet-map >}}
```

#### Parameters `leaflet-track`

#### Result
![Map Example](https://raw.githubusercontent.com/altrdev/hugo-leaflet/master/others/images/example-track.png)

With `graphDetached=false`

![Map Example Detached](https://raw.githubusercontent.com/altrdev/hugo-leaflet/master/others/images/example-track-graphDetached.png)

## License
<p>
  <a href="./LICENSE"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/MIT_logo.svg/642px-MIT_logo.svg.png" height="60px"></a>
</p>

hugo-leaflet

hugo-leaflet Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

hugo-leaflet

hugo-leaflet Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README