# v1ctorsales/3d-gis architecture

> Architecture diagram of the GitHub repository v1ctorsales/3d-gis, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-22). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/v1ctorsales/3d-gis
- Repository: https://github.com/v1ctorsales/3d-gis

## Overview

This is a browser GIS app: the user draws and confirms a map area, then explores its terrain in an interactive 3D scene. The main control path runs through App, MapView, and Viewer3D; Viewer3D fetches elevation and satellite imagery plus optional OpenStreetMap overlays. The scene also supports terrain analytics, contours, flood-plane and elevation-profile tools, and export. The README documents these capabilities, but sampled excerpts do not show every internal call, so some subsystem links are intentionally omitted.

Main entry points: [`src/components/Viewer3D/Viewer3D.jsx`](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Viewer3D.jsx) (3D viewer), [`src/App.jsx`](https://github.com/v1ctorsales/3d-gis/blob/main/src/App.jsx) (App workflow), [`src/components/Map/MapView.jsx`](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Map/MapView.jsx) (Map drawing), [`src/services/elevation.js`](https://github.com/v1ctorsales/3d-gis/blob/main/src/services/elevation.js) (Elevation service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_selection["Area selection"]
  node_app["App workflow<br/>[App.jsx]"]
  node_map["Map drawing<br/>[MapView.jsx]"]
  node_panel["Selection panel<br/>[SelectionPanel.jsx]"]
  node_geo["Geo utilities<br/>[geo.js]"]
end

subgraph group_data["Geospatial data"]
  node_elevation["Elevation service<br/>[elevation.js]"]
  node_tiles["Elevation tiles"]
  node_satellite["Satellite imagery"]
  node_osm["OSM service<br/>[osm.js]"]
  node_proxy["Overpass proxy<br/>[overpass.js]"]
  node_overpass["Overpass mirrors"]
end

subgraph group_scene["3D scene"]
  node_viewer["3D viewer<br/>[Viewer3D.jsx]"]
  node_terrain["Terrain rendering<br/>[Terrain.jsx]"]
  node_buildings["Buildings overlay<br/>[Buildings.jsx]"]
  node_water["Water overlay<br/>[Water.jsx]"]
  node_roads["Roads overlay<br/>[Roads.jsx]"]
  node_vegetation["Vegetation overlay<br/>[Vegetation.jsx]"]
end

subgraph group_tools["Analysis tools"]
  node_analytics["Terrain analytics<br/>[terrainAnalysis.js]"]
  node_contours["Contours<br/>[Contours.jsx]"]
  node_flood["Flood analysis<br/>[floodAnalysis.js]"]
  node_profile["Elevation profile<br/>[profileSampling.js]"]
  node_profilepanel["Profile chart<br/>[ProfilePanel.jsx]"]
  node_export["Scene export<br/>[SceneExporter.jsx]"]
end

node_user(("User"))

node_user -->|"draws area"| node_map
node_map -->|"converts geometry"| node_geo
node_map -->|"reports bounds"| node_app
node_app -->|"provides selection"| node_panel
node_panel -->|"confirms area"| node_app
node_app -->|"opens scene"| node_viewer
node_viewer -->|"requests terrain data"| node_elevation
node_viewer -->|"requests overlays"| node_osm
node_elevation -->|"fetches elevation"| node_tiles
node_elevation -->|"fetches imagery"| node_satellite
node_osm -.->|"posts queries"| node_proxy
node_osm -.->|"queries directly"| node_overpass
node_proxy -->|"races mirrors"| node_overpass
node_viewer -->|"renders terrain"| node_terrain
node_viewer -->|"renders overlay"| node_buildings
node_viewer -->|"renders overlay"| node_water
node_viewer -->|"renders overlay"| node_roads
node_viewer -->|"renders overlay"| node_vegetation
node_viewer -->|"computes shading"| node_analytics
node_viewer -->|"renders contours"| node_contours
node_viewer -->|"supports flood analysis"| node_flood
node_viewer -->|"samples profile"| node_profile
node_viewer -->|"shows profile"| node_profilepanel
node_viewer -->|"offers scene export"| node_export

click node_app "https://github.com/v1ctorsales/3d-gis/blob/main/src/App.jsx"
click node_map "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Map/MapView.jsx"
click node_panel "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/SelectionPanel/SelectionPanel.jsx"
click node_geo "https://github.com/v1ctorsales/3d-gis/blob/main/src/utils/geo.js"
click node_viewer "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Viewer3D.jsx"
click node_elevation "https://github.com/v1ctorsales/3d-gis/blob/main/src/services/elevation.js"
click node_osm "https://github.com/v1ctorsales/3d-gis/blob/main/src/services/osm.js"
click node_proxy "https://github.com/v1ctorsales/3d-gis/blob/main/api/overpass.js"
click node_terrain "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Terrain.jsx"
click node_buildings "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Buildings.jsx"
click node_water "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Water.jsx"
click node_roads "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Roads.jsx"
click node_vegetation "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Vegetation.jsx"
click node_analytics "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/terrainAnalysis.js"
click node_contours "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Contours.jsx"
click node_flood "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/floodAnalysis.js"
click node_profile "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/profileSampling.js"
click node_profilepanel "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/ProfilePanel/ProfilePanel.jsx"
click node_export "https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/SceneExporter.jsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_app,node_map,node_panel,node_geo,node_user toneBlue
class node_elevation,node_tiles,node_satellite,node_osm,node_proxy,node_overpass toneAmber
class node_viewer,node_terrain,node_buildings,node_water,node_roads,node_vegetation toneMint
class node_analytics,node_contours,node_flood,node_profile,node_profilepanel,node_export toneRose
```

## Components

### Area selection

- [App workflow](https://github.com/v1ctorsales/3d-gis/blob/main/src/App.jsx): `src/App.jsx`
- [Map drawing](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Map/MapView.jsx): `src/components/Map/MapView.jsx`
- [Selection panel](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/SelectionPanel/SelectionPanel.jsx): `src/components/SelectionPanel/SelectionPanel.jsx`
- [Geo utilities](https://github.com/v1ctorsales/3d-gis/blob/main/src/utils/geo.js): `src/utils/geo.js`

### Geospatial data

- [Elevation service](https://github.com/v1ctorsales/3d-gis/blob/main/src/services/elevation.js): `src/services/elevation.js`
- **Elevation tiles**
- **Satellite imagery**
- [OSM service](https://github.com/v1ctorsales/3d-gis/blob/main/src/services/osm.js): `src/services/osm.js`
- [Overpass proxy](https://github.com/v1ctorsales/3d-gis/blob/main/api/overpass.js): `api/overpass.js`
- **Overpass mirrors**

### 3D scene

- [3D viewer](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Viewer3D.jsx): `src/components/Viewer3D/Viewer3D.jsx`
- [Terrain rendering](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Terrain.jsx): `src/components/Viewer3D/Terrain.jsx`
- [Buildings overlay](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Buildings.jsx): `src/components/Viewer3D/Buildings.jsx`
- [Water overlay](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Water.jsx): `src/components/Viewer3D/Water.jsx`
- [Roads overlay](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Roads.jsx): `src/components/Viewer3D/Roads.jsx`
- [Vegetation overlay](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Vegetation.jsx): `src/components/Viewer3D/Vegetation.jsx`

### Analysis tools

- [Terrain analytics](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/terrainAnalysis.js): `src/components/Viewer3D/terrainAnalysis.js`
- [Contours](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/Contours.jsx): `src/components/Viewer3D/Contours.jsx`
- [Flood analysis](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/floodAnalysis.js): `src/components/Viewer3D/floodAnalysis.js`
- [Elevation profile](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/profileSampling.js): `src/components/Viewer3D/profileSampling.js`
- [Profile chart](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/ProfilePanel/ProfilePanel.jsx): `src/components/ProfilePanel/ProfilePanel.jsx`
- [Scene export](https://github.com/v1ctorsales/3d-gis/blob/main/src/components/Viewer3D/SceneExporter.jsx): `src/components/Viewer3D/SceneExporter.jsx`

### Other components

- **User**

## Connections

- User → Map drawing: draws area
- Map drawing → Geo utilities: converts geometry
- Map drawing → App workflow: reports bounds
- App workflow → Selection panel: provides selection
- Selection panel → App workflow: confirms area
- App workflow → 3D viewer: opens scene
- 3D viewer → Elevation service: requests terrain data
- 3D viewer → OSM service: requests overlays
- Elevation service → Elevation tiles: fetches elevation
- Elevation service → Satellite imagery: fetches imagery
- OSM service → Overpass proxy: posts queries
- OSM service → Overpass mirrors: queries directly
- Overpass proxy → Overpass mirrors: races mirrors
- 3D viewer → Terrain rendering: renders terrain
- 3D viewer → Buildings overlay: renders overlay
- 3D viewer → Water overlay: renders overlay
- 3D viewer → Roads overlay: renders overlay
- 3D viewer → Vegetation overlay: renders overlay
- 3D viewer → Terrain analytics: computes shading
- 3D viewer → Contours: renders contours
- 3D viewer → Flood analysis: supports flood analysis
- 3D viewer → Elevation profile: samples profile
- 3D viewer → Profile chart: shows profile
- 3D viewer → Scene export: offers scene export