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-elevation="flush" 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-elevation="flush" 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-elevation="flush" 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

`map`

Attribute	Type	Required	Description
`zoom`	`string`	—	Initial zoom level of the map (higher values zoom in closer).
`center`	`string`	—	Coordinates to center the map on (e.g. "48.8566, 2.3522").
`variant`	`"street" \| "satellite" \| "terrain" \| "dark" \| "minimal"`	—	Visual style of the map tiles: street, satellite, terrain, dark, or minimal.
`height`	`"small" \| "medium" \| "large" \| "full"`	—	Vertical size of the map container: small, medium, large, or full.
`provider`	`"openstreetmap" \| "mapbox"`	—	Tile provider used for rendering: openstreetmap or mapbox.
`interactive`	`boolean`	—	Enable or disable pan and zoom interaction on the map.
`route`	`boolean`	—	Enable or disable drawing a route line between pins.
`cluster`	`boolean`	—	Enable or disable grouping nearby pins into clusters at low zoom.

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section
prominence	this rune has no page-section header

`map-pin`

Attribute	Type	Required
`name`	`string`	—
`description`	`string`	—
`lat`	`string`	—
`lng`	`string`	—
`address`	`string`	—
`url`	`string`	—
`group`	`string`	—

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section
prominence	this rune has no page-section header

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

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Map

Simple pins

Route

Grouped layers

Height variants

Attributes

`map`

Universal attributes

`map-pin`

Universal attributes

Markdown reinterpretation