Enable a map with navPlace

<Map> plots geographic points from IIIF Manifests and from <MapPoint> elements you write in MDX. Use navPlace when the Manifest supplies coordinates. Use MapPoint to add your own geographic context.

The British India art demo includes Bombay Harbour : fishing boats in the monsoon. Its subject metadata names Mumbai Harbour, but its Manifest has no navPlace data. The examples below add an approximate marker for Mumbai. This is an editorial choice, not a provider coordinate or the precise location of the scene.

1. Add a custom point

Place a <Map> on any MDX page. Add a <MapPoint> with latitude and longitude in decimal degrees. The referencedManifests prop connects the marker to a work and supplies its thumbnail and link. List the same Manifest in the page's frontmatter so Canopy can resolve the local work page.

content/about/maps.mdx

---
title: Mapping Bombay Harbour
referencedManifests:
  - https://api.dc.library.northwestern.edu/api/v2/works/9307533e-0204-4b19-b79c-e0a850c6a46a?as=iiif
---

# Mapping Bombay Harbour

This marker places the work in Mumbai. It does not locate the scene precisely.

<Map height="520px">
  <MapPoint
    lat="19.08"
    lng="72.88"
    title="Mumbai"
    summary="Approximate city marker added for this example."
    referencedManifests={[
      "https://api.dc.library.northwestern.edu/api/v2/works/9307533e-0204-4b19-b79c-e0a850c6a46a?as=iiif",
    ]}
  />
</Map>

---title: Mapping Bombay HarbourreferencedManifests:  - https://api.dc.library.northwestern.edu/api/v2/works/9307533e-0204-4b19-b79c-e0a850c6a46a?as=iiif--- # Mapping Bombay Harbour This marker places the work in Mumbai. It does not locate the scene precisely. <Map height="520px">  <MapPoint    lat="19.08"    lng="72.88"    title="Mumbai"    summary="Approximate city marker added for this example."    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/9307533e-0204-4b19-b79c-e0a850c6a46a?as=iiif",    ]}  /></Map>

Each <MapPoint> supports these props:

lat and lng: required coordinates in decimal degrees.
title, summary, href, and thumbnail: optional popup content.
referencedManifests: an array of IIIF Manifest URLs. The manifest and manifests props provide shorthand for one or several references.
Child MDX content for a longer description.

A point with no link or resolved Manifest has an unlinked title. Supply href to choose a destination. If you omit thumbnail, Canopy uses the first available thumbnail from the point's referenced Manifests.

2. Read coordinates from navPlace

The IIIF navPlace extension adds geographic context to a Manifest. Canopy reads navPlace.features and plots features whose geometry.type is "Point".

When publishing your own Manifest, you can add a property like the one below. This fragment shows the same editorial city marker used above. It is not part of Northwestern's Manifest.

{  "navPlace": {    "type": "FeatureCollection",    "features": [      {        "type": "Feature",        "geometry": {          "type": "Point",          "coordinates": [72.88, 19.08]        },        "properties": {          "label": {"en": ["Mumbai"]},          "summary": {"en": ["Approximate city marker added for this example."]}        }      }    ]  }}

GeoJSON coordinates use longitude first, then latitude. Keep that order when adding a Point. Document the source and precision of any coordinates you publish.

3. Select a Manifest or Collection

Set iiifContent to a Manifest or Collection URL already included in your Canopy site. Canopy plots the available navPlace points for that resource. External resources that are not part of the site cannot supply markers.

The demo's Manifests do not supply navPlace points. This example selects the demo Collection and adds a custom point so the map still has a marker:

<Map  iiifContent="https://api.dc.library.northwestern.edu/api/v2/collections/94536627-cfdf-413c-852b-0cb16d986da3?as=iiif"  height="600px">  <MapPoint    lat="19.08"    lng="72.88"    title="Mumbai"    summary="Approximate city marker added for this example."    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/9307533e-0204-4b19-b79c-e0a850c6a46a?as=iiif",    ]}  /></Map>

Omit iiifContent to show only custom points. Use height to set the map's height; it defaults to 600px.

4. Build and preview

Run the development server to preview your map:

npm run dev

Run npm run build to generate the static site. Canopy writes the collected navPlace features to site/api/navplace.json. The map renders a placeholder on the server, then loads Leaflet and MarkerCluster in the browser through site/scripts/canopy-map.js.