# emersonbelito/marca_de_agua architecture

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

- Interactive diagram: https://gitdiagram.com/emersonbelito/marca_de_agua
- Repository: https://github.com/emersonbelito/marca_de_agua

## Overview

Marca de Agua GPS is a browser-based photo watermarking app with GPS/map context and image export. Its main workflow is selecting media, enriching location details, composing a watermark on canvas, then downloading or sharing the result. The sampled app.js excerpt also shows map selection, image filters, and keyword-image background removal. Source excerpts are partial and the README is empty, so some internal wiring and the exact scope of the documented Nominatim/Open-Elevation integrations are uncertain.

Main entry points: [`app.js`](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js) (App controller), [`index.html`](https://github.com/emersonbelito/marca_de_agua/blob/main/index.html) (App interface), [`sw.js`](https://github.com/emersonbelito/marca_de_agua/blob/main/sw.js) (Offline asset cache), [`manifest.json`](https://github.com/emersonbelito/marca_de_agua/blob/main/manifest.json) (PWA manifest)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_media["Media and composition"]
  node_app["App controller<br/>[app.js]"]
  node_media_input["Media input<br/>[app.js]"]
  node_image_edit["Image filters<br/>[app.js]"]
  node_keyword_image["Keyword image processing<br/>[app.js]"]
  node_watermark["Canvas watermark<br/>[app.js]"]
  node_drag["Overlay positioning<br/>[app.js]"]
end

subgraph group_location["Location and maps"]
  node_gps["GPS lookup<br/>[app.js]"]
  node_geolocation["Browser geolocation"]
  node_place_lookup["Place and elevation lookup<br/>[app.js]"]
  node_nominatim["Nominatim"]
  node_elevation["Open-Elevation"]
  node_map_ui["Interactive map<br/>[app.js]"]
  node_leaflet["Leaflet / OpenStreetMap"]
  node_tile_service["Map tile service"]
end

subgraph group_delivery["Export and offline"]
  node_export["Download and share<br/>[app.js]"]
  node_browser["Browser APIs"]
  node_service_worker["Offline asset cache<br/>[sw.js]"]
  node_asset_cache[("Cache storage")]
  node_manifest["PWA manifest<br/>[manifest.json]"]
end

node_user(("User"))
node_page["App interface<br/>[index.html]"]

node_user -->|"opens"| node_page
node_page -->|"hosts"| node_app
node_user -->|"selects media"| node_media_input
node_media_input -->|"updates state"| node_app
node_app -->|"starts lookup"| node_gps
node_gps -->|"requests position"| node_geolocation
node_gps -->|"resolves coordinates"| node_place_lookup
node_place_lookup -.->|"queries place"| node_nominatim
node_place_lookup -.->|"queries altitude"| node_elevation
node_user -->|"opens map"| node_map_ui
node_map_ui -->|"renders map"| node_leaflet
node_map_ui -->|"loads tiles"| node_tile_service
node_app -->|"applies filters"| node_image_edit
node_app -->|"processes overlay image"| node_keyword_image
node_app -->|"renders composition"| node_watermark
node_drag -->|"positions overlay"| node_watermark
node_user -->|"moves overlay"| node_drag
node_user -->|"requests output"| node_export
node_export -->|"uses rendered image"| node_watermark
node_export -->|"downloads or shares"| node_browser
node_service_worker -->|"reads and writes"| node_asset_cache
node_service_worker -->|"serves cached assets"| node_page
node_page -.->|"declares app metadata"| node_manifest

click node_page "https://github.com/emersonbelito/marca_de_agua/blob/main/index.html"
click node_app "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_media_input "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_image_edit "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_keyword_image "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_watermark "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_drag "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_gps "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_place_lookup "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_map_ui "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_export "https://github.com/emersonbelito/marca_de_agua/blob/main/app.js"
click node_service_worker "https://github.com/emersonbelito/marca_de_agua/blob/main/sw.js"
click node_manifest "https://github.com/emersonbelito/marca_de_agua/blob/main/manifest.json"

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_media_input,node_image_edit,node_keyword_image,node_watermark,node_drag,node_user toneBlue
class node_gps,node_geolocation,node_place_lookup,node_nominatim,node_elevation,node_map_ui,node_leaflet,node_tile_service toneAmber
class node_export,node_browser,node_service_worker,node_asset_cache,node_manifest toneMint
class node_page toneTeal
```

## Components

### Media and composition

- [App controller](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- [Media input](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- [Image filters](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- [Keyword image processing](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- [Canvas watermark](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- [Overlay positioning](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`

### Location and maps

- [GPS lookup](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- **Browser geolocation**
- [Place and elevation lookup](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- **Nominatim**
- **Open-Elevation**
- [Interactive map](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- **Leaflet / OpenStreetMap**
- **Map tile service**

### Export and offline

- [Download and share](https://github.com/emersonbelito/marca_de_agua/blob/main/app.js): `app.js`
- **Browser APIs**
- [Offline asset cache](https://github.com/emersonbelito/marca_de_agua/blob/main/sw.js): `sw.js`
- **Cache storage**
- [PWA manifest](https://github.com/emersonbelito/marca_de_agua/blob/main/manifest.json): `manifest.json`

### Other components

- **User**
- [App interface](https://github.com/emersonbelito/marca_de_agua/blob/main/index.html): `index.html`

## Connections

- User → App interface: opens
- App interface → App controller: hosts
- User → Media input: selects media
- Media input → App controller: updates state
- App controller → GPS lookup: starts lookup
- GPS lookup → Browser geolocation: requests position
- GPS lookup → Place and elevation lookup: resolves coordinates
- Place and elevation lookup → Nominatim: queries place
- Place and elevation lookup → Open-Elevation: queries altitude
- User → Interactive map: opens map
- Interactive map → Leaflet / OpenStreetMap: renders map
- Interactive map → Map tile service: loads tiles
- App controller → Image filters: applies filters
- App controller → Keyword image processing: processes overlay image
- App controller → Canvas watermark: renders composition
- Overlay positioning → Canvas watermark: positions overlay
- User → Overlay positioning: moves overlay
- User → Download and share: requests output
- Download and share → Canvas watermark: uses rendered image
- Download and share → Browser APIs: downloads or shares
- Offline asset cache → Cache storage: reads and writes
- Offline asset cache → App interface: serves cached assets
- App interface → PWA manifest: declares app metadata