Proposal: Interactive extruded GeoJSON map as a Community component
Nobody has claimed this yet.
- Dominant language
- HTML
- Stars
- 6k
- Forks
- 568
- Avg merge
- 1d 6h
- Merged PRs (30d)
- 6
Description
Summary
Would you be open to an interactive extruded GeoJSON map as a ThreeUI Community component?
The proposed component would render GeoJSON Polygon and MultiPolygon features as an interactive Three.js scene, with configurable extrusion, data columns, hover feedback, glow, camera behavior, and colors.
This proposal is informed by an existing working project, but I am not proposing to merge or embed the entire application into ThreeUI.
Existing reference:
- Live demo: https://geojson-map-studio.vercel.app/
- Source project: https://github.com/MagicWAYNE/geojson-map-studio
- Preview: https://raw.githubusercontent.com/MagicWAYNE/geojson-map-studio/main/preview.gif

Proposed Community component
Working name: ExtrudedGeoJsonMap
The component would accept GeoJSON and optional regional metrics through props rather than including an authoring application or upload workflow.
Possible API direction:
geojson: a GeoJSONFeatureCollectionvalues: optional values keyed by feature identifierextrusionDepthandelevationScaletopColor,sideColor, andglowColorshowDataBarsautoRotateenableHover- camera and interaction options
Possible variants:
- Neon Regions — extruded regions with cyan edge glow and hover elevation.
- Data Bars — regional values represented as animated vertical columns.
- Wireframe Atlas — a restrained monochrome/wireframe treatment suitable for hero sections and technical dashboards.
Implementation boundaries
I would extract only the reusable renderer and adapt it to ThreeUI conventions:
- A framework-independent TypeScript/Three.js renderer.
- A small React lifecycle wrapper compatible with the public ThreeUI package.
- One WebGL context with complete resource cleanup.
- Responsive sizing through
ResizeObserver. - Visibility-aware animation and document visibility handling.
- Reduced-motion support.
- No runtime network requests.
- No Vue, router, ECharts, IndexedDB, authoring panels, regional catalog, or upload workflow.
- No third-party fonts, satellite imagery, administrative datasets, or inherited dashboard assets.
- A small synthetic GeoJSON fixture for the default preview.
- Only code and assets that can be contributed under the repository's MIT license.
Why it may fit ThreeUI
The reusable part is a visual Three.js component rather than a domain-specific map application. It could work as an interactive hero, dashboard background, or lightweight geographic data visualization while keeping the consumer-facing API focused and customizable.
Contribution-path questions
Before implementing the extraction, I would appreciate guidance on:
- Does ThreeUI currently accept third-party Community component proposals?
- Since the public Community repository is synchronized from a separate main project, should a component contribution target this public repository, or should the source first be reviewed for inclusion in the main catalog?
- Would you prefer a small standalone React proof of concept before the package export, catalog metadata, controls, and variants are implemented?
I am happy to keep the first version narrowly scoped and follow the repository's preferred component structure and review process.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reviewing the public Community repository's component structure and how it is synchronized from the separate main project, then compare the referenced GeoJSON Map Studio source with the proposed boundaries. This issue is done only when maintainers decide whether the component belongs in the catalog, where it should be contributed, and what initial scope and proof of concept they want.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, three.js, typescript
- Domain
- computer-graphics, frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Active
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100