This rune is part of @refrakt-md/places. Install with npm install @refrakt-md/places and add "@refrakt-md/places" to the plugins array in your refrakt.config.json.

Map

Transform lists of locations into interactive maps. Supports named pins with coordinates or addresses, route lines, and grouped layers.

Simple pins

List items with coordinates become map pins. Bold text sets the pin name, italic text adds a description.

{% map zoom="13" center="48.8566, 2.3522" %}
- **Louvre Museum** - *World's largest art museum* - 48.8606, 2.3376
- **Eiffel Tower** - *Iconic iron lattice tower* - 48.8584, 2.2945
- **Notre-Dame** - *Medieval Catholic cathedral* - 48.8530, 2.3499
{% /map %}

<rf-map data-rune="map" typeof="Place" data-rune-fields="{&quot;zoom&quot;:&quot;13&quot;,&quot;center&quot;:&quot;48.8566, 2.3522&quot;,&quot;variant&quot;:&quot;street&quot;,&quot;height&quot;:&quot;medium&quot;,&quot;provider&quot;:&quot;openstreetmap&quot;,&quot;interactive&quot;:&quot;true&quot;,&quot;route&quot;:&quot;false&quot;,&quot;cluster&quot;:&quot;false&quot;}">
  <ol data-name="pins">
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;48.8606&quot;,&quot;lng&quot;:&quot;2.3376&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;&quot;}">
      <span data-name="name">Louvre Museum</span>
      <span data-name="description">World's largest art museum</span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;48.8584&quot;,&quot;lng&quot;:&quot;2.2945&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;&quot;}">
      <span data-name="name">Eiffel Tower</span>
      <span data-name="description">Iconic iron lattice tower</span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;48.8530&quot;,&quot;lng&quot;:&quot;2.3499&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;&quot;}">
      <span data-name="name">Notre-Dame</span>
      <span data-name="description">Medieval Catholic cathedral</span>
    </li>
  </ol>
</rf-map>

Louvre MuseumWorld's largest art museum
Eiffel TowerIconic iron lattice tower
Notre-DameMedieval Catholic cathedral

<rf-map typeof="Place" class="rf-map rf-map--street rf-map--medium" data-variant="street" data-height="medium" data-zoom="13" data-center="48.8566, 2.3522" data-provider="openstreetmap" data-interactive="true" data-route="false" data-cluster="false" data-rune="map" data-density="compact">
  <div data-name="container" class="rf-map__container">
    <ol data-name="pins" class="rf-map__pins">
      <li data-field="pin" class="rf-map-pin" data-lat="48.8606" data-lng="2.3376" data-address="" data-url="" data-group="" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Louvre Museum</span>
        <span data-name="description" class="rf-map-pin__description">World's largest art museum</span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="48.8584" data-lng="2.2945" data-address="" data-url="" data-group="" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Eiffel Tower</span>
        <span data-name="description" class="rf-map-pin__description">Iconic iron lattice tower</span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="48.8530" data-lng="2.3499" data-address="" data-url="" data-group="" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Notre-Dame</span>
        <span data-name="description" class="rf-map-pin__description">Medieval Catholic cathedral</span>
      </li>
    </ol>
  </div>
</rf-map>

Route

Ordered lists with route="true" draw a connecting line between pins.

{% map route="true" variant="terrain" %}
- **Portland** - 45.5152, -122.6784
- **Crater Lake** - 42.8684, -122.1685
- **Redwood National Park** - 41.2132, -124.0046
- **San Francisco** - 37.7749, -122.4194
{% /map %}

<rf-map data-rune="map" typeof="Place" data-rune-fields="{&quot;zoom&quot;:&quot;&quot;,&quot;center&quot;:&quot;&quot;,&quot;variant&quot;:&quot;terrain&quot;,&quot;height&quot;:&quot;medium&quot;,&quot;provider&quot;:&quot;openstreetmap&quot;,&quot;interactive&quot;:&quot;true&quot;,&quot;route&quot;:&quot;true&quot;,&quot;cluster&quot;:&quot;false&quot;}">
  <ol data-name="pins">
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;45.5152&quot;,&quot;lng&quot;:&quot;-122.6784&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;&quot;}">
      <span data-name="name">Portland</span>
      <span data-name="description"></span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;42.8684&quot;,&quot;lng&quot;:&quot;-122.1685&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;&quot;}">
      <span data-name="name">Crater Lake</span>
      <span data-name="description"></span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;41.2132&quot;,&quot;lng&quot;:&quot;-124.0046&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;&quot;}">
      <span data-name="name">Redwood National Park</span>
      <span data-name="description"></span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;37.7749&quot;,&quot;lng&quot;:&quot;-122.4194&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;&quot;}">
      <span data-name="name">San Francisco</span>
      <span data-name="description"></span>
    </li>
  </ol>
</rf-map>

Portland
Crater Lake
Redwood National Park
San Francisco

