Map

<Map> renders an interactive Leaflet view that plots navPlace Point features extracted from your IIIF manifests.

Using IIIF navPlace

Provide any IIIF Manifest or Collection URL via iiifContent. When a manifest is supplied, the map plots only that record’s navPlace features. When a collection is supplied, the runtime inspects each manifest listed in the collection and includes every navPlace-enabled work it finds. Note that this currently only supports Collections whose manifests are set in your canopy.yml file as the build process pre-fetches and caches those records.

<Map iiifContent="https://tamulib-dc-labs.github.io/sesquicentennial-manifests/collections.json" />

Custom locations with MapPoint

Wrap MapPoint children inside <Map> to add arbitrary coordinates (including non-IIIF records). Each MapPoint renders alongside the navPlace markers resolved from iiifContent. If you omit iiifContent, the map only displays your custom points.

By default, custom MapPoint popups render their titles as plain text so visitors aren't pushed to another page. Pass an href prop to opt into a link. Both coordinates lat and lng are required.

<Map defaultZoom={12}>  <MapPoint    lat="26.8709"    lng="80.9129"    title="Lord Hastings' party entering the city of Lucknow on elephant back"    summary="Watercolour of a procession entering Lucknow from 'Views by Seeta Ram from Cawnpore to Mohumdy Vol. IV' produced for Lord Moira, afterwards the Marquess of Hastings, by Sita Ram between 1814-15."    thumbnail="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Lord_Hastings%27_party_entering_the_city_of_Lucknow_on_elephant_back_-_British_Library%2C_Add.Or.4749.jpg/640px-Lord_Hastings%27_party_entering_the_city_of_Lucknow_on_elephant_back_-_British_Library%2C_Add.Or.4749.jpg"  /></Map>

Loading map…

Reference IIIF works from a custom point

Attach referencedManifests to any MapPoint to render a list inside the marker. This links automatically resolve to that relative local page in /works/ if available. You must also provide referencedManifests so each point pulls teaser data from the page’s cited works. When no thumbnail prop is supplied, the map reuses the first referenced manifest thumbnail so the popup still showcases artwork.

---referencedManifests:  - https://api.dc.library.northwestern.edu/api/v2/works/c26591b2-994b-4ba3-a87e-9124419fa91b?as=iiif  - https://api.dc.library.northwestern.edu/api/v2/works/4bdb5a22-6c7f-498d-8e6e-e49ea9bc4778?as=iiif  - https://api.dc.library.northwestern.edu/api/v2/works/d4c62d7f-f50d-4b29-85e0-5d380675bec7?as=iiif---

And inline within your content, render the Map component with custom points.

<Map>  <MapPoint    lat="25.45126"    lng="75.63737"    title="Boondi / Bundi (1826–1830)"    summary="A hand-colored aquatint from East India Company sketches, depicting Bundi in a mountain pass, with the palace on the slope and fortifications rising to the summit."    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/4bdb5a22-6c7f-498d-8e6e-e49ea9bc4778?as=iiif",    ]}  />  <MapPoint    lat="26.195"    lng="75.785"    title="Tonk (1826–1830)"    summary="A hand-colored aquatint from East India Company military sketches, showing Tonk and its hill-fort landscape in Rajpootana, near the Banas River."    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/c26591b2-994b-4ba3-a87e-9124419fa91b?as=iiif",    ]}  />  <MapPoint    lat="26.18"    lng="75.77"    title="Tonk (1826–1830)"    summary="A hand-colored aquatint drawn from East India Company military sketches (1826–1830), showing a riverside ghat and pavilion on the Banas River near Tonk in Rajpootana, with a hill-top fort/shrine in the distance."    referencedManifests={[      "https://api.dc.library.northwestern.edu/api/v2/works/d4c62d7f-f50d-4b29-85e0-5d380675bec7?as=iiif",    ]}  /></Map>

Loading map…

API

Map

Prop	Type	Default	Description
`iiifContent`	string	`null`	IIIF Manifest or Collection URL used to source navPlace markers.
`height`	string \| number	`600px`	Fixed height applied to the Leaflet container. Numbers automatically add `px`.
`tileLayers`	`Array<{ name, url, attribution, maxZoom?, minZoom?, subdomains? }>`	OpenStreetMap	One or more custom basemap definitions rendered via Leaflet tile layers.
`scrollWheelZoom`	boolean	`false`	Enable or disable scroll-wheel zooming.
`cluster`	boolean	`true`	Toggle marker clustering (`leaflet.markercluster`).
`defaultCenter`	`{lat, lng}` \| `'lat,lng'`	`null`	Fallback map view when no markers are available.
`defaultZoom`	number	`null`	Overrides the automatic bounds fit and forces the map to use the provided zoom (optionally with `defaultCenter`).

MapPoint

Prop	Type	Description
`lat`	number \| string	Required latitude coordinates in decimal degrees.
`lng`	number \| string	Required longitude coordinates in decimal degrees.
`title`	string	Marker title and popup heading.
`summary`	string	Short description rendered inside the popup.
`href`	string	Optional link target (absolute, root-relative, or `/works/...`). When omitted the popup title stays plain text.
`thumbnail`	string	Optional image URL displayed in the popup (defaults to the first referenced manifest thumbnail when omitted).
`referencedManifests` / `manifest(s)`	string \| string[]	Resolve one or more manifest IDs/URLs into linked work references inside the popup.
`children`	MDX	Additional markup rendered below the summary.

NavPlace markers automatically inherit manifest titles, summaries, and thumbnails. To populate the dataset, ensure your IIIF manifests include navPlace with Point geometries before running npm run build.