v1.8.12
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>Reference IIIF works from a custom point
Attach referencedManifests to any MapPoint to render a list inside the marker. This automatically resolves links to a relative local in /works/ if available. Additionally a thumbnail is used from the referenced manifest if no thumbnail prop is provided.
<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>Add a key for MapPoint categories
Pass mapKey to <Map> and assign the matching key to each MapPoint. The legend renders beneath the map and reuses those values to color both the legend dots and the markers. (React reserves the plain key prop, so in MDX you should use mapKey on <Map> while individual <MapPoint> elements can safely set key.)
<Map height="600px" mapKey={[ {id: "works", label: "Works"}, {id: "city", label: "City", type: "small"}, {id: "site", label: "Site", type: "small"}, ]}> <MapPoint lat="26.195" lng="75.785" key="city" title="Tonk (1826–1830)" /> <MapPoint lat="26.18" lng="75.77" key="works" title="Tonk (1826–1830)" /> <MapPoint lat="25.18" lng="73.77" key="site" title="Bundi" /></Map>Set type: 'small' (or 'label') on any mapKey entry to render those MapPoints as compact inline labels without popups—great for city labels or dense site annotations.
<Map height="400px" mapKey={[ {id: "works", label: "Works"}, {id: "city", label: "City", type: "small"}, ]}> <MapPoint lat="34.5553" lng="69.2075" key="city" title="Kabul" keyLabel="Kabul" /> <MapPoint lat="26.18" lng="75.77" key="works" title="Tonk (1826–1830)" /></Map>Overlay Allmaps geoReferences
Add georeferenced imagery from Allmaps by supplying one or more Annotation or annotation URL strings to the geoReferences prop. These overlays hydrate entirely in the browser (via @allmaps/leaflet) so your MDX stays SSR-safe, and you can combine them with any mix of MapPoint markers or IIIF-derived navPlaces.
<Map height="600px" geoReferences={["https://annotations.allmaps.org/images/26e0416161f6765c"]}> <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>Hide the basemap
Skip OpenStreetMap (or any custom basemap request) by setting disableTileLayers={true}. MDX attributes like disableTileLayers="true" or legacy tileLayers="none"/"transparent" are also honored. This swaps in Canopy's built-in transparent TileLayer (a local data URI) so Leaflet keeps working without hitting third-party servers—perfect for Allmaps-only views or privacy-sensitive embeds.
<Map height="400px" disableTileLayers={true} geoReferences={["https://annotations.allmaps.org/images/26e0416161f6765c"]} defaultZoom={5}/>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. |
geoReferences | string | string[] | Array<{ annotation?, url?, options? }> | [] | Client-side Allmaps annotations to render as warped map layers on top of the basemap. |
mapKey | Array<{ id, label, type? }> | [] | Optional legend/marker configuration used to color-code MapPoints by key; set type: 'small' for inline labels. |
tileLayers | Array<{ name, url, attribution, maxZoom?, minZoom?, subdomains? }> | OpenStreetMap | One or more custom basemap definitions rendered via Leaflet tile layers. |
disableTileLayers | boolean | 'none' | 'transparent' | false | Set to true (or 'none'/'transparent' in MDX) to use a built-in transparent TileLayer instead of external tiles. |
scrollWheelZoom | boolean | false | Enable or disable scroll-wheel zooming. |
cluster | boolean | true | Toggle marker clustering (leaflet.markercluster). |
maxClusterRadius | number | null | Override Leaflet's maxClusterRadius (defaults to the plugin's built-in value). |
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). |
key | string | Optional identifier that links this MapPoint to a mapKey entry on the parent <Map> (required for inline label styling). |
keyLabel | string | Override label text used by mapKey entries with type: 'small' (falls back to title). |
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
navPlacewithPointgeometries before runningnpm run build.