# algis-lab/geol-age-ph architecture

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

- Interactive diagram: https://gitdiagram.com/algis-lab/geol-age-ph
- Repository: https://github.com/algis-lab/geol-age-ph

## Overview

This repository is a generated, browser-based map for exploring Philippine geological-age data. The documented purpose is visualization and GIS-based study; sampled code shows a map initialized with configured layers, plus feature popups, search, and measurement behavior. The excerpts do not show the HTML wiring or all control registrations, so those relationships are omitted rather than inferred. Several bundled GIS modules are core-indexed, but their integration with the map is not established by the available evidence.

Main entry points: [`layers/layers.js`](https://github.com/algis-lab/geol-age-ph/blob/main/layers/layers.js) (Layer configuration), [`resources/qgis2web.js`](https://github.com/algis-lab/geol-age-ph/blob/main/resources/qgis2web.js) (Interactive map), [`styles/GeologicAge_PH_compressed_3_style.js`](https://github.com/algis-lab/geol-age-ph/blob/main/styles/GeologicAge_PH_compressed_3_style.js) (Age-category styling), [`layers/GeologicAge_PH_compressed_3.js`](https://github.com/algis-lab/geol-age-ph/blob/main/layers/GeologicAge_PH_compressed_3.js) (Geologic-age features)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_mapdata["Map data and styling"]
  node_layerconfig["Layer configuration<br/>[layers.js]"]
  node_geology["Geologic-age features"]
  node_geostyle["Age-category styling"]
  node_textstyle["Label helpers<br/>[functions.js]"]
end

subgraph group_runtime["Map runtime"]
  node_mapapp["Interactive map<br/>[qgis2web.js]"]
end

subgraph group_controls["Map controls"]
  node_search["Feature search<br/>[ol-search-layer.js]"]
  node_switcher["Layer switcher"]
end

subgraph group_gislibs["GIS libraries"]
  node_olengine["OpenLayers engine<br/>[ol.js]"]
  node_mapboxstyle["Map style support<br/>[olms.js]"]
  node_projections["Projection support<br/>[proj4.js]"]
  node_expressions["GIS expressions"]
end

node_researcher(("Map user"))
node_osm["OpenStreetMap tiles"]
node_googlemaps["Google Maps tiles"]
node_esri["Esri map tiles"]

node_researcher -->|"uses"| node_mapapp
node_mapapp -->|"loads layers"| node_layerconfig
node_layerconfig -->|"loads features"| node_geology
node_layerconfig -->|"assigns style"| node_geostyle
node_geostyle -->|"creates labels"| node_textstyle
node_layerconfig -->|"requests tiles"| node_osm
node_layerconfig -->|"requests tiles"| node_googlemaps
node_layerconfig -->|"requests tiles"| node_esri
node_mapapp -.->|"offers search"| node_search
node_mapapp -.->|"offers layer control"| node_switcher

click node_mapapp "https://github.com/algis-lab/geol-age-ph/blob/main/resources/qgis2web.js"
click node_layerconfig "https://github.com/algis-lab/geol-age-ph/blob/main/layers/layers.js"
click node_geology "https://github.com/algis-lab/geol-age-ph/blob/main/layers/GeologicAge_PH_compressed_3.js"
click node_geostyle "https://github.com/algis-lab/geol-age-ph/blob/main/styles/GeologicAge_PH_compressed_3_style.js"
click node_textstyle "https://github.com/algis-lab/geol-age-ph/blob/main/resources/functions.js"
click node_search "https://github.com/algis-lab/geol-age-ph/blob/main/resources/ol-search-layer.js"
click node_switcher "https://github.com/algis-lab/geol-age-ph/blob/main/resources/ol-layerswitcher.js"
click node_olengine "https://github.com/algis-lab/geol-age-ph/blob/main/resources/ol.js"
click node_mapboxstyle "https://github.com/algis-lab/geol-age-ph/blob/main/resources/olms.js"
click node_projections "https://github.com/algis-lab/geol-age-ph/blob/main/resources/proj4.js"
click node_expressions "https://github.com/algis-lab/geol-age-ph/blob/main/resources/qgis2web_expressions.js"

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_layerconfig,node_geology,node_geostyle,node_textstyle,node_researcher toneBlue
class node_mapapp toneAmber
class node_search,node_switcher toneMint
class node_olengine,node_mapboxstyle,node_projections,node_expressions toneRose
class node_osm,node_googlemaps,node_esri toneIndigo
```

## Components

### Map data and styling

- [Layer configuration](https://github.com/algis-lab/geol-age-ph/blob/main/layers/layers.js): `layers/layers.js`
- [Geologic-age features](https://github.com/algis-lab/geol-age-ph/blob/main/layers/GeologicAge_PH_compressed_3.js): `layers/GeologicAge_PH_compressed_3.js`
- [Age-category styling](https://github.com/algis-lab/geol-age-ph/blob/main/styles/GeologicAge_PH_compressed_3_style.js): `styles/GeologicAge_PH_compressed_3_style.js`
- [Label helpers](https://github.com/algis-lab/geol-age-ph/blob/main/resources/functions.js): `resources/functions.js`

### Map runtime

- [Interactive map](https://github.com/algis-lab/geol-age-ph/blob/main/resources/qgis2web.js): `resources/qgis2web.js`

### Map controls

- [Feature search](https://github.com/algis-lab/geol-age-ph/blob/main/resources/ol-search-layer.js): `resources/ol-search-layer.js`
- [Layer switcher](https://github.com/algis-lab/geol-age-ph/blob/main/resources/ol-layerswitcher.js): `resources/ol-layerswitcher.js`

### GIS libraries

- [OpenLayers engine](https://github.com/algis-lab/geol-age-ph/blob/main/resources/ol.js): `resources/ol.js`
- [Map style support](https://github.com/algis-lab/geol-age-ph/blob/main/resources/olms.js): `resources/olms.js`
- [Projection support](https://github.com/algis-lab/geol-age-ph/blob/main/resources/proj4.js): `resources/proj4.js`
- [GIS expressions](https://github.com/algis-lab/geol-age-ph/blob/main/resources/qgis2web_expressions.js): `resources/qgis2web_expressions.js`

### Other components

- **Map user**
- **OpenStreetMap tiles**
- **Google Maps tiles**
- **Esri map tiles**

## Connections

- Map user → Interactive map: uses
- Interactive map → Layer configuration: loads layers (evidence: `resources/qgis2web.js`)
- Layer configuration → Geologic-age features: loads features (evidence: `layers/layers.js`)
- Layer configuration → Age-category styling: assigns style (evidence: `layers/layers.js`)
- Age-category styling → Label helpers: creates labels (evidence: `styles/GeologicAge_PH_compressed_3_style.js`)
- Layer configuration → OpenStreetMap tiles: requests tiles (evidence: `layers/layers.js`)
- Layer configuration → Google Maps tiles: requests tiles (evidence: `layers/layers.js`)
- Layer configuration → Esri map tiles: requests tiles (evidence: `layers/layers.js`)
- Interactive map → Feature search: offers search
- Interactive map → Layer switcher: offers layer control