No description
- JavaScript 50.3%
- HTML 28.5%
- CSS 21.2%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
- Load Cinzel (headings: popup titles, worlds label) and Inter (body) from Google Fonts, exposed as --font-heading/--font-body - Grow pins from 18px to 28px (glyph 11px -> 17px), scale Leaflet iconSize/iconAnchor/popupAnchor accordingly - Center the pin glyph optically: translate(1.01px, -1.45px) before the counter-rotation, solved from pixel-measured screen-space offsets in headless Chrome (avg residual offset < 0.05px) |
||
| assets/maps | ||
| config | ||
| css | ||
| dev | ||
| docs | ||
| js | ||
| vendor/leaflet | ||
| .gitignore | ||
| index.html | ||
| README.md | ||
WoW Interactive Map
An interactive, static web map of World of Warcraft. Plain HTML/CSS/JS plus a vendored copy of Leaflet.
Quick start
The JSON configs are fetched at runtime, so the folder must be served over HTTP
(opening index.html via file:// won't work):
python3 -m http.server 8000 # or: npx serve .
Then open http://localhost:8000.
Deploy
Upload the folder except dev/ (local dev tools only) to any static hosting
service and it's live. Nothing else is required.
What's inside
- Worlds switcher — Azeroth and Outland.
- Zoom layers — zoom into a continent or island and its detailed map swaps in seamlessly (same position, same on-screen size).
- Markers — read from
config/markers.json; click a pin for its title and description. - Configurable UI — every string and theme color lives in
config/ui.json. Restyle the whole map by editing JSON.
Configuration & development
See docs/:
- docs/configuration.md — the three JSON config files
(
ui.json,worlds.json,markers.json) with full field references. - docs/development.md — project structure, how the
world/zone layer system works, tech notes, and the marker calibration tool
(
dev/calibrate.html).
Map art credit
All map images are by Joel Laqua (Sturmbart) — https://www.artstation.com/sturmbart. The images are the artist's copyrighted work and are included here for personal, non-commercial use. Keep the in-app footer credit intact if you deploy publicly, and check with the artist before any commercial use.