# swisstopo/topo-swisseobrowser architecture

> Architecture diagram of the GitHub repository swisstopo/topo-swisseobrowser, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-15). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/swisstopo/topo-swisseobrowser
- Repository: https://github.com/swisstopo/topo-swisseobrowser

## Overview

swissEO Browser is a browser-only geospatial viewer. Users choose a date, product/theme and layer, explore it on a map, and can inspect pixels, compute AOI statistics, compare layers, export analytical data or view terrain in 3D. The README documents these capabilities, but the main HTML implementation was not excerpted, so runtime links are shown as documented rather than attributed to specific handlers. Bundled libraries and localization are included where they are substantial runtime parts; build and validation tooling is excluded.

Main entry points: [`swisseo-browser.html`](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html) (Browser application), [`js/i18n.js`](https://github.com/swisstopo/topo-swisseobrowser/blob/main/js/i18n.js) (Localization), [`catalog/layers.yaml`](https://github.com/swisstopo/topo-swisseobrowser/blob/main/catalog/layers.yaml) (Layer catalogue), [`catalog/configurations.yaml`](https://github.com/swisstopo/topo-swisseobrowser/blob/main/catalog/configurations.yaml) (Product configurations)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Browser experience"]
  node_page["Browser application"]
  node_search["Place search"]
end

subgraph group_products["Products and analysis"]
  node_catalog["Layer catalogue<br/>[layers.yaml]"]
  node_presets["Product configurations"]
  node_pixel["Pixel inspector"]
  node_stats["AOI statistics"]
  node_compare["Layer comparison"]
  node_export["Analytical downloads"]
end

subgraph group_mapping["Map rendering"]
  node_map["Interactive map"]
  node_terrain["3D terrain"]
end

subgraph group_runtime["Runtime support"]
  node_geotiff["GeoTIFF reader<br/>[geotiff-2.1.3.js]"]
  node_forest["Forest classifier"]
  node_projection["Coordinate projection"]
  node_mgrs["MGRS conversion<br/>[mgrs-2.2.0.js]"]
  node_geojson["GeoJSON conversion"]
  node_i18n["Localization<br/>[i18n.js]"]
  node_translations["Translation resources"]
end

node_user(("Map user"))
node_stac[("STAC catalogue service")]
node_cogs[("swissEO COGs")]
node_wms["WMS and WMTS"]
node_basemaps["Basemap services"]
node_searchapi["GeoAdmin search"]

node_user -->|"uses"| node_page
node_page -->|"configures layers"| node_catalog
node_page -->|"offers products"| node_presets
node_page -->|"displays products"| node_map
node_page -->|"supports inspection"| node_pixel
node_page -->|"computes statistics"| node_stats
node_page -->|"compares layers"| node_compare
node_page -->|"offers downloads"| node_export
node_page -->|"searches places"| node_search
node_page -->|"offers 3D"| node_terrain
node_map -->|"reads COGs"| node_cogs
node_map -->|"requests layers"| node_wms
node_map -->|"composes tiles"| node_basemaps
node_page -->|"resolves items"| node_stac
node_stats -->|"reads AOI data"| node_cogs
node_export -->|"downloads data"| node_cogs
node_terrain -->|"finds height assets"| node_stac
node_terrain -->|"reads elevation"| node_cogs
node_search -->|"queries places"| node_searchapi
node_page -.->|"reads rasters"| node_geotiff
node_page -->|"classifies disturbance"| node_forest
node_page -->|"uses projections"| node_projection
node_page -.->|"uses conversion"| node_mgrs
node_page -.->|"imports geometry"| node_geojson
node_page -->|"initializes language"| node_i18n
node_i18n -->|"fetches language"| node_translations

click node_page "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_catalog "https://github.com/swisstopo/topo-swisseobrowser/blob/main/catalog/layers.yaml"
click node_presets "https://github.com/swisstopo/topo-swisseobrowser/blob/main/catalog/configurations.yaml"
click node_pixel "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_stats "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_compare "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_export "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_search "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_map "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_terrain "https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html"
click node_geotiff "https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/geotiff-2.1.3.js"
click node_forest "https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/forest-disturbance-trees-0a071cf.mjs"
click node_projection "https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/proj4-2.22.0.esm.js"
click node_mgrs "https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/mgrs-2.2.0.js"
click node_geojson "https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/togeojson-7.1.3.umd.js"
click node_i18n "https://github.com/swisstopo/topo-swisseobrowser/blob/main/js/i18n.js"
click node_translations "https://github.com/swisstopo/topo-swisseobrowser/tree/main/locales"

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_page,node_search,node_user toneBlue
class node_catalog,node_presets,node_pixel,node_stats,node_compare,node_export,node_stac,node_cogs toneAmber
class node_map,node_terrain toneMint
class node_geotiff,node_forest,node_projection,node_mgrs,node_geojson,node_i18n,node_translations toneRose
class node_wms,node_basemaps,node_searchapi toneIndigo
```

## Components

### Browser experience

- [Browser application](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`
- [Place search](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`

### Products and analysis

- [Layer catalogue](https://github.com/swisstopo/topo-swisseobrowser/blob/main/catalog/layers.yaml): `catalog/layers.yaml`
- [Product configurations](https://github.com/swisstopo/topo-swisseobrowser/blob/main/catalog/configurations.yaml): `catalog/configurations.yaml`
- [Pixel inspector](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`
- [AOI statistics](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`
- [Layer comparison](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`
- [Analytical downloads](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`

### Map rendering

- [Interactive map](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`
- [3D terrain](https://github.com/swisstopo/topo-swisseobrowser/blob/main/swisseo-browser.html): `swisseo-browser.html`

### Runtime support

- [GeoTIFF reader](https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/geotiff-2.1.3.js): `lib/geotiff-2.1.3.js`
- [Forest classifier](https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/forest-disturbance-trees-0a071cf.mjs): `lib/forest-disturbance-trees-0a071cf.mjs`
- [Coordinate projection](https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/proj4-2.22.0.esm.js): `lib/proj4-2.22.0.esm.js`
- [MGRS conversion](https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/mgrs-2.2.0.js): `lib/mgrs-2.2.0.js`
- [GeoJSON conversion](https://github.com/swisstopo/topo-swisseobrowser/blob/main/lib/togeojson-7.1.3.umd.js): `lib/togeojson-7.1.3.umd.js`
- [Localization](https://github.com/swisstopo/topo-swisseobrowser/blob/main/js/i18n.js): `js/i18n.js`
- [Translation resources](https://github.com/swisstopo/topo-swisseobrowser/tree/main/locales): `locales`

### Other components

- **Map user**
- **STAC catalogue service**
- **swissEO COGs**
- **WMS and WMTS**
- **Basemap services**
- **GeoAdmin search**

## Connections

- Map user → Browser application: uses (evidence: `README.md`)
- Browser application → Layer catalogue: configures layers (evidence: `README.md`)
- Browser application → Product configurations: offers products (evidence: `README.md`)
- Browser application → Interactive map: displays products (evidence: `README.md`)
- Browser application → Pixel inspector: supports inspection (evidence: `README.md`)
- Browser application → AOI statistics: computes statistics (evidence: `README.md`)
- Browser application → Layer comparison: compares layers (evidence: `README.md`)
- Browser application → Analytical downloads: offers downloads (evidence: `README.md`)
- Browser application → Place search: searches places (evidence: `README.md`)
- Browser application → 3D terrain: offers 3D (evidence: `README.md`)
- Interactive map → swissEO COGs: reads COGs (evidence: `README.md`)
- Interactive map → WMS and WMTS: requests layers (evidence: `README.md`)
- Interactive map → Basemap services: composes tiles (evidence: `README.md`)
- Browser application → STAC catalogue service: resolves items (evidence: `README.md`)
- AOI statistics → swissEO COGs: reads AOI data (evidence: `README.md`)
- Analytical downloads → swissEO COGs: downloads data (evidence: `README.md`)
- 3D terrain → STAC catalogue service: finds height assets (evidence: `README.md`)
- 3D terrain → swissEO COGs: reads elevation (evidence: `README.md`)
- Place search → GeoAdmin search: queries places (evidence: `README.md`)
- Browser application → GeoTIFF reader: reads rasters
- Browser application → Forest classifier: classifies disturbance (evidence: `lib/forest-disturbance-trees-0a071cf.mjs`)
- Browser application → Coordinate projection: uses projections (evidence: `README.md`)
- Browser application → MGRS conversion: uses conversion
- Browser application → GeoJSON conversion: imports geometry
- Browser application → Localization: initializes language (evidence: `js/i18n.js`)
- Localization → Translation resources: fetches language (evidence: `js/i18n.js`)