Skip to content

Fix/bounds field source editor#1851

Open
KanishJebaMathewM wants to merge 16 commits into
maplibre:mainfrom
KanishJebaMathewM:fix/bounds-field-source-editor
Open

Fix/bounds field source editor#1851
KanishJebaMathewM wants to merge 16 commits into
maplibre:mainfrom
KanishJebaMathewM:fix/bounds-field-source-editor

Conversation

@KanishJebaMathewM
Copy link
Copy Markdown
Contributor

@KanishJebaMathewM KanishJebaMathewM commented May 2, 2026

Fix: Add bounds field to source editor UI

Closes #1037


Problem

Raster and vector sources support the optional bounds parameter in the MapLibre style specification: a 4-value array [west, south, east, north] that defines the geographic bounding box of a source. Although Maputnik correctly reads and applies this value from JSON, it was never shown in the source editor UI. That meant users had to switch to the raw Code Editor to view or edit bounds.


Fix

Added a bounds input field to both source editor types in ModalSourcesTypeEditor.tsx, following the same pattern used for minzoom and maxzoom:

  • Four separate numeric inputs for west, south, east, north
  • Optional field behavior: if bounds is not present in the JSON, the inputs stay empty
  • Uses the existing default world bounds value [-180, -85.051129, 180, 85.051129]
  • Applies to both TileURLSourceEditor and TileJSONSourceEditor

Screenshot

bounds values [140, 20, 150, 30] are now visible and editable in the source editor UI, right below Max Zoom

image

Files changed

File Change
ModalSourcesTypeEditor.tsx Added bounds to TileURLSourceEditorProps and rendered a FieldArray after maxzoom
ModalSourcesTypeEditor.tsx Added bounds to TileJSONSourceEditorProps and rendered a FieldArray after the URL field

Testing

  • Load a style with bounds set — all four values appear correctly in the source editor
  • Load a style without bounds — fields remain empty and the UI does not crash
  • Edit bounds in the UI — changes are reflected in the JSON
  • npm run lint passes
  • npm run build passes

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented May 2, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 46.45%. Comparing base (00b20af) to head (08adafa).
⚠️ Report is 23 commits behind head on main.

❗ There is a different number of reports uploaded between BASE (00b20af) and HEAD (08adafa). Click for more details.

HEAD has 2 uploads less than BASE
Flag BASE (00b20af) HEAD (08adafa)
3 1
Additional details and impacted files
@@             Coverage Diff             @@
##             main    #1851       +/-   ##
===========================================
- Coverage   71.57%   46.45%   -25.13%     
===========================================
  Files         102        3       -99     
  Lines        7037      127     -6910     
  Branches     2123       35     -2088     
===========================================
- Hits         5037       59     -4978     
+ Misses       1998       55     -1943     
- Partials        2       13       +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Comment thread src/components/modals/ModalSourcesTypeEditor.tsx Outdated
@HarelM
Copy link
Copy Markdown
Collaborator

HarelM commented May 3, 2026

Please revert filename changes in this PR as they are not relevant to this change.
Please ad end to end test for this functionally.

Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread src/components/modals/ModalSourcesTypeEditor.tsx Outdated
Comment thread src/components/modals/ModalSourcesTypeEditor.tsx Outdated
@KanishJebaMathewM
Copy link
Copy Markdown
Contributor Author

give me some time

@HarelM HarelM marked this pull request as draft May 6, 2026 06:10
@HarelM HarelM marked this pull request as ready for review May 6, 2026 14:14
Comment thread cypress/e2e/maputnik-driver.ts
Comment thread cypress/e2e/maputnik-driver.ts Outdated
Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread cypress/e2e/bounds-field.cy.ts Outdated
@HarelM
Copy link
Copy Markdown
Collaborator

HarelM commented May 6, 2026

Let's focus on this PR next.
I've added some comments, can you share the link with the updated version?

@KanishJebaMathewM
Copy link
Copy Markdown
Contributor Author

Please review the updated changes here: https://maputnik-bounds-field-source-editor.netlify.app/

Comment thread cypress/e2e/maputnik-driver.ts Outdated
@HarelM
Copy link
Copy Markdown
Collaborator

HarelM commented May 7, 2026

There are still some open comments. Can you address those first please?

Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread cypress/e2e/bounds-field.cy.ts Outdated
Comment thread cypress/e2e/maputnik-driver.ts
Comment thread cypress/e2e/modals.cy.ts Outdated
Comment thread CHANGELOG.md Outdated
@HarelM HarelM enabled auto-merge (squash) June 3, 2026 09:23
@HarelM
Copy link
Copy Markdown
Collaborator

HarelM commented Jun 3, 2026

Looks like bounds tests are failing...
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Styling: sources -> bounds is not reflected in the editor

3 participants