Skip to content

Proposal: Interactive extruded GeoJSON map as a Community component #11

Description

@MagicWAYNE

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions