Juncture lets you add interactive maps to your Markdown posts using a simple include. You do not need to write HTML, CSS, or JavaScript.

---

The Simplest Example

This creates a map centered on Monument Valley in Utah.

{% include embed/map.html
    center="37.01056, -110.2425"
%}

This example creates a map centered on the coordinates 37.01056, -110.2425, which correspond to the location of Monument Valley in Utah. The map is displayed at the default zoom level.

---

Example with a Custom Caption and Location Marker

In this example a custom caption is defined

{% include embed/map.html
    center="37.01056, -110.2425"
    caption="Monument Valley, UT USA"
    markers="37.01056, -110.2425~Monument Valley"
%}

In this example a caption and map marker are displayed.

---

Component Attribute

Required Attributes

You must provide a center attribute to the map tag. This defines the map location. The zoom attribute is typically provided to control the level of detail displayed on the map when initially displayed. This can be changed by viewer. If not specified in an attribute, the initial zoom level is 8.

center

The for the map center attribute.

You can use:

Geo Coordinates

center="37.01056, -110.2425"

A Wikidata ID

center="Q852197"

For example,

{% include embed/map.html
    center="32.783333, -79.931944"
%}

---

Optional Attributes

These improve presentation but are not required.

---

allmaps

Defines an Allmaps ID referencing an IIIF image to use as a map layer. This is often used to create a historical map overlay.

basemap

Defines a basemap to add to the map.

caption

Defines a caption to add to the map viewer.

geojson

Defines a URL to a GeoJSON file to apply as a map layer.

markers

Defines markers to add to the map. Multiple markers are delimited with the pipe (‘

’) character. A marker can be defined using a Wikidata ID or lat/lon position coordinates. When using coordinates a label and image can also be provided using a tilde (‘~’) delimited values for the marker.

zoom

Defines initial zoom level. This is a number between 1 and 20, where the higher number reveals more detail.

zoom="10"

---