<rf-map typeof="Place" class="rf-map rf-map--terrain rf-map--medium" data-variant="terrain" data-height="medium" data-zoom="" data-center="" data-provider="openstreetmap" data-interactive="true" data-route="true" data-cluster="false" data-rune="map" data-density="compact">
  <div data-name="container" class="rf-map__container">
    <ol data-name="pins" class="rf-map__pins">
      <li data-field="pin" class="rf-map-pin" data-lat="45.5152" data-lng="-122.6784" data-address="" data-url="" data-group="" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Portland</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="42.8684" data-lng="-122.1685" data-address="" data-url="" data-group="" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Crater Lake</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="41.2132" data-lng="-124.0046" data-address="" data-url="" data-group="" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Redwood National Park</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="37.7749" data-lng="-122.4194" data-address="" data-url="" data-group="" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">San Francisco</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
    </ol>
  </div>
</rf-map>

Grouped layers

Headings create pin groups that can be toggled as map layers.

{% map zoom="12" center="51.5074, -0.1278" %}
## Restaurants
- **Dishoom** - 51.5114, -0.1263
- **Bao** - 51.5133, -0.1375

## Museums
- **Tate Modern** - 51.5076, -0.0994
- **V&A** - 51.4966, -0.1722
{% /map %}

<rf-map data-rune="map" typeof="Place" data-rune-fields="{&quot;zoom&quot;:&quot;12&quot;,&quot;center&quot;:&quot;51.5074, -0.1278&quot;,&quot;variant&quot;:&quot;street&quot;,&quot;height&quot;:&quot;medium&quot;,&quot;provider&quot;:&quot;openstreetmap&quot;,&quot;interactive&quot;:&quot;true&quot;,&quot;route&quot;:&quot;false&quot;,&quot;cluster&quot;:&quot;false&quot;}">
  <ol data-name="pins">
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;51.5114&quot;,&quot;lng&quot;:&quot;-0.1263&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;Restaurants&quot;}">
      <span data-name="name">Dishoom</span>
      <span data-name="description"></span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;51.5133&quot;,&quot;lng&quot;:&quot;-0.1375&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;Restaurants&quot;}">
      <span data-name="name">Bao</span>
      <span data-name="description"></span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;51.5076&quot;,&quot;lng&quot;:&quot;-0.0994&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;Museums&quot;}">
      <span data-name="name">Tate Modern</span>
      <span data-name="description"></span>
    </li>
    <li data-field="pin" data-rune="map-pin" data-rune-fields="{&quot;lat&quot;:&quot;51.4966&quot;,&quot;lng&quot;:&quot;-0.1722&quot;,&quot;address&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;,&quot;group&quot;:&quot;Museums&quot;}">
      <span data-name="name">V&amp;A</span>
      <span data-name="description"></span>
    </li>
  </ol>
</rf-map>

Dishoom
Bao
Tate Modern
V&A

<rf-map typeof="Place" class="rf-map rf-map--street rf-map--medium" data-variant="street" data-height="medium" data-zoom="12" data-center="51.5074, -0.1278" data-provider="openstreetmap" data-interactive="true" data-route="false" data-cluster="false" data-rune="map" data-density="compact">
  <div data-name="container" class="rf-map__container">
    <ol data-name="pins" class="rf-map__pins">
      <li data-field="pin" class="rf-map-pin" data-lat="51.5114" data-lng="-0.1263" data-address="" data-url="" data-group="Restaurants" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Dishoom</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="51.5133" data-lng="-0.1375" data-address="" data-url="" data-group="Restaurants" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Bao</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="51.5076" data-lng="-0.0994" data-address="" data-url="" data-group="Museums" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">Tate Modern</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
      <li data-field="pin" class="rf-map-pin" data-lat="51.4966" data-lng="-0.1722" data-address="" data-url="" data-group="Museums" data-rune="map-pin" data-density="full">
        <span data-name="name" class="rf-map-pin__name">V&amp;A</span>
        <span data-name="description" class="rf-map-pin__description"></span>
      </li>
    </ol>
  </div>
</rf-map>

Height variants

Control the map height with the height attribute.

{% map height="small" %}
- **London** - 51.5074, -0.1278
{% /map %}

{% map height="large" %}
- **Tokyo** - 35.6762, 139.6503
{% /map %}

Attributes

Attribute	Type	Default	Description
`zoom`	number	auto	Initial zoom level (1–20)
`center`	string	auto	Center point — coordinates or address
`variant`	string	`street`	Map variant: `street`, `satellite`, `terrain`, `dark`, `minimal`
`height`	string	`medium`	Container height: `small`, `medium`, `large`, `full`
`provider`	string	`openstreetmap`	Tile provider: `openstreetmap`, `mapbox`
`interactive`	string	`true`	Enable pan/zoom interaction
`route`	string	`false`	Connect pins with a route line
`cluster`	string	`false`	Cluster nearby pins at low zoom

Markdown reinterpretation

Markdown	Interpretation
Unordered list	Location pins
Ordered list	Route waypoints (sequential)
Bold text in list item	Pin name
Italic text in list item	Pin description (shown in popup)
Heading	Pin group label (toggleable layers)
Coordinates in text	Direct lat/lng position
Address text	Geocoded via Nominatim at runtime

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Map