This rune is part of @refrakt-md/places. Install with npm install @refrakt-md/places and add "@refrakt-md/places" to the packages 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 %}

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

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">
    <meta content="13" data-field="zoom" />
    <meta content="48.8566, 2.3522" data-field="center" />
    <meta content="street" data-field="variant" />
    <meta content="medium" data-field="height" />
    <meta content="openstreetmap" data-field="provider" />
    <meta content="true" data-field="interactive" />
    <meta content="false" data-field="route" />
    <meta content="false" data-field="cluster" />
    <ol data-name="pins" class="rf-map__pins">
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="48.8606" data-field="lat" />
        <meta content="2.3376" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="48.8584" data-field="lat" />
        <meta content="2.2945" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="48.8530" data-field="lat" />
        <meta content="2.3499" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="" data-field="group" />
      </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 %}

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

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-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">
    <meta content="" data-field="zoom" />
    <meta content="" data-field="center" />
    <meta content="terrain" data-field="variant" />
    <meta content="medium" data-field="height" />
    <meta content="openstreetmap" data-field="provider" />
    <meta content="true" data-field="interactive" />
    <meta content="true" data-field="route" />
    <meta content="false" data-field="cluster" />
    <ol data-name="pins" class="rf-map__pins">
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="45.5152" data-field="lat" />
        <meta content="-122.6784" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="42.8684" data-field="lat" />
        <meta content="-122.1685" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="41.2132" data-field="lat" />
        <meta content="-124.0046" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="37.7749" data-field="lat" />
        <meta content="-122.4194" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="" data-field="group" />
      </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 %}

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

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">
    <meta content="12" data-field="zoom" />
    <meta content="51.5074, -0.1278" data-field="center" />
    <meta content="street" data-field="variant" />
    <meta content="medium" data-field="height" />
    <meta content="openstreetmap" data-field="provider" />
    <meta content="true" data-field="interactive" />
    <meta content="false" data-field="route" />
    <meta content="false" data-field="cluster" />
    <ol data-name="pins" class="rf-map__pins">
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="51.5114" data-field="lat" />
        <meta content="-0.1263" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="Restaurants" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="51.5133" data-field="lat" />
        <meta content="-0.1375" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="Restaurants" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="51.5076" data-field="lat" />
        <meta content="-0.0994" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="Museums" data-field="group" />
      </li>
      <li data-field="pin" class="rf-map-pin" 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>
        <meta content="51.4966" data-field="lat" />
        <meta content="-0.1722" data-field="lng" />
        <meta content="" data-field="address" />
        <meta content="" data-field="url" />
        <meta content="Museums" data-field="group" />
      </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

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Map