How emersonbelito/marca_de_agua works
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 App controller · index.html App interface · sw.js Offline asset cache · manifest.json PWA manifest
Components 21
Media and composition
- App controller
app.js - Media input
app.js - Image filters
app.js - Keyword image processing
app.js - Canvas watermark
app.js - Overlay positioning
app.js
Location and maps
- GPS lookup
app.js - Browser geolocation
- Place and elevation lookup
app.js - Nominatim
- Open-Elevation
- Interactive map
app.js - Leaflet / OpenStreetMap
- Map tile service
Export and offline
- Download and share
app.js - Browser APIs
- Offline asset cache
sw.js - Cache storage
- PWA manifest
manifest.json
Other components
- User
- App interface
index.html
Connections 23
- 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