How jeremywhalen/greyhawkvectormap works
Greyhawk is a Vue application for exploring a richly illustrated map of the World of Greyhawk alongside a political and historical legend. The principal interaction is to choose a linked place in the legend and have the map focus on its corresponding feature. The tree also shows map grid and framing components, heraldry, and reactive search state. The README identifies the subject and map credits but documents few implementation details; several component connections below are therefore limited to the sampled view and app wiring.
Main entry points: MapGreyhawk.vue Greyhawk map · MapView.vue Map view · LegendGreyhawkPoliticalDivisions.vue Political divisions · MapGreyhawkImage.vue Map image
Components 23
Application flow
Map visualization
- Map frame
src/components/Map/Frame/MapFrame.vue - Greyhawk map
src/components/Map/Greyhawk/MapGreyhawk.vue - Map image
src/components/Map/Greyhawk/MapGreyhawkImage.vue - Map features
src/components/Map/Greyhawk/MapGreyhawkFeatures.vue - Kingdoms
src/components/Map/Greyhawk/MapGreyhawkKingdoms.vue - Rivers
src/components/Map/Greyhawk/MapGreyhawkRivers.vue - Settlements
src/components/Map/Greyhawk/MapGreyhawkSettlements.vue - Map grid
src/components/Map/Grid/MapGrid.vue - Grid canvas
src/components/Map/Grid/MapGridCanvas.vue - Grid path
src/components/Map/Grid/MapGridPath.vue
Legend and lore
- Greyhawk legend
src/components/Legend/Greyhawk/LegendGreyhawk.vue - Political divisions
src/components/Legend/Greyhawk/LegendGreyhawkPoliticalDivisions.vue - Legend header
src/components/Legend/Greyhawk/LegendGreyhawkHeader.vue - Legend section
src/components/Legend/Section/LegendSection.vue - Legend links
src/components/Legend/Link/LegendLink.vue - Heraldry icons
src/components/Heraldry/HeraldryIcon.vue
Search state
- Search state
src/store/search.ts - Search sanitizer
src/utils/sanitize.ts
Other components
- Map explorer
Connections 24
- Map explorer → Vue entry: opens app
- Vue entry → App shell: mounts
- Vue entry → Router: installs
- App shell → Router: renders route
- Router → Map view: routes to
- Map view → Map image: renders
- Map view → Greyhawk legend: renders
- Map view → Map image: focuses on linked place
- Map view → Greyhawk legend: handles link clicks
- Greyhawk legend → Political divisions: presents
- Greyhawk legend → Legend header: uses
- Political divisions → Legend section: uses
- Political divisions → Legend links: uses
- Political divisions → Heraldry icons: references
- Map image → Map frame: frames
- Map image → Greyhawk map: displays
- Greyhawk map → Map features: renders
- Greyhawk map → Kingdoms: renders
- Greyhawk map → Rivers: renders
- Greyhawk map → Settlements: renders
- Greyhawk map → Map grid: renders
- Map grid → Grid canvas: uses
- Map grid → Grid path: uses
- Search state → Search sanitizer: sanitizes input