+ );
+};
+
+export default DatasetMetadata;
diff --git a/ui/src/components/DatasetMetadata.test.js b/ui/src/components/DatasetMetadata.test.js
new file mode 100644
index 0000000..efcd3b8
--- /dev/null
+++ b/ui/src/components/DatasetMetadata.test.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import DatasetMetadata from './DatasetMetadata';
+import { parseGeometry } from './spatialGeometry';
+
+// SpatialMap pulls in Leaflet (ESM, DOM/canvas), which CRA's jest does not
+// transform, so the renderer is mocked. The pure geometry logic lives in
+// ./spatialGeometry and is imported directly. These tests cover the
+// presentation logic: labels, grouping, and the spatial-extent fallback.
+jest.mock('./SpatialMap', () => ({
+ __esModule: true,
+ default: () =>
map
+}));
+
+const POLYGON = JSON.stringify({
+ type: 'Polygon',
+ coordinates: [
+ [
+ [-124.6, 32.3],
+ [-113.7, 32.3],
+ [-113.7, 42.3],
+ [-124.6, 42.3],
+ [-124.6, 32.3]
+ ]
+ ]
+});
+
+describe('DatasetMetadata', () => {
+ it('renders the map and hides the raw spatial string when geometry parses', () => {
+ render();
+ expect(screen.getByTestId('spatial-map')).toBeInTheDocument();
+ expect(screen.queryByText('Spatial', { exact: false })).toBeInTheDocument();
+ // The raw coordinate JSON must not appear as a plain field value.
+ expect(screen.queryByText(/coordinates/)).not.toBeInTheDocument();
+ });
+
+ it('applies friendly labels to known keys', () => {
+ render();
+ expect(screen.getByText('Data vintage')).toBeInTheDocument();
+ expect(screen.getByText('EPSG')).toBeInTheDocument();
+ });
+
+ it('groups harvest_* fields under a provenance subsection', () => {
+ render(
+
+ );
+ expect(screen.getByText('Harvest provenance')).toBeInTheDocument();
+ expect(screen.getByText('Harvest source')).toBeInTheDocument();
+ expect(screen.getByText('WIFIRE Commons')).toBeInTheDocument();
+ });
+
+ it('keeps the spatial value as a plain field when it cannot be parsed', () => {
+ render();
+ expect(screen.queryByTestId('spatial-map')).not.toBeInTheDocument();
+ expect(screen.getByText('not-geojson')).toBeInTheDocument();
+ });
+
+ it('renders nothing when there are no extras', () => {
+ const { container } = render();
+ expect(container).toBeEmptyDOMElement();
+ });
+});
+
+describe('parseGeometry', () => {
+ it('parses a JSON string polygon', () => {
+ expect(parseGeometry(POLYGON)).toMatchObject({ type: 'Polygon' });
+ });
+
+ it('unwraps a Feature into its geometry', () => {
+ const feature = { type: 'Feature', geometry: { type: 'Point', coordinates: [1, 2] } };
+ expect(parseGeometry(feature)).toMatchObject({ type: 'Point' });
+ });
+
+ it('returns null for non-geometry input', () => {
+ expect(parseGeometry('nonsense')).toBeNull();
+ expect(parseGeometry(null)).toBeNull();
+ expect(parseGeometry({ foo: 'bar' })).toBeNull();
+ });
+});
diff --git a/ui/src/components/SpatialMap.js b/ui/src/components/SpatialMap.js
new file mode 100644
index 0000000..80e3ed8
--- /dev/null
+++ b/ui/src/components/SpatialMap.js
@@ -0,0 +1,57 @@
+import React, { useMemo } from 'react';
+import { MapContainer, TileLayer, GeoJSON } from 'react-leaflet';
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { parseGeometry, boundsFromGeometry } from './spatialGeometry';
+
+// Renders the GeoJSON geometry stored in a dataset's `spatial` extra on an
+// OpenStreetMap basemap. Returns null when the value cannot be parsed into a
+// geometry, so the caller can fall back to plain text.
+
+const STYLE = { color: '#2563eb', weight: 2, fillColor: '#2563eb', fillOpacity: 0.15 };
+
+// Draw point geometries as small circle markers; Leaflet's default marker
+// icon relies on image assets that break under the CRA build, and a circle
+// reads fine for an extent preview anyway.
+const pointToLayer = (_feature, latlng) =>
+ L.circleMarker(latlng, { radius: 6, ...STYLE, fillOpacity: 0.6 });
+
+const SpatialMap = ({ spatial, height = 220 }) => {
+ const geometry = useMemo(() => parseGeometry(spatial), [spatial]);
+ const bounds = useMemo(
+ () => (geometry ? boundsFromGeometry(geometry) : null),
+ [geometry]
+ );
+
+ if (!geometry || !bounds) return null;
+
+ // Leaflet bounds are [[south, west], [north, east]]. Pad a degenerate
+ // (single-point) box slightly so the map has something to fit.
+ const pad = bounds.minLat === bounds.maxLat ? 0.5 : 0;
+ const latLngBounds = [
+ [bounds.minLat - pad, bounds.minLng - pad],
+ [bounds.maxLat + pad, bounds.maxLng + pad]
+ ];
+
+ return (
+
+
+
+
+ );
+};
+
+export default SpatialMap;
diff --git a/ui/src/components/spatialGeometry.js b/ui/src/components/spatialGeometry.js
new file mode 100644
index 0000000..c68fa81
--- /dev/null
+++ b/ui/src/components/spatialGeometry.js
@@ -0,0 +1,65 @@
+// Pure helpers for turning a dataset's `spatial` extra into a GeoJSON geometry
+// and a bounding box. Kept free of Leaflet (and any DOM dependency) so the
+// logic can be unit-tested and imported without pulling in the map renderer.
+
+// The `spatial` value can arrive as a GeoJSON object or as a JSON string, and
+// may be a bare geometry, a Feature, or a FeatureCollection. Returns a usable
+// geometry, or null if nothing parses.
+export const parseGeometry = (spatial) => {
+ let value = spatial;
+ if (typeof value === 'string') {
+ try {
+ value = JSON.parse(value);
+ } catch {
+ return null;
+ }
+ }
+ if (!value || typeof value !== 'object') return null;
+ if (value.type === 'Feature') return value.geometry || null;
+ if (value.type === 'FeatureCollection') {
+ const geometries = (value.features || [])
+ .map((f) => f && f.geometry)
+ .filter(Boolean);
+ if (!geometries.length) return null;
+ return { type: 'GeometryCollection', geometries };
+ }
+ if (value.type === 'GeometryCollection' && value.geometries) return value;
+ if (value.type && value.coordinates) return value;
+ return null;
+};
+
+// Walk every coordinate pair in a geometry to build a [lng, lat] bounding box.
+// Returns null when no finite coordinate is found.
+export const boundsFromGeometry = (geometry) => {
+ const acc = {
+ minLng: Infinity,
+ maxLng: -Infinity,
+ minLat: Infinity,
+ maxLat: -Infinity
+ };
+
+ const collect = (geom) => {
+ if (!geom) return;
+ if (geom.type === 'GeometryCollection') {
+ (geom.geometries || []).forEach(collect);
+ return;
+ }
+ const walk = (coords) => {
+ if (!Array.isArray(coords)) return;
+ if (typeof coords[0] === 'number' && typeof coords[1] === 'number') {
+ const [lng, lat] = coords;
+ acc.minLng = Math.min(acc.minLng, lng);
+ acc.maxLng = Math.max(acc.maxLng, lng);
+ acc.minLat = Math.min(acc.minLat, lat);
+ acc.maxLat = Math.max(acc.maxLat, lat);
+ return;
+ }
+ coords.forEach(walk);
+ };
+ walk(geom.coordinates);
+ };
+
+ collect(geometry);
+ if (!Number.isFinite(acc.minLat) || !Number.isFinite(acc.minLng)) return null;
+ return acc;
+};
diff --git a/ui/src/pages/Search.js b/ui/src/pages/Search.js
index 1b2c546..d35654e 100644
--- a/ui/src/pages/Search.js
+++ b/ui/src/pages/Search.js
@@ -18,6 +18,7 @@ import {
resourcesAPI,
generalDatasetAPI
} from '../services/api';
+import DatasetMetadata from '../components/DatasetMetadata';
const MODES = [
{ id: 'both', label: 'All' },
@@ -1102,28 +1103,7 @@ const ResultCard = ({
)}
- {expanded && hasExtras && (
-