---
title: "Map"
description: "Where a IIIF resource is, on a map: its navPlace places, and its georeferenced images laid over the ground."
url: https://clover.iiif.library.northwestern.edu/docs/map
version: "4"
---
# Map
\ (web components: \)25 kB loaded by a page with it alone to first view, gzipped (web components: 74 kB loaded by a page with it alone to first view, styles included, gzipped)
Where a IIIF resource is, on a map: its places, and its georeferenced images laid over the ground.
> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
**React**
```jsx
import { Map } from "@nulib/clover/map";
import "@nulib/clover/styles.css";
import "maplibre-gl/dist/maplibre-gl.css";
;
```
**Web components**
```html
```
## API reference
Draws a resource’s [navPlace](https://iiif.io/api/extension/navplace/) places and its [georeferenced](https://iiif.io/api/extension/georef/) images on a [MapLibre GL](https://maplibre.org/) map, and lists them under it. MapLibre loads when a map is first shown. Inside a `Root` (web components: ``), it maps the Root’s resource and follows the view: a Collection’s members too, each opening its Manifest as it is pressed. A place is named with the date of what it locates (its `navDate`), in its list and on the map. Its other props, and its `ref`, go to its element.
**React**
| Prop | Type | Default | Description |
| ---------------- | --------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `iiifContent` | `string \| object` | — | On its own: a resource to map. In a `Root`, leave it out. |
| `navPlace` | `object` | — | GeoJSON to draw: a FeatureCollection, Feature or geometry. |
| `georeferences` | `object[]` | — | Georeference Extension annotations to lay over the map. |
| `overlay` | `boolean` | `true` | Draw the georeferenced images. |
| `overlayOpacity` | `number` | `0.75` | Their opacity, from 0 to 1. |
| `styleUrl` | `string` | Clover’s basemap | A MapLibre style, used as it is. |
| `workerUrl` | `string` | Clover’s own | Where MapLibre’s worker is served from, to serve your own. |
| `scrollZoom` | `boolean` | `false` | Zoom with the wheel or trackpad. |
| `credits` | `boolean` | `true` | The basemap’s credits, behind an ⓘ in the map’s corner. A basemap’s license may ask for them: give them on the page yourself before leaving them out. |
| `onSelect` | `(feature) => void` | — | A place was chosen, on the map or in its list. |
| `request` | `{ credentials, headers, fetch }` | — | With `iiifContent`: for every request. |
| `language` | `string` | The reader’s | With `iiifContent`: the language to read IIIF text in. |
| `highContrast` | `boolean` | `false` | Clover’s higher-contrast mode: the accent kept to rings, outlines and marks, never under words or a glyph. Inside a `Root`, the Root’s too; on wherever the reader’s system asks for more contrast. |
| `as` | element type | `"div"` | The element to render. |
| `className` | `string` | — | Added to `clover-geomap`. |
**Web components**
### ``
A map: inside a clover-root, its places (navPlace) and the view's georeferenced images; alone, those of the iiif-content it is given. Its places are listed under it as buttons, for the keyboard.
| Name | Type | Default | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `iiif-content` | `string` | — | Alone: a IIIF resource, by URL, to map. |
| `overlay` | `boolean` | `true` | "false" leaves out the georeferenced images. |
| `overlay-opacity` | `number` | `0.75` | The georeferenced images' opacity, 0 to 1. |
| `style-url` | `string` | — | A MapLibre style URL. Clover's relief basemap by default. |
| `scroll-zoom` | `boolean` | `false` | Zoom with the wheel or a trackpad, which can trap the page's scroll. |
| `credits` | `boolean` | `true` | "false" leaves out the basemap's credits, the ⓘ in the map's lower corner, which a basemap's license may ask for: give them on the page yourself. |
| `language` | `string` | — | Alone: the language to read IIIF text in. |
| `high-contrast` | `boolean` | `false` | Clover's higher-contrast mode, for what is inside: the accent kept to rings, outlines and marks, never under words or a glyph, where the controls' dark fill takes its place, edged in the accent. On wherever the reader's system asks for more contrast, too. |
| `.iiifContent` | `string \| Record \| null` | — | As a property: Alone: what to map, by URL or as a IIIF resource. |
| `.navPlace` | `Record \| null` | — | Alone: GeoJSON to draw, as navPlace is. |
| `.georeferences` | `unknown[] \| null` | — | Alone: Georeference Extension annotations to overlay. |
| `.request` | `{ credentials?: RequestCredentials; headers?: Record; fetch?: typeof fetch } \| null` | — | Alone: credentials, headers and a fetch of your own. |
| `clover-select` | `{ feature: { title?: string; canvasId?: string; [key: string]: unknown } }` | — | An event. A place was chosen, on the map or in its list. |
## Examples
### Georeferenced images
A Georeference Extension annotation lays its image over the map by an affine fit of its control points, clipped to its mask. The image server must allow CORS.
> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
**React**
```jsx
```
**Web components**
```html
```
### In a Viewer
The Viewer adds a Map section to its Panel by itself, where the resource has places or a georeference.
> **Example**: a live example on the page, showing sample IIIF data. What it shows is demonstration content, not about Clover; its code, where the page gives it, follows.
**React**
```jsx
```
**Web components**
```html
```
### In a layout of your own
Inside a `Root` (web components: ``), it lays the view’s georeferenced images over the map, and choosing a place goes to its Canvas. A place an annotation tags on part of a Canvas (a map on a page, Cookbook 0139) is that annotation too: choosing it selects it, and the Canvas frames its region.
**React**
```jsx
import * as Clover from "@nulib/clover";
import { Map } from "@nulib/clover/map";
;
```
**Web components**
```html
```
### Size
Size the map with `--clover-map-height` (default `24rem`), never `height`: `style` goes to the box around the map and its list.
**React**
```jsx
```
**Web components**
```html
```
### MapLibre’s worker
Clover brings MapLibre’s worker, bundled, and starts it from a `blob:` URL, so a map draws its places in any bundler with no setup. A page whose Content Security Policy refuses `blob:` workers (`worker-src`) serves the worker itself, and tells Clover where, once, for every map.
```js
import { setMapWorkerUrl } from "@nulib/clover";
// maplibre-gl-worker.mjs and maplibre-gl-shared.mjs, copied together from
// node_modules/maplibre-gl/dist/ to a folder you serve.
setMapWorkerUrl("/static/maplibre-gl-worker.mjs");
```
The worker is the one built for the MapLibre Clover depends on. A page that brings another MapLibre serves that one’s worker the same way; Clover says so in the console.
## Previous versions
[Clover 3.x › Map](https://clover.iiif.library.northwestern.edu/docs/3.x/map)
- `Map` (web components: ``) is a named export of `@nulib/clover/map`.
- A Viewer shows it in its Panel by itself: no `options.map`.
- `georefAnnotation` is `georeferences` (web components: `.georeferences`), and overlays draw by default.
- MapLibre’s worker comes with Clover: no `workerUrl` to set.