How octapokta/ethnic-map-public works
Middle East Ethnic Map is a browser-based interactive demographic atlas. Users enter through the welcome screen, choose country layers or a cross-border ethnicity, and explore the rendered map with pan and zoom; selecting demographic or city details opens dossiers. The map, data, and DOM-building modules are evidenced in the sampled source. README-described routing, tutorial, and analytics are retained, but analytics wiring and several subsystem internals were not sampled, so uncertain links are omitted.
Main entry points: ui-builder.js DOM and layer builder · ui-events.js UI event handlers · ui-core.js UI state and routing · ui-panels.js Demographic dossiers
Components 17
Map experience
- Map physics and rendering
js/core/map.js - Demographic dossiers
js/ui/ui-panels.js
Map content
- DOM and layer builder
js/ui/ui-builder.js - App and image config
js/data/data-config.js - Country demographics
js/data/data-countries.js - City data
js/data/data-cities.js - Map image assets
images
Interface and navigation
- Application entry
index.html - Welcome and loading
js/ui/ui-welcome.js - UI state and routing
js/ui/ui-core.js - UI event handlers
js/ui/ui-events.js - UI utilities
js/ui/ui-utils.js - Sound effects
js/core/audio.js - Tutorial interface
js/ui/ui-core.js
External services
- Contact form service
- Google Analytics 4
Other components
- Visitor
Connections 19
- Visitor → Welcome and loading: opens
- Visitor → UI event handlers: selects and controls
- Application entry → Welcome and loading: sets up loading
- Application entry → UI state and routing: initializes UI
- Welcome and loading → Contact form service: submits form
- UI state and routing → DOM and layer builder: injects data
- App and image config → DOM and layer builder: provides config
- Country demographics → DOM and layer builder: provides country data
- City data → DOM and layer builder: provides city data
- Map image assets → DOM and layer builder: supplies map imagery
- UI event handlers → UI state and routing: updates layer state
- UI event handlers → Map physics and rendering: resets map view
- UI event handlers → Sound effects: plays sounds
- UI event handlers → Demographic dossiers: selects demographics
- DOM and layer builder → Demographic dossiers: opens regional dossier
- Demographic dossiers → UI utilities: drags and layers panels
- Map physics and rendering → UI state and routing: reads country views
- UI state and routing → Tutorial interface: routes tutorial state
- Visitor → Google Analytics 4: interaction tracking