feat: GeoJSONViewer for map subjects by eatyourgreens · Pull Request #7442 · zooniverse/Panoptes-Front-End

eatyourgreens · 2026-04-04T14:46:29Z

A GeoJSONViewer component that displays GeoJSON subjects as an embedded OpenLayers map, with the subject reference data beneath.

Supports .geojson files with the application/geo+json MIME type, and falls back to sniffing file content for Feature or FeatureCollection for generic JSON files.

Builds the map with these react-openlayers components:

Examples

Subject discussion notes: https://local.zooniverse.org:3735/projects/md68135/notes-from-nature-georeferencing-mapping-etc/talk/7411/3964681?env=production

Talk subject page showing an Open Street Map map for a GeoJSON subject, with text metadata about the location under the map.

Subject Talk page: https://local.zooniverse.org:3735/projects/md68135/notes-from-nature-georeferencing-mapping-etc/talk/subjects/118377532?env=production

As the previous image, but this shows the map on a Talk subject page.

Subject Talk page (with uncertainty circle): https://local.zooniverse.org:3735/projects/md68135/notes-from-nature-georeferencing-mapping-etc/talk/subjects/118377549?page=1&scrollToLastComment=true&env=production

Similar to the previous picture, but this map also has a red, dashed uncertainty circle.

Talk thumbnail previews: https://local.zooniverse.org:3735/projects/md68135/notes-from-nature-georeferencing-mapping-etc/talk/7411?env=production

A map thumbnail in the discussion listing for the Notes board, showing a smaller area of the previous map, centred on the same location.

Talk search with thumbnail previews: https://local.zooniverse.org:3735/projects/md68135/notes-from-nature-georeferencing-mapping-etc/talk/search?query=colorado&env=production

A similar small map thumbnail, but this time for a search result in the Talk search listing.

Small screen (phones):

Subject discussion notes on a small screen, with a square map and reference data listed beneath.

Required Manual Testing

Does the non-logged in home page render correctly?
Does the logged in home page render correctly?
Does the projects page render correctly?
Can you load project home pages?
Can you load the classification page?
Can you submit a classification?
Does talk load correctly?
Can you post a talk comment?

Review Checklist

Does it work in all major browsers: Firefox, Chrome, Edge, Safari?
Does it work on mobile?
Can you npm ci and app works as expected?
If the component is in coffeescript, is it converted to ES6? Is it free of eslint errors? Is the conversion its own commit?
Are the tests passing locally and on GitHub Actions?

Optional

Have you replaced any ChangeListener or PromiseRenderer components with code that updates component state?
If changes are made to the classifier, does the dev classifier still work?
Have you resized and compressed any image you've added?
Have you added in flow type annotations?
Have you followed the Springer guidelines for commit messages?

eatyourgreens · 2026-04-04T14:50:53Z

@mcbouslog I don't know if this will be useful, but a map seems more accessible/usable in Talk than the raw subject JSON.

Copilot

Pull request overview

Adds a new GeoJSONViewer to render GeoJSON subjects with an embedded OpenLayers map and show reference_data beneath, plus wiring/styling and a new ol dependency.

Changes:

Add OpenLayers (ol) dependency for map rendering.
Add GeoJSONViewer component and integrate it into the file viewer selection / JSON inspection flow.
Add Stylus styles for the GeoJSON viewer and include them in the main CSS bundle.

Reviewed changes

Copilot reviewed 6 out of 7 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
package.json	Adds `ol` dependency needed for OpenLayers rendering.
package-lock.json	Locks `ol` and its transitive dependencies.
css/main.styl	Includes the new GeoJSON viewer stylesheet.
css/geojson-viewer.styl	Adds styles for OpenLayers controls and reference data layout.
app/components/file-viewer/json-container.jsx	Routes detected GeoJSON JSON payloads to `GeoJSONViewer`.
app/components/file-viewer/index.jsx	Attempts to select `GeoJSONViewer` for `application/geo+json` format.
app/components/file-viewer/geojson-viewer.jsx	New OpenLayers-based GeoJSON map viewer implementation.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

coveralls · 2026-04-04T15:03:41Z

coverage: 55.771% (+0.1%) from 55.649% — eatyourgreens:feat-geojson-viewer into zooniverse:main

eatyourgreens · 2026-04-05T01:36:04Z

