# queakie24/monastir-mapping-project architecture

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

- Interactive diagram: https://gitdiagram.com/queakie24/monastir-mapping-project
- Repository: https://github.com/queakie24/monastir-mapping-project

## Overview

Monastir Mapping is a browser-based historical emigration map. Users choose a destination city and census year, view household markers, and select an address to inspect family and person records. The graph follows the runtime visible in `src/main.js`; the README names the covered cities, while the sampled source shows the map and query flow. The HTML structure and database schema were not sampled, so their details are not expanded.

Main entry points: [`src/main.js`](https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js) (Map runtime), [`database/testdb.sqlite`](https://github.com/queakie24/monastir-mapping-project/blob/main/database/testdb.sqlite) (Census database), [`index.html`](https://github.com/queakie24/monastir-mapping-project/blob/main/index.html) (Map page), [`lib/sql-wasm.js`](https://github.com/queakie24/monastir-mapping-project/blob/main/lib/sql-wasm.js) (SQL.js initialization)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Map Interface"]
  node_page["Map page<br/>[index.html]"]
  node_city_year["City and year controls<br/>[index.html]"]
  node_marker_layer["Clustered markers<br/>[main.js]"]
  node_side_panel["Family details panel<br/>[index.html]"]
  node_leaflet["Leaflet map"]
end

subgraph group_workflow["Census Browsing"]
  node_map_app["Map runtime<br/>[main.js]"]
  node_city_config["City and year configuration<br/>[main.js]"]
  node_marker_query["Address marker query<br/>[main.js]"]
  node_address_details["Address family details<br/>[main.js]"]
end

subgraph group_data["Data Runtime"]
  node_sqlite_init["SQL.js initialization<br/>[sql-wasm.js]"]
  node_wasm["SQLite WebAssembly<br/>[sql-wasm.wasm]"]
  node_census_db[("Census database<br/>[testdb.sqlite]")]
end

node_visitor(("Map visitor"))
node_osm["OpenStreetMap tiles"]

node_visitor -->|"opens"| node_page
node_page -->|"starts"| node_map_app
node_visitor -->|"selects"| node_city_year
node_city_year -->|"dispatches changes"| node_map_app
node_map_app -->|"reads settings"| node_city_config
node_map_app -->|"initializes SQL"| node_sqlite_init
node_sqlite_init -->|"loads runtime"| node_wasm
node_map_app -->|"fetches database"| node_census_db
node_map_app -->|"loads markers"| node_marker_query
node_marker_query -->|"queries addresses"| node_census_db
node_marker_query -->|"adds markers"| node_marker_layer
node_map_app -->|"creates map"| node_leaflet
node_map_app -->|"requests tiles"| node_osm
node_marker_layer -->|"displays markers"| node_leaflet
node_visitor -->|"selects address"| node_marker_layer
node_marker_layer -->|"dispatches click"| node_address_details
node_address_details -->|"queries family records"| node_census_db
node_address_details -->|"renders details"| node_side_panel

click node_page "https://github.com/queakie24/monastir-mapping-project/blob/main/index.html"
click node_map_app "https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js"
click node_city_year "https://github.com/queakie24/monastir-mapping-project/blob/main/index.html"
click node_city_config "https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js"
click node_marker_query "https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js"
click node_marker_layer "https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js"
click node_address_details "https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js"
click node_side_panel "https://github.com/queakie24/monastir-mapping-project/blob/main/index.html"
click node_sqlite_init "https://github.com/queakie24/monastir-mapping-project/blob/main/lib/sql-wasm.js"
click node_wasm "https://github.com/queakie24/monastir-mapping-project/blob/main/lib/sql-wasm.wasm"
click node_census_db "https://github.com/queakie24/monastir-mapping-project/blob/main/database/testdb.sqlite"

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_city_year,node_marker_layer,node_side_panel,node_leaflet toneBlue
class node_map_app,node_city_config,node_marker_query,node_address_details toneAmber
class node_sqlite_init,node_wasm,node_census_db toneMint
class node_visitor,node_osm toneIndigo
```

## Components

### Map Interface

- [Map page](https://github.com/queakie24/monastir-mapping-project/blob/main/index.html): `index.html`
- [City and year controls](https://github.com/queakie24/monastir-mapping-project/blob/main/index.html): `index.html`
- [Clustered markers](https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js): `src/main.js`
- [Family details panel](https://github.com/queakie24/monastir-mapping-project/blob/main/index.html): `index.html`
- **Leaflet map**

### Census Browsing

- [Map runtime](https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js): `src/main.js`
- [City and year configuration](https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js): `src/main.js`
- [Address marker query](https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js): `src/main.js`
- [Address family details](https://github.com/queakie24/monastir-mapping-project/blob/main/src/main.js): `src/main.js`

### Data Runtime

- [SQL.js initialization](https://github.com/queakie24/monastir-mapping-project/blob/main/lib/sql-wasm.js): `lib/sql-wasm.js`
- [SQLite WebAssembly](https://github.com/queakie24/monastir-mapping-project/blob/main/lib/sql-wasm.wasm): `lib/sql-wasm.wasm`
- [Census database](https://github.com/queakie24/monastir-mapping-project/blob/main/database/testdb.sqlite): `database/testdb.sqlite`

### Other components

- **Map visitor**
- **OpenStreetMap tiles**

## Connections

- Map visitor → Map page: opens
- Map page → Map runtime: starts
- Map visitor → City and year controls: selects
- City and year controls → Map runtime: dispatches changes
- Map runtime → City and year configuration: reads settings
- Map runtime → SQL.js initialization: initializes SQL
- SQL.js initialization → SQLite WebAssembly: loads runtime
- Map runtime → Census database: fetches database
- Map runtime → Address marker query: loads markers
- Address marker query → Census database: queries addresses
- Address marker query → Clustered markers: adds markers
- Map runtime → Leaflet map: creates map
- Map runtime → OpenStreetMap tiles: requests tiles
- Clustered markers → Leaflet map: displays markers
- Map visitor → Clustered markers: selects address
- Clustered markers → Address family details: dispatches click
- Address family details → Census database: queries family records
- Address family details → Family details panel: renders details