Interactive Maps

Xanthan includes a simple way to create interactive maps that automatically display pins for any pages that include geographic coordinates. This is perfect for projects involving places, travel narratives, historical sites, or any content with a spatial dimension.

How It Works

The map component uses Leaflet, an open-source JavaScript library for interactive maps. It automatically scans all your pages for geographic coordinates and creates clickable markers with popup information.

Adding Geographic Data to Pages

To make a page appear on the map, add these fields to the YML header at the top of your page:

---
title: Seedling
geo: [37.88, -81.08]
placename: New River Gorge National Park
summary: Perfect for beginners getting comfortable with Markdown and digital essays.
header-image: images/seedling-card.png
---

Required Fields

Optional Fields

Creating a Map

To add a map to any page, use this include code:

{% include nav/map.html
  height="600px"
  width="100%"
  start_coords="[39.8283, -98.5795]"
  zoom=4
%}

Map Parameters

All parameters are optional and have sensible defaults:

Example Map

Here’s a smaller map showing the example scrollstories:

Finding Coordinates

To get coordinates for your locations:

  1. Open Google Maps
  2. Right-click on the location
  3. Click the coordinates at the top of the menu to copy them
  4. The format will be lat, lng which you can use as [lat, lng] in your YML

Tips