← Back to Documentation

The ZoteroGeoViewer component connects to a public Zotero group library and displays its items on an interactive map. Items are matched to geographic locations via Zotero tags. A tag-based filter, live statistics panel, and recent-items preview are included.

Live Examples

Minimal usage

Connect to any public Zotero group by passing its numeric groupId. All other props are optional.

<ZoteroGeoViewer
  groupId={336647}
  client:load />
Loading Zotero library...
Group ID: 336647

Custom layout options

Change the split between map and sidebar, set a custom height, and define the initial map center:

<ZoteroGeoViewer
  groupId={336647}
  layout="vertical"
  mapHeight="500px"
  mapCenter="20.5,40.0,8"
  client:load />
Loading Zotero library...
Group ID: 336647

Features

Geographical Visualization

  • Interactive map with location markers sized by item count
  • Popup windows with item details and direct links to Zotero
  • Automatic map bounds fitting to the loaded data

Tag-based Filtering

  • Real-time search through Zotero tags
  • Optional autocomplete suggestions
  • Client-side filtering for instant response

Live Statistics

  • Total items in the library
  • Number of georeferenced items
  • Number of unique locations
  • Updates automatically as you filter

Recent Items Preview

  • Shows the latest additions to the library
  • Direct links to Zotero items with author and publication info

Layout Options

vertical

Map on top, controls below

6x6

Equal split (50/50)

8x4 (default)

Map emphasis (67/33)

4x8

Controls emphasis (33/67)

horizontal

Map left, controls right (full width)

Props API

ZoteroGeoViewerProps

PropTypeDefaultDescription
groupIdnumber—Required. Zotero group library ID
layoutLayoutType'8x4'Map/sidebar split (see Layout Options above)
mapHeightstring—CSS height for the map panel
mapCenterstring—Initial center as "lng,lat,zoom"
tagAutocompletebooleantrueShow autocomplete in tag search
maxItemsnumber—Maximum items to fetch from Zotero API

LayoutType: 'vertical' | '6x6' | '8x4' | '4x8' | '12x4' | 'horizontal'

Usage in Astro Files

---
import { ZoteroGeoViewer } from '@core/components/ZoteroGeoViewer';
---


<ZoteroGeoViewer
  groupId={12345}
  layout="8x4"
  client:idle
/>

Technical Details

Data Sources

  • Zotero API — https://api.zotero.org/groups/{groupId}/items
  • Coordinate Data — /data/zoteroTagCoordinates.geojson (co-locate in usr/public/data/)
  • Matching — items are matched to geographic locations via Zotero tag names

How matching works

Each geographic location in zoteroTagCoordinates.geojson has a name property. The component matches Zotero items to locations by comparing their tags to these names. Locations with at least one matching item appear on the map.