+    let vectorSource;
+    let vectorLayer;
+    try {
+      vectorSource = new VectorSource({ useSpatialIndex: false });


This errors with a stack overflow (too much recursion) in RBush, even though spatial indexing is disabled, and I can't see why.

This was an error in the webpack config, only triggered when you have two modules in the tree with ambiguous names (in this case RBush.js and rbush.js on case-insensitive MacOS.)

Fixed in this PR by adding stricter module resolution rules to the webpack configs.

Copilot

Pull request overview

Copilot reviewed 7 out of 8 changed files in this pull request and generated 10 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-06T09:32:44Z

+  // If detected as GeoJSON (or JSON with type === 'Feature' or 'FeatureCollection'), use GeoJSONViewer
+  if (props.format === 'geo+json' || jsonData?.type === 'Feature' || jsonData?.type === 'FeatureCollection') {
+    return <GeoJSONViewer {...props} jsonData={jsonData} />;


There are existing component tests under app/components/file-viewer (e.g. canvas-viewer.spec.jsx), but the new GeoJSON rendering path isn’t covered. Please add tests that verify GeoJSON detection/routing and that the viewer renders a map + reference data for a Feature/FeatureCollection payload.

Copilot · 2026-04-06T09:32:44Z

+  if (extent) {
+    view.fit(extent, {
+      padding: [100, 100, 100, 100],
+      maxZoom: 12,
+    });


view.fit(...) is being called during render, which will re-fit whenever this component re-renders (e.g. parent updates), preventing users from panning/zooming. Move the fit call into a useEffect that runs when the map becomes available / when features change, and guard it with a non-empty extent check (empty VectorSource#getExtent() can still be truthy).

FittedVectorLayer only re-renders when features changes, so this should be fine.

Copilot · 2026-04-06T09:32:45Z

  module: {
    rules: [{
+      test: /\.m?js$/,
+      include: /node_modules\/react-openlayers\/dist/,


This include regex hard-codes POSIX path separators (/node_modules/.../dist/), so the rule won’t match on Windows where paths use \\. Use a cross-platform pattern (e.g. [\\/]node_modules[\\/]react-openlayers[\\/]dist[\\/]) or compute an absolute include path with path.dirname(require.resolve(...)).

Suggested change

include: /node_modules\/react-openlayers\/dist/,

include: /[\\/]node_modules[\\/]react-openlayers[\\/]dist[\\/]/,

Copilot · 2026-04-06T09:32:45Z

  module: {
    rules: [{
+      test: /\.m?js$/,
+      include: /node_modules\/react-openlayers\/dist/,


This include regex hard-codes POSIX path separators (/node_modules/.../dist/), so the rule won’t match on Windows where paths use \\. Use a cross-platform pattern (e.g. [\\/]node_modules[\\/]react-openlayers[\\/]dist[\\/]) or compute an absolute include path with path.dirname(require.resolve(...)).

Suggested change

include: /node_modules\/react-openlayers\/dist/,

include: /[\\/]node_modules[\\/]react-openlayers[\\/]dist[\\/]/,

eatyourgreens · 2026-04-06T11:38:32Z

ol is ESM, so mocha needs a custom loader to resolve partial specifiers like ol/layer/Vector to their fully-specified paths: ol/layer/Vector.js.

mcbouslog · 2026-04-09T16:01:12Z

@eatyourgreens - this is awesome, thank you!! Let's please keep this open to revisit with parity in FEM and use as a reference, but I'm not sure if we'll review/merge in the short-term. Just letting you know timing. I can/will help with merge conflicts.

eatyourgreens · 2026-04-09T16:13:16Z

+  const features = useMemo(() => geoJsonFormat.readFeatures(jsonData, {
+    dataProjection: 'EPSG:4326', // incoming data is WGS 84.
+    featureProjection: 'EPSG:3857', // rendered map is Web Mercator.
+    featureClass: RenderFeature // render read-only features on the map.


@mcbouslog this is kind of hidden away in the documentation, but OpenLayers exports a RenderFeature class for cases where you want to show features but don't need them to be interactive eg. read-only locations.

eatyourgreens · 2026-04-09T16:14:40Z

@mcbouslog no worries. It occurred to me that the first thing volunteers will ask for, on mapping projects, is to see the maps in Talk.

A `GeoJSONViewer` component that displays GeoJSON subjects as an embedded OpenLayers map, with the subject reference data beneath. Supports `.geojson` files with the `application/geo+json` MIME type, and falls back to the default JSON viewer for other JSON files.

Copilot AI review requested due to automatic review settings April 4, 2026 14:46

Copilot started reviewing on behalf of eatyourgreens April 4, 2026 14:47 View session

Copilot AI reviewed Apr 4, 2026

View reviewed changes

eatyourgreens force-pushed the feat-geojson-viewer branch from 15bcd00 to efb266d Compare April 4, 2026 15:00

eatyourgreens force-pushed the feat-geojson-viewer branch 7 times, most recently from bbc59a3 to 39e628b Compare April 5, 2026 01:34

eatyourgreens commented Apr 5, 2026

View reviewed changes

eatyourgreens force-pushed the feat-geojson-viewer branch 16 times, most recently from 3af916b to 831e774 Compare April 5, 2026 22:24

eatyourgreens force-pushed the feat-geojson-viewer branch 4 times, most recently from f4850e8 to 3d0e952 Compare April 6, 2026 09:00

eatyourgreens requested a review from Copilot April 6, 2026 09:27

Copilot started reviewing on behalf of eatyourgreens April 6, 2026 09:27 View session

Copilot AI reviewed Apr 6, 2026

View reviewed changes

eatyourgreens force-pushed the feat-geojson-viewer branch from 3d0e952 to 7ec8e95 Compare April 6, 2026 10:46

eatyourgreens commented Apr 6, 2026

View reviewed changes

eatyourgreens commented Apr 9, 2026

View reviewed changes

eatyourgreens added 4 commits April 9, 2026 17:16

refactor: replace ol boilerplate with react-openlayers

1dde810

test: patch extensionless imports in mocha

47100e1

test: add some tests for GeoJSONViewer

22eefe8

eatyourgreens force-pushed the feat-geojson-viewer branch from c053974 to 22eefe8 Compare April 9, 2026 16:16

	include: /node_modules\/react-openlayers\/dist/,
	include: /[\\/]node_modules[\\/]react-openlayers[\\/]dist[\\/]/,

Conversation

eatyourgreens commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Examples

Required Manual Testing

Review Checklist

Optional

Uh oh!

eatyourgreens commented Apr 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coveralls commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eatyourgreens Apr 5, 2026

Choose a reason for hiding this comment

Uh oh!

eatyourgreens Apr 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

eatyourgreens Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

eatyourgreens Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

mcbouslog commented Apr 9, 2026

Uh oh!

eatyourgreens Apr 9, 2026

Choose a reason for hiding this comment

Uh oh!

eatyourgreens commented Apr 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

eatyourgreens commented Apr 4, 2026 •

edited

Loading

coveralls commented Apr 4, 2026 •

edited

Loading

eatyourgreens Apr 5, 2026 •

edited

Loading

eatyourgreens commented Apr 9, 2026 •

edited

Loading