Map

Link copied to clipboard

Use the map shortcode to show an interactive map.

Overview

Use the map shortcode to show an interactive map, powered by Leaflet . The shortcode is a wrapper of the Leaflet library that provides basic functionality. As an example, the following shortcode displays an interactive map of the city of Amsterdam.

Add the following configuration to your page’s frontmatter to enable Leaflet:

---
modules: ["leaflet"]
---

Center coordinates

Specify the map center by providing lat and long values. Add a marker to the map by specifying a popup text and popup-lat and popup-long coordinates. The following example displays the city center of Amsterdam and adds a marker for the central train station.

markdown

{{< map lat=52.377 long=4.90 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 >}}

Zoom level

Set the zoom to a value of 1 to display a world map. The map is centered on Europe by default, adjust the lat and long values to set a different center.

markdown

{{< map zoom=1 >}}

Identification

Assign a specific identifier to the map by setting the id argument. The following example displays a map for the city of London with a unique id.

markdown

{{< map id="leaflet-map-london" lat=51.505 long=-0.09 zoom=10 >}}

Gestures

The map uses cooperative gestures, so scrolling the page never gets trapped by a map in its path. It only responds to a gesture that is unambiguously meant for it.

Gesture	Result
Wheel	Scrolls the page
`Ctrl`/`⌘` + wheel	Zooms the map
Mouse drag	Pans the map
One finger	Scrolls the page
Two fingers	Pans and pinch-zooms the map

A gesture that the map ignores briefly shows an overlay explaining how to address the map instead. Override the mapZoomHint and mapDragHint translations to change its wording.

Arguments

The shortcode supports the following arguments:

Name	Type	Default	Comment
class	string	`ratio ratio-16x9 w-100 mx-auto`	Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id	string		Unique identifier of the current element.
lat	float, float64	`52.377`	Latitude of the map center.
long	float, float64	`4.9`	Longitude of the map center.
popup	string		Optional text of a popup marker.
popup-lat	float, float64		Latitude of the popup marker.
popup-long	float, float64		Longitude of the popup marker.
zoom	int	`13`	Initial map zoom level between 1 (minimum zoom) - 18 (maximum zoom).

Name	Type	Default
class	string	`ratio ratio-16x9 w-100 mx-auto`
Class attributes of the element. It supports Bootstrap attributes to modify the styling of the element.
id	string
Unique identifier of the current element.
lat	float, float64	`52.377`
Latitude of the map center.
long	float, float64	`4.9`
Longitude of the map center.
popup	string
Optional text of a popup marker.
popup-lat	float, float64
Latitude of the popup marker.
popup-long	float, float64
Longitude of the popup marker.
zoom	int	`13`
Initial map zoom level between 1 (minimum zoom) - 18 (maximum zoom).

• docs(map): document the cooperative gestures (0291209)

On this page

Docs

Map

Overview

Center coordinates

Zoom level

Identification

Gestures

Arguments