Feature - Add GeoJSON preview support in ObjectsDiff #8996
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Enhances ObjectsDiff with a GeoJSON preview feature using Leaflet. Updates dependencies to include Leaflet and React-Leaflet libraries, along with their TypeScript types. Integrates GeoJSON-specific handling to render a map preview when GeoJSON files are detected.
E2E Test Results - Quickstart |
E2E Test Results - DynamoDB Local - Local Block Adapter |
Ben-El
added
the
include-changelog
Simplified the conditional rendering logic for GeoJSON previews and ReactDiffViewer. Moved GeoJSON-specific handling into the main return block, reducing redundancy and improving readability. This change ensures cleaner and more maintainable code.
Ben-El
changed the title
Ben-El
changed the title
itaigilo
requested changes
Apr 30, 2025
Replaced `readableObject` function with a more extensible `getViewer` method to manage file format handling. Simplified GeoJSON detection and applied a shared CSS class for consistent map styling.
Replaced inline styles on the MapContainer with a dedicated CSS class `.geojson-map-container`. This improves consistency and simplifies maintenance of the map's styling.
Removed redundant span wrapper in ObjectsDiff component for cleaner code. Moved Leaflet CSS import to GeoJSONPreview to ensure proper scoping and avoid unused imports in main.tsx.
itaigilo
approved these changes
May 4, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Closes #9012
Change Description
This PR introduces support for previewing .geojson files directly within the diff view.
When the file path ends with .geojson, the system now detects it and renders an interactive map using Leaflet and react-leaflet.
The GeoJSON data is parsed and displayed using MapContainer and GeoJSON components.
If the data includes valid geometry, the map automatically fits its bounds. Otherwise, it defaults to a world view centered at [0, 0].
If the GeoJSON data is invalid or missing, a relevant fallback message is shown instead of the map.
Dependencies updated: leaflet, react-leaflet, and @types/leaflet were added to support this functionality.
This feature enhances the diffing experience for spatial datasets, making changes in geographic files visually accessible.
Why this solution?
I used a simple inline conditional inside JSX because there are only two rendering cases to handle: a GeoJSON map preview or a plain text diff. Introducing a generic wrapper component (something like
<ContentDiffViewer/>) would add unnecessary abstraction for this small, self-contained logic.This approach keeps the code simple, readable, and localized. If more preview types are added in the future, we can then refactor into a shared component.
Technical note
This feature is powered by Leaflet and React-Leaflet, both open-source libraries for interactive map rendering in the browser.
Leaflet provides the core mapping engine, while React-Leaflet offers declarative React components that integrate seamlessly with our UI.
While it was initially released over a decade ago, it remains a modern, reliable, and widely adopted solution for rendering interactive maps - especially when 3D rendering or heavy GIS capabilities aren't required. It is lightweight, easy to integrate with React via react-leaflet, and perfectly suited for displaying GeoJSON data within web applications.