Maps with Leaflet.js

Story integrates Hugo Leaflet and allow you to embed maps and GPX trails in your blog posts.

This article demonstrates a handfull of the possibilities offered by this powerful combination.

Map only

Once the feature-leaflet class have been added to your article, embedding a simple map merely requires using the leaflet-map hugo shortcode. And you don’t have to take my word for it ; Just take a look at the following code:

{{< leaflet-map mapId="first_map" mapHeight="500px" mapWidth="100%" mapLat="43.2500000" mapLon="5.4500000" />}}

This is rendered as follows:

Here follows a list of parameters that can be used with the leaflet-map shortcode (Except for the caption parameters that have been added for Story, this list come directly from the Hugo Leaflet site).

Story’s specific parameters:

Parameters from the original Hugo Leaflet project

Map’s unique identifier

Maps MUST be distinguished by a unique identifier. As you can see in the above parameters list, a default identifier is computed from the digest of the coordinates that are provided to the leaflet-map.

If you plan on re-using the same map with identical coordinates, then this computed identifier will be the same for all your maps and this will viloate the unicity constrain.

In that case, you shall provide unique mapId values and make sure that they are indeed different from each other. You must do that in each and every map that may be duplicated in your page.

Direct links to your maps

In most cases, leaving MapId to its default value is a good idea. However, because it is based on cryptographic primitives, it is not always easy to guess what this default value will be.

When you fix the mapId, then you can create leverage on this knowledge to forge direct links to your maps as follows:

[a link to my map](#mapid_<your_id_here>)

Map with GPX track

You can share your hikes, motorcycle rides, snowshoeing trails, etc… by adding a GPX track to your map (You don’t need to provide coordinates, leaflet will center the track for you but be careful that your map has a unique id):

{{< leaflet-map mapHeight="400px" mapWidth="100%" ... >}}
    {{< leaflet-track trackPath="les_bories_de_tallagard.gpx" downloadIcon=true caption="Discover shepherd shelters in Provence" />}}
{{< /leaflet-map >}}

As an exemple, the GPX trail from the above snippet comes from a nice one hour walk in Provence (a region of southeastern France). Leaflet will add the elevation profile as follows:

Story’s specific parameters:

Parameters from the original Hugo Leaflet project

Map with one marker

You can showcase one particular place with a single marker:

{{< leaflet-map mapHeight="300px" mapWidth="100%" mapLat="44.9178069" mapLon="4.8852736" zoom=18 >}}
    {{< leaflet-marker markerLat="44.9175319" markerLon="4.8855297" markerContent="Gastronomic restaurant <em>(3 Michelin Star)</em>" >}}
{{< /leaflet-map >}}

or many places at once (by the way notice the use of the “caption” parameter):

Just like other sub-shortcodes, leaflet-marker takes a number of arguments that we repeat below as they come directly from the Hugo Leaflet site:

Read next: Story’s Embedded Screencasts and Videos.