v1.6.7

Enable a map with navPlace

When working with IIIF Presentation 3 content, digital scholars may want to visualize where items in their collection are located geographically.

The <Map> component plots Manifests that expose navPlace Point features, allowing spatial relationships to be explored interactively.

This guide walks through the prerequisites and shows how to embed a map on any MDX page.

navPlace is an IIIF extension for geographic context. Make sure your manifests contain navPlace.features entries before running the build so Canopy can extract coordinates.

1. Add navPlace data to your manifests

To display items on a map, each IIIF Manifest must include geographic information describing where it is located or relevant.

Canopy reads this information from the Manifest’s navPlace property, which contains GeoJSON-like Feature objects. Only features with a geometry.type of "Point" are plotted on the map.

{  "id": "https://example.org/iiif/manifest.json",  "type": "Manifest",  "label": {"en": ["Survey of Calcutta"]},  "navPlace": {    "type": "FeatureCollection",    "features": [      {        "type": "Feature",        "geometry": {          "type": "Point",          "coordinates": [88.3639, 22.5726]        },        "properties": {          "label": {"en": ["Calcutta"]},          "summary": {"en": ["British survey depot"]}        }      }    ]  }}

Canopy collects these features, normalizes titles + thumbnails, and writes them to site/api/navplace.json during npm run build or npm run dev.

2. Embed a Map in MDX

Once your Manifests expose navPlace data, you can embed a map anywhere in your site to provide a geographic overview of your collection.

Place a <Map> component on any MDX page (content/**/*.mdx) or in content/works/_layout.mdx. The component is server-side–rendering safe and renders a lightweight placeholder on the server and hydrates on the client using Leaflet and MarkerCluster.

content/about/maps.mdx
---title: Mapping the Collection--- # Mapping the Collection Our manifests encode navPlace metadata, so we can show a geographic overview: <Map  iiifContent="https://tamulib-dc-labs.github.io/sesquicentennial-manifests/collections.json"  height="600px"/>

The <Map> component accepts the following props:

  • iiifContent: A IIIF Manifest or Collection URL. Canopy resolves the resource and renders markers for all available navPlace points.
  • height: Controls the height of the rendered map canvas (string or number). Defaults to 600px.

Note: The iiifContent resource must be a part of your Canopy site in order to be used with Map. External resources cannot be loaded.

3. Add custom points with MapPoint

In addition to rendering points from navPlace, you can add custom locations directly to a <Map> using <MapPoint>. This is useful for places that lack navPlace data or for locations that are not tied to IIIF resources.

When iiifContent is omitted, the map renders only the custom points you provide.

content/about/maps.mdx
<Map  iiifContent="https://tamulib-dc-labs.github.io/sesquicentennial-manifests/collections.json"  height="520px">    <MapPoint lat="41.8781" lng="-87.6298" title="Newberry Library" summary="Chicago, IL" href="/works/newberry-atlas" />    <MapPoint lat="22.5726" lng="88.3639" title="Calcutta" summary="Survey depot" /> </Map>

Each <MapPoint> represents a single geographic location and supports the following props:

  • lat / lng (required) — decimal degrees.
  • title, summary, href, thumbnail.
  • Child MDX content for longer descriptions (<MapPoint>…</MapPoint>).

By default, custom points render as informational markers with unlinked titles. Add an href when the point should navigate the reader to another page or resource. If thumbnail is omitted, the map reuses the first available referenced manifest thumbnail so the popup still includes a visual cue.

Linking custom points to works

When a location should direct readers to one or more items in your collection, associate the point with IIIF Manifests using referencedManifests (or the shorthand manifest / manifests).

Pair these values with the page’s referencedManifests front matter so Canopy can resolve local /works/*.html links automatically.

<Map height="420px">  <MapPoint    lat="30.6181"    lng="-96.3387"    title="Foster Hall"    summary="Dormitory completed in 1899."    referencedManifests={['https://tamulib-dc-labs.github.io/sesquicentennial-manifests/building_history/Foster_Hall.json']}  /></Map>

4. Build and preview your map

Once your navPlace data and map markup are in place, run your normal development workflow to generate and preview the map:

npm run dev   # watches navPlace changes and rebuilds the dataset# ornpm run build

If editing your Github files directly, simply edit and save.

During the build, Canopy collects and normalizes all navPlace features and makes them available to the <Map> component. The map viewer automatically loads Leaflet and MarkerCluster via site/scripts/canopy-map.js.

Popups are populated from each Manifest’s cached metadata—including thumbnails, labels, and links.