# gisktzh/gb3-web_ui architecture

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

- Interactive diagram: https://gitdiagram.com/gisktzh/gb3-web_ui
- Repository: https://github.com/gisktzh/gb3-web_ui

## Overview

GB3 Frontend is the Geoportal Kanton Zürich web GIS: users enter through the Angular route shell, browse maps or catalogue records, and use mapping tools to inspect, edit, share, or download geospatial information. The tree also shows authentication, embedded maps, apps, and support/privacy routes as product branches. The sampled source confirms route dispatch, OAuth handling, catalogue detail routing, and coordinate parsing; other map and catalogue capabilities are represented from their component paths and names, with uncertain service wiring omitted.

Main entry points: [`src/app/map/map-page.component.ts`](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/map-page.component.ts) (Interactive map), [`src/app/app.routes.ts`](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/app.routes.ts) (Route shell), [`src/app/data-catalogue/data-catalogue.routes.ts`](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/data-catalogue.routes.ts) (Catalogue routes), [`src/app/auth/auth.service.ts`](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/auth/auth.service.ts) (OAuth session)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Application routes"]
  node_router["Route shell<br/>[app.routes.ts]"]
  node_map_routes["Map routes<br/>[map.routes.ts]"]
  node_catalogue_routes["Catalogue routes"]
  node_auth_routes["Authentication routes<br/>[auth.routes.ts]"]
  node_embed_routes["Embedded map routes"]
  node_share_routes["Share-link routes"]
  node_other_routes["Other pages<br/>[app.routes.ts]"]
end

subgraph group_mapping["GIS browser"]
  node_map_page["Interactive map"]
  node_map_view["Map rendering"]
  node_map_tools["Map tools"]
  node_map_search["Map search"]
  node_map_items["Map layers"]
  node_map_feature_info["Feature information"]
  node_map_drawing["Drawing tools"]
  node_coordinates["Coordinate parsing"]
  node_embedded_map["Embedded map page"]
end

subgraph group_catalogue["Geodata catalogue"]
  node_catalogue_page["Catalogue overview"]
  node_catalogue_details["Resource details"]
  node_catalogue_data["Catalogue page shell"]
end

subgraph group_identity["Identity and sharing"]
  node_auth_service["OAuth session<br/>[auth.service.ts]"]
  node_auth_notices["Session notices"]
  node_share_redirect["Share redirect"]
  node_session_storage[("Session storage")]
end

subgraph group_other["Other product pages"]
  node_apps["Apps directory"]
  node_support["Support pages"]
  node_privacy["Privacy page"]
end

node_visitor(("Geoportal user"))
node_auth_provider{{"OAuth provider"}}
node_arcgis{{"ArcGIS API"}}

node_visitor -->|"opens pages"| node_router
node_router -->|"loads routes"| node_map_routes
node_router -->|"loads routes"| node_catalogue_routes
node_router -->|"loads routes"| node_auth_routes
node_router -->|"loads routes"| node_embed_routes
node_router -->|"loads routes"| node_share_routes
node_router -->|"loads routes"| node_other_routes
node_map_routes -->|"routes to"| node_map_page
node_map_page -->|"renders with"| node_map_view
node_map_view -->|"uses API"| node_arcgis
node_map_page -->|"presents tools"| node_map_tools
node_map_page -->|"presents search"| node_map_search
node_map_page -->|"presents layers"| node_map_items
node_map_page -->|"presents details"| node_map_feature_info
node_map_page -->|"uses drawing"| node_map_drawing
node_map_page -->|"parses input"| node_coordinates
node_catalogue_routes -->|"routes through"| node_catalogue_data
node_catalogue_routes -->|"routes to"| node_catalogue_page
node_catalogue_routes -->|"routes to"| node_catalogue_details
node_auth_routes -->|"uses session"| node_auth_service
node_auth_service -->|"authenticates with"| node_auth_provider
node_auth_service -->|"shows notices"| node_auth_notices
node_share_routes -->|"routes to"| node_share_redirect
node_share_redirect -->|"uses storage"| node_session_storage
node_embed_routes -->|"routes to"| node_embedded_map
node_other_routes -->|"routes to"| node_apps
node_other_routes -->|"loads support"| node_support
node_other_routes -->|"loads privacy"| node_privacy

