Skip to content

[docs][charts] Add map example for arbitrary GeoJSON shapes#22976

Merged
JCQuintas merged 3 commits into
mui:masterfrom
JCQuintas:docs/charts-tectonic-plates-map
Jun 26, 2026
Merged

[docs][charts] Add map example for arbitrary GeoJSON shapes#22976
JCQuintas merged 3 commits into
mui:masterfrom
JCQuintas:docs/charts-tectonic-plates-map

Conversation

@JCQuintas

Copy link
Copy Markdown
Member

Summary

Adds a map demo under Composition → Rendering any GeoJSON shapes, showing that geoData accepts any GeoJSON FeatureCollection — not only country borders.

The example loads the PB2002 tectonic plate model together with country borders into a single geoData as two mapShape series. A single MapShapePlot renders both, and each layer is styled independently via its data-series attribute (colored plates below, country outlines on top for orientation). A toggle switches between a flat naturalEarth1 map and an orthographic globe.

No library changes — relies on the existing data-series attribute emitted per series.

Shows that `geoData` accepts any `FeatureCollection`, using the PB2002 tectonic
plates with country borders for orientation. Both layers share one `geoData` as
two `mapShape` series rendered by a single `MapShapePlot`, styled per layer via
their `data-series` attribute. Toggles between a flat map and an orthographic globe.
@JCQuintas JCQuintas requested a review from alexfauquette as a code owner June 26, 2026 10:59
@JCQuintas JCQuintas added the scope: charts Changes related to the charts. label Jun 26, 2026
@JCQuintas JCQuintas self-assigned this Jun 26, 2026
@JCQuintas JCQuintas added docs Improvements or additions to the documentation. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. labels Jun 26, 2026
@code-infra-dashboard

code-infra-dashboard Bot commented Jun 26, 2026

Copy link
Copy Markdown

Deploy preview

Bundle size

Bundle Parsed size Gzip size
@mui/x-data-grid 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-pro 0B(0.00%) 0B(0.00%)
@mui/x-data-grid-premium 0B(0.00%) 0B(0.00%)
@mui/x-charts 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)
@mui/x-charts-premium 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers 0B(0.00%) 0B(0.00%)
@mui/x-date-pickers-pro 0B(0.00%) 0B(0.00%)
@mui/x-tree-view 0B(0.00%) 0B(0.00%)
@mui/x-tree-view-pro 0B(0.00%) 0B(0.00%)
@mui/x-license 0B(0.00%) 0B(0.00%)

Details of bundle changes


Check out the code infra dashboard for more information about this PR.

@alexfauquette alexfauquette left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice demo 👍

Comment thread docs/data/charts/map/TectonicPlates.js Outdated
]}
>
<ChartsSurface>
<Graticule stroke="#b0bec5" strokeWidth={0.4} opacity={0.3} />

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't get why adding graticule in this case

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It was working when fading was enabled, so it was easier to see distortion. I'll check if putting it in front works, else remove it

@JCQuintas JCQuintas enabled auto-merge (squash) June 26, 2026 16:12
@JCQuintas JCQuintas merged commit 5500bf0 into mui:master Jun 26, 2026
21 checks passed
@JCQuintas JCQuintas deleted the docs/charts-tectonic-plates-map branch June 26, 2026 16:22
mbrookes pushed a commit to mbrookes/mui-x that referenced this pull request Jun 27, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

docs Improvements or additions to the documentation. scope: charts Changes related to the charts. type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants