Docs

Map

Last modified on June 7, 2025 • 2 min read • 419 words
Component  
Component  
Share via
Use the map shortcode to show an interactive map.
Overview   Arguments   Configuration   Examples   Zoom Level   Center Coordinates   Identification  

Overview  

Added in v0.16.0   

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.

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

Arguments  

The shortcode supports the following arguments:

Name Type Required 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 Required 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).

Configuration  

By default, map support is optional. Be sure to include leaflet in your Module Configuration and Page Frontmatter as needed.

Examples  

Change the location and style of your map with shortcode arguments.

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 >}}

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 display 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 >}}

Identification  

Assign a specific identified 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 >}}
On this page: