Map
Use the map shortcode to show an interactive map.
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.
{{< map lat=52.377 long=4.90 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 >}}The shortcode supports the following arguments:
| Name | Type | Required | Default | Comment |
|---|---|---|---|---|
| class | string | ratio ratio-16x9 w-100 mx-auto | Class attribute of the inner panel element. | |
| id | string | Unique identifier of the map element, defaults to leaflet-map-n with a sequential number n. |
||
| 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). Supported values: [1 - 18]. |
By default, map support is optional. Be sure to include leaflet in your
module configuration and
page frontmatter as needed.
Change the location and style of your map with shortcode arguments.
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.
{{< map zoom=1 >}}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.
{{< map lat=52.377 long=4.90 popup="Amsterdam Central Station" popup-lat=52.378062 popup-long=4.900562 >}}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.
{{< map id="leaflet-map-london" lat=51.505 long=-0.09 zoom=10 >}}