Skip to Content

Map

<Map /><clover-map>20 kB loaded by a page with it alone to first view, gzipped65 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.

import { Map } from "@nulib/clover/map";
import "@nulib/clover/styles.css";
import "maplibre-gl/dist/maplibre-gl.css";
 
<Map
  iiifContent="https://clover.iiif.library.northwestern.edu/mocks/navplace/manifest.json"
  scrollZoom={}
  style={{ "--clover-map-height": "px" }}
/>;
<script type="module">
  import "@nulib/clover/web-components";
</script>
 
<clover-map
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/navplace/manifest.json"
  scroll-zoom=""
  style="--clover-map-height: px">
</clover-map>

API reference

Draws a resource’s navPlace  places and its georeferenced  images on a MapLibre GL  map, and lists them under it. MapLibre loads when a map is first shown. Inside a Root<clover-root>, it maps the Root’s resource and follows the view; its other props, and its ref, go to its element.

PropTypeDefaultDescription
iiifContentstring | object—On its own: a resource to map. In a Root, leave it out.
navPlaceobject—GeoJSON to draw: a FeatureCollection, Feature or geometry.
georeferencesobject[]—Georeference Extension annotations to lay over the map.
overlaybooleantrueDraw the georeferenced images.
overlayOpacitynumber0.75Their opacity, from 0 to 1.
styleUrlstringClover’s basemapA MapLibre style, used as it is.
workerUrlstringClover’s ownWhere MapLibre’s worker is served from, to serve your own.
scrollZoombooleanfalseZoom with the wheel or trackpad.
onSelect(feature) => void—A place was chosen, on the map or in its list.
request{ credentials, headers, fetch }—With iiifContent: for every request.
languagestringThe reader’sWith iiifContent: the language to read IIIF text in.
aselement type"div"The element to render.
classNamestring—Added to clover-geomap.

<clover-map>

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.

NameTypeDefaultDescription
iiif-contentstring—Alone: a IIIF resource, by URL, to map.
overlaybooleantrue"false" leaves out the georeferenced images.
overlay-opacitynumber0.75The georeferenced images' opacity, 0 to 1.
style-urlstring—A MapLibre style URL. Clover's relief basemap by default.
scroll-zoombooleanfalseZoom with the wheel or a trackpad, which can trap the page's scroll.
languagestring—Alone: the language to read IIIF text in.
.iiifContentstring | Record<string, unknown> | null—As a property: Alone: what to map, by URL or as a IIIF resource.
.navPlaceRecord<string, unknown> | null—Alone: GeoJSON to draw, as navPlace is.
.georeferencesunknown[] | null—Alone: Georeference Extension annotations to overlay.
.request{ credentials?: RequestCredentials; headers?: Record<string, string>; 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.

<Map iiifContent="https://clover.iiif.library.northwestern.edu/mocks/georeference/manifest.json" />
<clover-map
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/georeference/manifest.json"></clover-map>

In a Viewer

The Viewer adds a Map section to its Panel by itself, where the resource has places or a georeference.

<Viewer iiifContent="https://clover.iiif.library.northwestern.edu/mocks/georeference/manifest.json" />
<clover-viewer
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/georeference/manifest.json"></clover-viewer>

In a layout of your own

Inside a Root<clover-root>, it lays the view’s georeferenced images over the map, and choosing a place goes to its Canvas.

import * as Clover from "@nulib/clover";
import { Map } from "@nulib/clover/map";
 
<Clover.Root iiifContent={url}>
  <Clover.Body />
  <Map />
</Clover.Root>;
<script type="module">
  import "@nulib/clover/web-components";
</script>
 
<clover-root
  iiif-content="https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json">
  <clover-body></clover-body>
  <clover-map></clover-map>
</clover-root>

Size

Size the map with --clover-map-height (default 24rem), never height: style goes to the box around the map and its list.

<Map iiifContent={url} style={{ "--clover-map-height": "420px" }} />
<clover-map
  iiif-content="https://iiif.io/api/cookbook/recipe/0009-book-1/manifest.json"
  style="--clover-map-height: 420px"></clover-map>

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.

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

  • Map<clover-map> is a named export of @nulib/clover/map.
  • A Viewer shows it in its Panel by itself: no options.map.
  • georefAnnotation is georeferences.georeferences, and overlays draw by default.
  • MapLibre’s worker comes with Clover: no workerUrl to set.