click node_router "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/app.routes.ts"
click node_map_routes "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/map.routes.ts"
click node_catalogue_routes "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/data-catalogue.routes.ts"
click node_auth_routes "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/auth/auth.routes.ts"
click node_embed_routes "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/embedded-page/embedded-map-page.routes.ts"
click node_share_routes "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/share-link/share-link.routes.ts"
click node_other_routes "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/app.routes.ts"
click node_map_page "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/map-page.component.ts"
click node_map_view "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/services/esri-services/esri-map.service.ts"
click node_map_tools "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/map-tools/map-tools.component.ts"
click node_map_search "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/search-window/search-window.component.ts"
click node_map_items "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/active-map-items/active-map-items.component.ts"
click node_map_feature_info "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/feature-info-overlay/feature-info-overlay.component.ts"
click node_map_drawing "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/services/map-drawing.service.ts"
click node_coordinates "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/services/coordinate-parser.service.ts"
click node_catalogue_page "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/components/data-catalogue-overview/data-catalogue-overview.component.ts"
click node_catalogue_details "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/components/dataset-detail/dataset-detail.component.ts"
click node_catalogue_data "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/data-catalogue-page.component.ts"
click node_auth_service "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/auth/auth.service.ts"
click node_auth_notices "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/auth/notifications/auth-notification.service.ts"
click node_share_redirect "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/share-link/components/share-link-redirect/share-link-redirect.component.ts"
click node_session_storage "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/shared/services/session-storage.service.ts"
click node_embedded_map "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/embedded-page/embedded-map-page.component.ts"
click node_apps "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/apps-page/apps-page.component.ts"
click node_support "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/support-page/support-page.routes.ts"
click node_privacy "https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/privacy/privacy-page.component.ts"

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_router,node_map_routes,node_catalogue_routes,node_auth_routes,node_embed_routes,node_share_routes,node_other_routes,node_visitor toneBlue
class node_map_page,node_map_view,node_map_tools,node_map_search,node_map_items,node_map_feature_info,node_map_drawing,node_coordinates,node_embedded_map toneAmber
class node_catalogue_page,node_catalogue_details,node_catalogue_data,node_arcgis toneMint
class node_auth_service,node_auth_notices,node_share_redirect,node_session_storage toneRose
class node_apps,node_support,node_privacy,node_auth_provider toneIndigo
```

## Components

### Application routes

- [Route shell](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/app.routes.ts): `src/app/app.routes.ts`
- [Map routes](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/map.routes.ts): `src/app/map/map.routes.ts`
- [Catalogue routes](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/data-catalogue.routes.ts): `src/app/data-catalogue/data-catalogue.routes.ts`
- [Authentication routes](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/auth/auth.routes.ts): `src/app/auth/auth.routes.ts`
- [Embedded map routes](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/embedded-page/embedded-map-page.routes.ts): `src/app/embedded-page/embedded-map-page.routes.ts`
- [Share-link routes](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/share-link/share-link.routes.ts): `src/app/share-link/share-link.routes.ts`
- [Other pages](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/app.routes.ts): `src/app/app.routes.ts`

### GIS browser

- [Interactive map](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/map-page.component.ts): `src/app/map/map-page.component.ts`
- [Map rendering](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/services/esri-services/esri-map.service.ts): `src/app/map/services/esri-services/esri-map.service.ts`
- [Map tools](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/map-tools/map-tools.component.ts): `src/app/map/components/map-tools/map-tools.component.ts`
- [Map search](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/search-window/search-window.component.ts): `src/app/map/components/search-window/search-window.component.ts`
- [Map layers](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/active-map-items/active-map-items.component.ts): `src/app/map/components/active-map-items/active-map-items.component.ts`
- [Feature information](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/components/feature-info-overlay/feature-info-overlay.component.ts): `src/app/map/components/feature-info-overlay/feature-info-overlay.component.ts`
- [Drawing tools](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/services/map-drawing.service.ts): `src/app/map/services/map-drawing.service.ts`
- [Coordinate parsing](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/map/services/coordinate-parser.service.ts): `src/app/map/services/coordinate-parser.service.ts`
- [Embedded map page](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/embedded-page/embedded-map-page.component.ts): `src/app/embedded-page/embedded-map-page.component.ts`

### Geodata catalogue

- [Catalogue overview](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/components/data-catalogue-overview/data-catalogue-overview.component.ts): `src/app/data-catalogue/components/data-catalogue-overview/data-catalogue-overview.component.ts`
- [Resource details](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/components/dataset-detail/dataset-detail.component.ts): `src/app/data-catalogue/components/dataset-detail/dataset-detail.component.ts`
- [Catalogue page shell](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/data-catalogue/data-catalogue-page.component.ts): `src/app/data-catalogue/data-catalogue-page.component.ts`

### Identity and sharing

- [OAuth session](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/auth/auth.service.ts): `src/app/auth/auth.service.ts`
- [Session notices](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/auth/notifications/auth-notification.service.ts): `src/app/auth/notifications/auth-notification.service.ts`
- [Share redirect](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/share-link/components/share-link-redirect/share-link-redirect.component.ts): `src/app/share-link/components/share-link-redirect/share-link-redirect.component.ts`
- [Session storage](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/shared/services/session-storage.service.ts): `src/app/shared/services/session-storage.service.ts`

### Other product pages

- [Apps directory](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/apps-page/apps-page.component.ts): `src/app/apps-page/apps-page.component.ts`
- [Support pages](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/support-page/support-page.routes.ts): `src/app/support-page/support-page.routes.ts`
- [Privacy page](https://github.com/gisktzh/gb3-web_ui/blob/develop/src/app/privacy/privacy-page.component.ts): `src/app/privacy/privacy-page.component.ts`

### Other components

- **Geoportal user**
- **OAuth provider**
- **ArcGIS API**

## Connections

- Geoportal user → Route shell: opens pages
- Route shell → Map routes: loads routes
- Route shell → Catalogue routes: loads routes
- Route shell → Authentication routes: loads routes
- Route shell → Embedded map routes: loads routes
- Route shell → Share-link routes: loads routes
- Route shell → Other pages: loads routes
- Map routes → Interactive map: routes to
- Interactive map → Map rendering: renders with
- Map rendering → ArcGIS API: uses API
- Interactive map → Map tools: presents tools
- Interactive map → Map search: presents search
- Interactive map → Map layers: presents layers
- Interactive map → Feature information: presents details
- Interactive map → Drawing tools: uses drawing
- Interactive map → Coordinate parsing: parses input
- Catalogue routes → Catalogue page shell: routes through
- Catalogue routes → Catalogue overview: routes to
- Catalogue routes → Resource details: routes to
- Authentication routes → OAuth session: uses session
- OAuth session → OAuth provider: authenticates with
- OAuth session → Session notices: shows notices
- Share-link routes → Share redirect: routes to
- Share redirect → Session storage: uses storage
- Embedded map routes → Embedded map page: routes to
- Other pages → Apps directory: routes to
- Other pages → Support pages: loads support
- Other pages → Privacy page: loads privacy