# Map

Use the map shortcode to show an interactive map.

## Overview

Added in v0.16.0

Use the map shortcode to show an interactive map, powered by [Leaflet](https://leafletjs.com). 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:

```yml
---
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 | Description |
| --- | --- | --- | --- | --- |
| `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 |  | `52.377` | Latitude of the map center. |
| `long` | float |  | `4.9` | Longitude of the map center. |
| `popup` | string |  |  | Optional text of a popup marker. |
| `popup-lat` | float |  |  | Latitude of the popup marker. |
| `popup-long` | float |  |  | Longitude of the popup marker. |
| `zoom` | int |  | `13` | Initial map zoom level between 1 (minimum zoom) - 18 (maximum zoom). |