MengTo / MengTo/threeui

Proposal: Interactive extruded GeoJSON map as a Community component

Open
#11 2 comments 0 reactions 0 assignees View on GitHub

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:

GeoJSON Map Studio preview

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 GeoJSON FeatureCollection
  • values: optional values keyed by feature identifier
  • extrusionDepth and elevationScale
  • topColor, sideColor, and glowColor
  • showDataBars
  • autoRotate
  • enableHover
  • camera and interaction options

Possible variants:

  1. Neon Regions — extruded regions with cyan edge glow and hover elevation.
  2. Data Bars — regional values represented as animated vertical columns.
  3. 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:

  1. Does ThreeUI currently accept third-party Community component proposals?
  2. 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?
  3. 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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.