Docs

Map

Use the map shortcode to show an interactive map.
Overview   Center Coordinates   Zoom Level   Identification   Arguments  

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.

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

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).
On this page