Merge af2853d698 into 0feca43b14

2026-02-04 17:41:23 +01:00 · 2026-01-05 13:14:57 +01:00 · 2026-01-05 13:14:57 +01:00 · d1925fb2ce
commit d1925fb2ce
parent 0feca43b14 af2853d698
43 changed files with 7773 additions and 8108 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,4 @@
 /node_modules
 /dist
 /coverage
+CONTRIBUTING-UPSTREAM.md
--- a/GRID-NUMBERING-README.md
+++ b/GRID-NUMBERING-README.md
@ -0,0 +1,250 @@
+# Grid Auto-Numbering Feature for Azgaar Fantasy Map Generator
+
+## Overview
+
+Added sequential auto-numbering to the grid overlay system, allowing users to reference specific grid cells (e.g., "POI located in grid 0247"). Numbers are displayed centered within each grid cell with customizable size and color.
+
+## Features Added
+
+- ✅ Sequential numbering starting from top-left (0001, 0002, 0003...)
+- ✅ Works with: **Pointy Hex**, **Square**, and **Truncated Square** grids
+- ✅ Customizable font size (1-50px)
+- ✅ Customizable color
+- ✅ Toggle on/off via checkbox
+- ✅ Proper centering in grid cells
+- ✅ Full map coverage
+
+## Known Limitations
+
+**Grid Types Not Yet Supported**:
+The following grid types require additional positioning calculations and are not currently supported:
+- ❌ Hex grid (flat)
+- ❌ Square 45 degrees grid
+- ❌ Tetrakis square grid
+- ❌ Triangle grid (horizontal)
+- ❌ Triangle grid (vertical)
+- ❌ Trihexagonal grid
+- ❌ Rhombille grid
+
+The numbering feature will display on these grid types but numbers will not align correctly with cell centers. Each grid type has unique geometry that requires specific positioning logic in the `getGridCellCenter()` function.
+
+## Files Modified
+
+### 1. `index.html`
+**Location**: Lines 889-910 (in `<tbody id="styleGrid">` section)
+
+**Changes**: Added UI controls for grid numbering in the Style panel:
+```html
+<tr data-tip="Enable sequential numbering for grid cells (0001, 0002, etc.)">
+  <td colspan="2">
+    <input id="styleGridShowNumbers" class="checkbox" type="checkbox" />
+    <label for="styleGridShowNumbers" class="checkbox-label">Show grid numbers</label>
+  </td>
+</tr>
+
+<tr data-tip="Set grid number font size">
+  <td>Number size</td>
+  <td>
+    <input id="styleGridNumberSize" type="number" min="1" max="50" step="0.5" value="8" />
+  </td>
+</tr>
+
+<tr data-tip="Set grid number color">
+  <td>Number color</td>
+  <td>
+    <input id="styleGridNumberColor" type="color" value="#808080" />
+    <output id="styleGridNumberColorOutput">#808080</output>
+  </td>
+</tr>
+```
+
+### 2. `modules/ui/layers.js`
+**Location**: Lines 657-661, 664-754
+
+**Changes**:
+1. Modified `drawGrid()` function to call `drawGridNumbers()` when enabled
+2. Added three new functions:
+   - `drawGridNumbers()` - Main rendering logic
+   - `getGridCellDimensions()` - Returns cell dimensions for each grid type
+   - `getGridCellCenter()` - Calculates center position for each cell
+
+**Key Implementation Details**:
+
+```javascript
+// In drawGrid() - Line 657-661
+const showNumbers = gridOverlay.attr("data-show-numbers") === "1";
+if (showNumbers) {
+  drawGridNumbers(maxWidth, maxHeight, scale, dx, dy);
+}
+```
+
+### 3. `modules/ui/style.js`
+**Location**: Lines 212-215 (initialization), 520-525 (declarations), 543-557 (event handlers)
+
+**Changes**:
+1. Added variable declarations for UI elements
+2. Added initialization code to read grid numbering attributes
+3. Added event handlers for checkbox, size input, and color picker
+
+```javascript
+// Variable declarations (after styleGridType handler)
+const styleGridShowNumbers = byId("styleGridShowNumbers");
+const styleGridNumberSize = byId("styleGridNumberSize");
+const styleGridNumberColor = byId("styleGridNumberColor");
+const styleGridNumberColorOutput = byId("styleGridNumberColorOutput");
+
+// Initialization in selectStyleElement() 
+styleGridShowNumbers.checked = el.attr("data-show-numbers") === "1";
+styleGridNumberSize.value = el.attr("data-number-size") || 8;
+styleGridNumberColor.value = styleGridNumberColorOutput.value = 
+  el.attr("data-number-color") || "#808080";
+
+// Event handlers
+styleGridShowNumbers.on("change", function () {
+  getEl().attr("data-show-numbers", this.checked ? "1" : "0");
+  if (layerIsOn("toggleGrid")) drawGrid();
+});
+
+styleGridNumberSize.on("input", function () {
+  getEl().attr("data-number-size", this.value);
+  if (layerIsOn("toggleGrid")) drawGrid();
+});
+
+styleGridNumberColor.on("input", function () {
+  styleGridNumberColorOutput.value = this.value;
+  getEl().attr("data-number-color", this.value);
+  if (layerIsOn("toggleGrid")) drawGrid();
+});
+```
+
+## Position Calculation Math
+
+### Pointy Hex Grid Positioning
+
+After extensive testing and calibration, the following values provide perfect alignment:
+
+**Row Spacing**: `cellHeight * 0.5`
+- This is different from the geometric ideal of 0.75
+- Empirically determined through visual alignment with hex centers
+
+**Y-Offset (Vertical Center)**: `cellHeight * 0.35`
+- Positions numbers vertically within hex
+- Accounts for hex shape geometry
+
+**X-Offset (Horizontal Center)**: `cellWidth / 2`
+- Standard horizontal centering
+
+**Row Offset Pattern**: Even rows (0, 2, 4...) are shifted right by `cellWidth / 2`
+- This creates the interlocking hex pattern
+
+### Grid Cell Dimensions (Base Size)
+
+From SVG pattern definitions:
+- Pointy Hex: width=25, height=43.4
+- Flat Hex: width=43.4, height=25
+- Square: width=25, height=25
+- (Other grid types defined in `getGridCellDimensions()`)
+
+### Row/Column Count Calculation
+
+```javascript
+const rowSpacing = cellHeight * 0.5;
+const cols = Math.ceil(maxWidth / cellWidth) + 2;
+const rows = Math.ceil(maxHeight / rowSpacing) + 2;
+```
+
+Note: Adding +2 ensures full map coverage including edges.
+
+## How to Use
+
+### For Users:
+
+1. Enable the **Grid** layer (press `G` or click Grid toggle)
+2. Open **Style** panel (right sidebar)
+3. Select **"Grid"** from the element dropdown
+4. Check **"Show grid numbers"** checkbox
+5. Adjust **Number size** and **Number color** as desired
+
+### For Developers:
+
+Grid numbering state is stored as attributes on the `gridOverlay` SVG element:
+- `data-show-numbers`: "1" or "0"
+- `data-number-size`: Number (default 8)
+- `data-number-color`: Hex color (default "#808080")
+
+These can be set programmatically:
+```javascript
+gridOverlay.attr("data-show-numbers", "1");
+gridOverlay.attr("data-number-size", "12");
+gridOverlay.attr("data-number-color", "#000000");
+drawGrid();
+```
+
+## Testing & Calibration Process
+
+The positioning values were determined through iterative testing:
+
+1. Started with theoretical hex geometry (0.75 row spacing)
+2. User placed visual markers at hex centers
+3. Adjusted row spacing and Y-offset incrementally
+4. Final values: rowSpacing=0.5, Y-offset=0.35
+
+This empirical approach accounts for any rendering quirks or pattern definition nuances.
+
+## Performance Considerations
+
+- Numbers are rendered as SVG text elements
+- Typical full map: ~3000 grid cells
+- Negligible performance impact on modern browsers
+- Numbers are part of the gridOverlay group and clear when grid is toggled off
+
+## Future Enhancement Ideas
+
+- Save grid numbering preference to localStorage
+- Export numbered grid with map export
+- Click-to-copy grid number functionality
+- Custom numbering patterns (A1, A2... or hex coordinates)
+- Grid number search/highlight feature
+
+## Technical Notes
+
+### Why Not Pure Geometric Spacing?
+
+The theoretical vertical spacing for pointy hex grids is `1.5 × sideLength = 0.75 × height`. However, we use `0.5 × height` because:
+
+1. SVG pattern rendering may introduce sub-pixel differences
+2. The pattern definition includes the full hex perimeter path
+3. Visual alignment matters more than mathematical purity
+4. The 0.5 value was empirically validated against user-placed markers
+
+### Edge Case Handling
+
+- Numbers extend slightly beyond visible map area (+2 buffer)
+- Partial hex cells at edges still receive numbers
+- Zoom level doesn't affect numbering (numbers don't scale)
+
+## Implementation Summary
+
+**Total Lines of Code Added**: ~150
+**Files Modified**: 3
+**New Functions Added**: 3
+**UI Controls Added**: 3
+
+This implementation integrates cleanly with Azgaar's existing grid system without modifying core rendering logic. All grid numbering code is isolated and can be easily maintained or removed.
+
+## Credits
+
+Implementation developed through collaborative debugging session, December 2024.
+Tested on Azgaar Fantasy Map Generator (latest version as of Dec 2024).
+
+## Contact & Contribution
+
+If integrating this into the official Azgaar repository, consider:
+- Adding grid numbering to the style presets
+- Including in map export metadata
+- Adding to the wiki documentation
+- Internationalizing the UI labels
+
+---
+
+**License**: Same as Azgaar Fantasy Map Generator (MIT)
--- a/README.md
+++ b/README.md
@ -1,3 +1,79 @@
+# Azgaar Fantasy Map Generator - Enhanced Fork
+
+This is a personal fork of [Azgaar's Fantasy Map Generator](https://github.com/Azgaar/Fantasy-Map-Generator) with custom enhancements for D&D campaign management.
+
+## Original Project
+
+**Original Repository**: [Azgaar/Fantasy-Map-Generator](https://github.com/Azgaar/Fantasy-Map-Generator)  
+**Original Author**: Max Haniyeu (Azgaar)  
+**License**: MIT License
+
+Full credit to Azgaar for creating this incredible fantasy map generation tool. Please visit and star the original repository!
+
+---
+
+## Custom Enhancements in This Fork
+
+### ✨ Grid Auto-Numbering Feature
+
+Added sequential numbering to grid cells for easy location referencing in D&D campaigns.
+
+**Features:**
+- Sequential numbering (0001, 0002, 0003...) starting from top-left
+- Customizable font size and color
+- Toggle on/off in Style panel
+- Perfect alignment for pointy hex, square, and truncated square grids
+
+**Usage:**
+1. Enable Grid layer (press `G`)
+2. Open Style panel → Select "Grid"
+3. Check "Show grid numbers"
+4. Adjust size and color as desired
+
+**Documentation:** See [`GRID-NUMBERING-README.md`](./GRID-NUMBERING-README.md) for full implementation details.
+
+---
+
+## Running Locally
+
+```bash
+# Clone this fork
+git clone [your-fork-url]
+cd Fantasy-Map-Generator
+
+# Open in browser
+# Just open index.html in your web browser
+```
+
+---
+
+## Contributing Back to Original Project
+
+If you're interested in the grid numbering feature, please check out the [original Azgaar repository](https://github.com/Azgaar/Fantasy-Map-Generator) and consider starring it! The feature could potentially be contributed upstream if there's interest.
+
+---
+
+## License
+
+This fork maintains the original MIT License. See [LICENSE](./LICENSE) for full details.
+
+**Copyright 2017-2024 Max Haniyeu (Azgaar)**  
+Grid numbering enhancements © 2024
+
+---
+
+## Acknowledgments
+
+- **Azgaar** - For creating and maintaining this fantastic map generator
+- **Original Contributors** - Everyone who has contributed to the main project
+- **D&D Community** - For inspiration and use cases
+
+---
+
+**Original README follows below:**
+
+---
+
 # Fantasy Map Generator

 Azgaar's _Fantasy Map Generator_ is a free web application that helps fantasy writers, game masters, and cartographers create and edit fantasy maps.
--- a/images/fantasy-icons/battlefield.svg
+++ b/images/fantasy-icons/battlefield.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/bridge.svg
+++ b/images/fantasy-icons/bridge.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/brigand.svg
+++ b/images/fantasy-icons/brigand.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/burial.svg
+++ b/images/fantasy-icons/burial.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/canoe.svg
+++ b/images/fantasy-icons/canoe.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/cave.svg
+++ b/images/fantasy-icons/cave.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/circus.svg
+++ b/images/fantasy-icons/circus.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/dance.svg
+++ b/images/fantasy-icons/dance.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/dungeon.svg
+++ b/images/fantasy-icons/dungeon.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/encounter.svg
+++ b/images/fantasy-icons/encounter.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/fair.svg
+++ b/images/fantasy-icons/fair.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/forest.svg
+++ b/images/fantasy-icons/forest.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/hot-spring.svg
+++ b/images/fantasy-icons/hot-spring.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/inn.svg
+++ b/images/fantasy-icons/inn.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/joust.svg
+++ b/images/fantasy-icons/joust.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/library.svg
+++ b/images/fantasy-icons/library.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/lighthouse.svg
+++ b/images/fantasy-icons/lighthouse.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/migration.svg
+++ b/images/fantasy-icons/migration.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/mine.svg
+++ b/images/fantasy-icons/mine.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/mirage.svg
+++ b/images/fantasy-icons/mirage.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/monster.svg
+++ b/images/fantasy-icons/monster.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/necropolis.svg
+++ b/images/fantasy-icons/necropolis.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/pirate.svg
+++ b/images/fantasy-icons/pirate.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/placeholder.svg
+++ b/images/fantasy-icons/placeholder.svg
@ -0,0 +1,15 @@
+<!-- Placeholder fantasy icon - replace with detailed artwork -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#8B4513;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#4A2511;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <!-- Skull shape -->
+  <ellipse cx="16" cy="14" rx="10" ry="12" fill="#D3D3D3" stroke="#666" stroke-width="0.5"/>
+  <circle cx="12" cy="12" r="2" fill="#000"/>
+  <circle cx="20" cy="12" r="2" fill="#000"/>
+  <path d="M 13 18 L 15 20 L 17 20 L 19 18" stroke="#000" stroke-width="1" fill="none"/>
+  <text x="16" y="28" font-size="8" fill="#8B4513" text-anchor="middle" font-family="serif">⚔</text>
+</svg>
--- a/images/fantasy-icons/portal.svg
+++ b/images/fantasy-icons/portal.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/rift.svg
+++ b/images/fantasy-icons/rift.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/ruins.svg
+++ b/images/fantasy-icons/ruins.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/sacred-mountain.svg
+++ b/images/fantasy-icons/sacred-mountain.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/sea-monster.svg
+++ b/images/fantasy-icons/sea-monster.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/statue.svg
+++ b/images/fantasy-icons/statue.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/volcano.svg
+++ b/images/fantasy-icons/volcano.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/water-source.svg
+++ b/images/fantasy-icons/water-source.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/images/fantasy-icons/waterfall.svg
+++ b/images/fantasy-icons/waterfall.svg
@ -0,0 +1 @@
+placeholder.svg
--- a/index.css
+++ b/index.css
@ -2421,3 +2421,4 @@ svg.button {
    background: #25252a;
  }
 }
+.grid-label { font-size: 10px; font-family: sans-serif; pointer-events: none; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff; }
--- a/index.html
+++ b/index.html
--- a/maps/latest.json
+++ b/maps/latest.json
--- a/modules/markers-generator.js
+++ b/modules/markers-generator.js
@ -11,7 +11,7 @@ window.Markers = (function () {
    /*
      Default markers config:
      type - short description (snake-case)
-      icon - unicode character or url to image
+      icon - unicode character or url to image (using local fantasy icons)
      dx: icon offset in x direction, in pixels
      dy: icon offset in y direction, in pixels
      min: minimum number of candidates to add at least 1 marker
@ -22,41 +22,41 @@ window.Markers = (function () {
    */
    // prettier-ignore
    return [
-      {type: "volcanoes", icon: "🌋", dx: 52, px: 13, min: 10, each: 500, multiplier: 1, list: listVolcanoes, add: addVolcano},
-      {type: "hot-springs", icon: "♨️", dy: 52, min: 30, each: 1200, multiplier: 1, list: listHotSprings, add: addHotSpring},
-      {type: "water-sources", icon: "💧", min: 1, each: 1000, multiplier: 1, list: listWaterSources, add: addWaterSource},
-      {type: "mines", icon: "⛏️", dx: 48, px: 13, min: 1, each: 15, multiplier: 1, list: listMines, add: addMine},
-      {type: "bridges", icon: "🌉", px: 14, min: 1, each: 5, multiplier: 1, list: listBridges, add: addBridge},
-      {type: "inns", icon: "🍻", px: 14, min: 1, each: 10, multiplier: 1, list: listInns, add: addInn},
-      {type: "lighthouses", icon: "🚨", px: 14, min: 1, each: 2, multiplier: 1, list: listLighthouses, add: addLighthouse},
-      {type: "waterfalls", icon: "⟱", dy: 54, px: 16, min: 1, each: 5, multiplier: 1, list: listWaterfalls, add: addWaterfall},
-      {type: "battlefields", icon: "⚔️", dy: 52, min: 50, each: 700, multiplier: 1, list: listBattlefields, add: addBattlefield},
-      {type: "dungeons", icon: "🗝️", dy: 51, px: 13, min: 30, each: 200, multiplier: 1, list: listDungeons, add: addDungeon},
-      {type: "lake-monsters", icon: "🐉", dy: 48, min: 2, each: 10, multiplier: 1, list: listLakeMonsters, add: addLakeMonster},
-      {type: "sea-monsters", icon: "🦑", min: 50, each: 700, multiplier: 1, list: listSeaMonsters, add: addSeaMonster},
-      {type: "hill-monsters", icon: "👹", dy: 54, px: 13, min: 30, each: 600, multiplier: 1, list: listHillMonsters, add: addHillMonster},
-      {type: "sacred-mountains", icon: "🗻", dy: 48, min: 1, each: 5, multiplier: 1, list: listSacredMountains, add: addSacredMountain},
-      {type: "sacred-forests", icon: "🌳", min: 30, each: 1000, multiplier: 1, list: listSacredForests, add: addSacredForest},
-      {type: "sacred-pineries", icon: "🌲", px: 13, min: 30, each: 800, multiplier: 1, list: listSacredPineries, add: addSacredPinery},
-      {type: "sacred-palm-groves", icon: "🌴", px: 13, min: 1, each: 100, multiplier: 1, list: listSacredPalmGroves, add: addSacredPalmGrove},
-      {type: "brigands", icon: "💰", px: 13, min: 50, each: 100, multiplier: 1, list: listBrigands, add: addBrigands},
-      {type: "pirates", icon: "🏴‍☠️", dx: 51, min: 40, each: 300, multiplier: 1, list: listPirates, add: addPirates},
-      {type: "statues", icon: "🗿", min: 80, each: 1200, multiplier: 1, list: listStatues, add: addStatue},
-      {type: "ruins", icon: "🏺", min: 80, each: 1200, multiplier: 1, list: listRuins, add: addRuins},
-      {type: "libraries", icon: "📚", min: 10, each: 1200, multiplier: 1, list: listLibraries, add: addLibrary},
-      {type: "circuses", icon: "🎪", min: 80, each: 1000, multiplier: 1, list: listCircuses, add: addCircuse},
-      {type: "jousts", icon: "🤺", dx: 48, min: 5, each: 500, multiplier: 1, list: listJousts, add: addJoust},
-      {type: "fairs", icon: "🎠", min: 50, each: 1000, multiplier: 1, list: listFairs, add: addFair},
-      {type: "canoes", icon: "🛶", min: 500, each: 2000, multiplier: 1, list: listCanoes, add: addCanoe},
-      {type: "migration", icon: "🐗", min: 20, each: 1000, multiplier: 1, list: listMigrations, add: addMigration},
-      {type: "dances", icon: "💃🏽", min: 50, each: 1000, multiplier: 1, list: listDances, add: addDances},
-      {type: "mirage", icon: "💦", min: 10, each: 400, multiplier: 1, list: listMirage, add: addMirage},
-      {type: "caves", icon:"🦇", min: 60, each: 1000, multiplier: 1, list: listCaves, add: addCave},
-      {type: "portals", icon: "🌀", px: 14, min: 16, each: 8, multiplier: +isFantasy, list: listPortals, add: addPortal},
-      {type: "rifts", icon: "🎆", min: 5, each: 3000, multiplier: +isFantasy, list: listRifts, add: addRift},
-      {type: "disturbed-burials", icon: "💀", min: 20, each: 3000, multiplier: +isFantasy, list: listDisturbedBurial, add: addDisturbedBurial},
-      {type: "necropolises", icon: "🪦", min: 20, each: 1000, multiplier: 1, list: listNecropolis, add: addNecropolis},
-      {type: "encounters", icon: "🧙", min: 10, each: 600, multiplier: 1, list: listEncounters, add: addEncounter},
+      { type: "volcanoes", icon: "./images/fantasy-icons/volcano.svg", dx: 50, dy: 50, px: 16, min: 10, each: 500, multiplier: 1, list: listVolcanoes, add: addVolcano },
+      { type: "hot-springs", icon: "./images/fantasy-icons/hot-spring.svg", dx: 50, dy: 50, px: 16, min: 30, each: 1200, multiplier: 1, list: listHotSprings, add: addHotSpring },
+      { type: "water-sources", icon: "./images/fantasy-icons/water-source.svg", dx: 50, dy: 50, px: 16, min: 1, each: 1000, multiplier: 1, list: listWaterSources, add: addWaterSource },
+      { type: "mines", icon: "./images/fantasy-icons/mine.svg", dx: 50, dy: 50, px: 16, min: 1, each: 15, multiplier: 1, list: listMines, add: addMine },
+      { type: "bridges", icon: "./images/fantasy-icons/bridge.svg", dx: 50, dy: 50, px: 16, min: 1, each: 5, multiplier: 1, list: listBridges, add: addBridge },
+      { type: "inns", icon: "./images/fantasy-icons/inn.svg", dx: 50, dy: 50, px: 16, min: 1, each: 10, multiplier: 1, list: listInns, add: addInn },
+      { type: "lighthouses", icon: "./images/fantasy-icons/lighthouse.svg", dx: 50, dy: 50, px: 16, min: 1, each: 2, multiplier: 1, list: listLighthouses, add: addLighthouse },
+      { type: "waterfalls", icon: "./images/fantasy-icons/waterfall.svg", dx: 50, dy: 50, px: 16, min: 1, each: 5, multiplier: 1, list: listWaterfalls, add: addWaterfall },
+      { type: "battlefields", icon: "./images/fantasy-icons/battlefield.svg", dx: 50, dy: 50, px: 16, min: 50, each: 700, multiplier: 1, list: listBattlefields, add: addBattlefield },
+      { type: "dungeons", icon: "./images/fantasy-icons/dungeon.svg", dx: 50, dy: 50, px: 16, min: 30, each: 200, multiplier: 1, list: listDungeons, add: addDungeon },
+      { type: "lake-monsters", icon: "./images/fantasy-icons/monster.svg", dx: 50, dy: 50, px: 16, min: 2, each: 10, multiplier: 1, list: listLakeMonsters, add: addLakeMonster },
+      { type: "sea-monsters", icon: "./images/fantasy-icons/sea-monster.svg", dx: 50, dy: 50, px: 16, min: 50, each: 700, multiplier: 1, list: listSeaMonsters, add: addSeaMonster },
+      { type: "hill-monsters", icon: "./images/fantasy-icons/monster.svg", dx: 50, dy: 50, px: 16, min: 30, each: 600, multiplier: 1, list: listHillMonsters, add: addHillMonster },
+      { type: "sacred-mountains", icon: "./images/fantasy-icons/sacred-mountain.svg", dx: 50, dy: 50, px: 16, min: 1, each: 5, multiplier: 1, list: listSacredMountains, add: addSacredMountain },
+      { type: "sacred-forests", icon: "./images/fantasy-icons/forest.svg", dx: 50, dy: 50, px: 16, min: 30, each: 1000, multiplier: 1, list: listSacredForests, add: addSacredForest },
+      { type: "sacred-pineries", icon: "./images/fantasy-icons/forest.svg", dx: 50, dy: 50, px: 16, min: 30, each: 800, multiplier: 1, list: listSacredPineries, add: addSacredPinery },
+      { type: "sacred-palm-groves", icon: "./images/fantasy-icons/forest.svg", dx: 50, dy: 50, px: 16, min: 1, each: 100, multiplier: 1, list: listSacredPalmGroves, add: addSacredPalmGrove },
+      { type: "brigands", icon: "./images/fantasy-icons/brigand.svg", dx: 50, dy: 50, px: 16, min: 50, each: 100, multiplier: 1, list: listBrigands, add: addBrigands },
+      { type: "pirates", icon: "./images/fantasy-icons/pirate.svg", dx: 50, dy: 50, px: 16, min: 40, each: 300, multiplier: 1, list: listPirates, add: addPirates },
+      { type: "statues", icon: "./images/fantasy-icons/statue.svg", dx: 50, dy: 50, px: 16, min: 80, each: 1200, multiplier: 1, list: listStatues, add: addStatue },
+      { type: "ruins", icon: "./images/fantasy-icons/ruins.svg", dx: 50, dy: 50, px: 16, min: 80, each: 1200, multiplier: 1, list: listRuins, add: addRuins },
+      { type: "libraries", icon: "./images/fantasy-icons/library.svg", dx: 50, dy: 50, px: 16, min: 10, each: 1200, multiplier: 1, list: listLibraries, add: addLibrary },
+      { type: "circuses", icon: "./images/fantasy-icons/circus.svg", dx: 50, dy: 50, px: 16, min: 80, each: 1000, multiplier: 1, list: listCircuses, add: addCircuse },
+      { type: "jousts", icon: "./images/fantasy-icons/joust.svg", dx: 50, dy: 50, px: 16, min: 5, each: 500, multiplier: 1, list: listJousts, add: addJoust },
+      { type: "fairs", icon: "./images/fantasy-icons/fair.svg", dx: 50, dy: 50, px: 16, min: 50, each: 1000, multiplier: 1, list: listFairs, add: addFair },
+      { type: "canoes", icon: "./images/fantasy-icons/canoe.svg", dx: 50, dy: 50, px: 16, min: 500, each: 2000, multiplier: 1, list: listCanoes, add: addCanoe },
+      { type: "migration", icon: "./images/fantasy-icons/migration.svg", dx: 50, dy: 50, px: 16, min: 20, each: 1000, multiplier: 1, list: listMigrations, add: addMigration },
+      { type: "dances", icon: "./images/fantasy-icons/dance.svg", dx: 50, dy: 50, px: 16, min: 50, each: 1000, multiplier: 1, list: listDances, add: addDances },
+      { type: "mirage", icon: "./images/fantasy-icons/mirage.svg", dx: 50, dy: 50, px: 16, min: 10, each: 400, multiplier: 1, list: listMirage, add: addMirage },
+      { type: "caves", icon: "./images/fantasy-icons/cave.svg", dx: 50, dy: 50, px: 16, min: 60, each: 1000, multiplier: 1, list: listCaves, add: addCave },
+      { type: "portals", icon: "./images/fantasy-icons/portal.svg", dx: 50, dy: 50, px: 16, min: 16, each: 8, multiplier: +isFantasy, list: listPortals, add: addPortal },
+      { type: "rifts", icon: "./images/fantasy-icons/rift.svg", dx: 50, dy: 50, px: 16, min: 5, each: 3000, multiplier: +isFantasy, list: listRifts, add: addRift },
+      { type: "disturbed-burials", icon: "./images/fantasy-icons/burial.svg", dx: 50, dy: 50, px: 16, min: 20, each: 3000, multiplier: +isFantasy, list: listDisturbedBurial, add: addDisturbedBurial },
+      { type: "necropolises", icon: "./images/fantasy-icons/necropolis.svg", dx: 50, dy: 50, px: 16, min: 20, each: 1000, multiplier: 1, list: listNecropolis, add: addNecropolis },
+      { type: "encounters", icon: "./images/fantasy-icons/encounter.svg", dx: 50, dy: 50, px: 16, min: 10, each: 600, multiplier: 1, list: listEncounters, add: addEncounter },
    ];
  }

@ -637,8 +637,7 @@ window.Markers = (function () {
      "Journeying folk",
      "Tales"
    ];
-    const legend = `${ra(subjects)} say a relic monster of ${length} ${heightUnit.value} long inhabits ${
-      lake.name
+    const legend = `${ra(subjects)} say a relic monster of ${length} ${heightUnit.value} long inhabits ${lake.name
      } Lake. Truth or lie, folks are afraid to fish in the lake.`;
    notes.push({ id, name, legend });
  }
--- a/modules/ui/layers.js
+++ b/modules/ui/layers.js
@ -653,7 +653,133 @@ function drawGrid() {
    .attr("height", maxHeight)
    .attr("fill", "url(" + pattern + ")")
    .attr("stroke", "none");
+
+  // Add grid numbering if enabled
+  const showNumbers = gridOverlay.attr("data-show-numbers") === "1";
+  if (showNumbers) {
+    drawGridNumbers(maxWidth, maxHeight, scale, dx, dy);
  }
+}
+
+function drawGridNumbers(maxWidth, maxHeight, scale, dx, dy) {
+  const gridType = gridOverlay.attr("type") || "pointyHex";
+  const fontSize = gridOverlay.attr("data-number-size") || 8;
+  const numberColor = gridOverlay.attr("data-number-color") || "#808080";
+
+  // Get cell dimensions based on grid type
+  const cellDimensions = getGridCellDimensions(gridType);
+  const cellWidth = cellDimensions.width * scale;
+  const cellHeight = cellDimensions.height * scale;
+
+  // Calculate grid dimensions based on ACTUAL spacing used
+  const rowSpacing = cellHeight * 0.5; // Same as used in getGridCellCenter
+  const cols = Math.ceil(maxWidth / cellWidth) + 2; // Add extra to cover edges
+  const rows = Math.ceil(maxHeight / rowSpacing) + 2; // Use rowSpacing, not cellHeight
+
+  // Create numbers group
+  const numbersGroup = gridOverlay.append("g").attr("id", "gridNumbers");
+
+  let counter = 1;
+  // Generate grid numbers for ALL cells (positioning is now perfect)
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      const position = getGridCellCenter(gridType, col, row, cellWidth, cellHeight, dx, dy);
+
+      numbersGroup
+        .append("text")
+        .attr("x", position.x)
+        .attr("y", position.y)
+        .attr("text-anchor", "middle")
+        .attr("dominant-baseline", "middle")
+        .attr("font-size", fontSize)
+        .attr("fill", numberColor)
+        .attr("pointer-events", "none")
+        .text(String(counter).padStart(4, "0"));
+
+      counter++;
+    }
+  }
+}
+
+function getGridCellDimensions(gridType) {
+  // Base dimensions from pattern definitions
+  switch (gridType) {
+    case "square":
+      return { width: 25, height: 25 };
+    case "pointyHex":
+      return { width: 25, height: 43.4 };
+    case "flatHex":
+      return { width: 43.4, height: 25 };
+    case "square45deg":
+      return { width: 35.355, height: 35.355 };
+    case "squareTruncated":
+    case "squareTetrakis":
+      return { width: 25, height: 25 };
+    case "triangleHorizontal":
+      return { width: 41.76, height: 72.33 };
+    case "triangleVertical":
+      return { width: 72.33, height: 41.76 };
+    case "trihexagonal":
+      return { width: 25, height: 43.4 };
+    case "rhombille":
+      return { width: 82.5, height: 50 };
+    default:
+      return { width: 25, height: 43.4 };
+  }
+}
+
+function getGridCellCenter(gridType, col, row, cellWidth, cellHeight, dx, dy) {
+  let x, y;
+
+  if (gridType === "pointyHex") {
+    // Pointy hex pattern: width=25, height=43.4
+    // Hexagons interlock: each row is spaced at 3/4 height
+    // Based on user's marker placement, need to adjust Y-center
+
+    // Vertical spacing adjusting based on visual alignment (not pure geometry)
+    const rowSpacing = cellHeight * 0.5;
+
+    x = col * cellWidth;
+    y = row * rowSpacing;
+
+    // Every other row (EVEN rows: 0, 2, 4...) is offset horizontally
+    if (row % 2 === 0) {
+      x += cellWidth / 2;
+    }
+
+    // Center the number in the hexagon
+    x += cellWidth / 2;
+    // Top row is perfect at 0.35
+    y += cellHeight * 0.35;
+
+  } else if (gridType === "flatHex") {
+    // Flat hex grid: hexagons with flat sides up/down
+    // Columns are horizontally compressed (overlap by 25%)
+    x = col * (cellWidth * 0.75);
+    y = row * cellHeight;
+
+    // Every other column is offset vertically by half height
+    if (col % 2 === 1) {
+      y += cellHeight / 2;
+    }
+
+    // Center the number in the hexagon
+    x += cellWidth / 2;
+    y += cellHeight / 2;
+
+  } else {
+    // Square and other regular grids - simple grid
+    x = col * cellWidth + cellWidth / 2;
+    y = row * cellHeight + cellHeight / 2;
+  }
+
+  // Apply shift offsets
+  x += parseFloat(dx) || 0;
+  y += parseFloat(dy) || 0;
+
+  return { x: rn(x, 2), y: rn(y, 2) };
+}
+

 function toggleCoordinates(event) {
  if (!coordinates.selectAll("*").size()) {
--- a/modules/ui/layers.js.bak_sed
+++ b/modules/ui/layers.js.bak_sed
--- a/modules/ui/style.js
+++ b/modules/ui/style.js
@ -209,6 +209,9 @@ function selectStyleElement() {
    styleGridScale.value = el.attr("scale") || 1;
    styleGridShiftX.value = el.attr("dx") || 0;
    styleGridShiftY.value = el.attr("dy") || 0;
+    styleGridShowNumbers.checked = el.attr("data-show-numbers") === "1";
+    styleGridNumberSize.value = el.attr("data-number-size") || 8;
+    styleGridNumberColor.value = styleGridNumberColorOutput.value = el.attr("data-number-color") || "#808080";
    calculateFriendlyGridSize();
  }

@ -515,6 +518,12 @@ styleGridType.on("change", function () {
  calculateFriendlyGridSize();
 });

+// Grid numbering UI elements
+const styleGridShowNumbers = byId("styleGridShowNumbers");
+const styleGridNumberSize = byId("styleGridNumberSize");
+const styleGridNumberColor = byId("styleGridNumberColor");
+const styleGridNumberColorOutput = byId("styleGridNumberColorOutput");
+
 styleGridScale.on("input", function () {
  getEl().attr("scale", this.value);
  if (layerIsOn("toggleGrid")) drawGrid();
@ -537,6 +546,23 @@ styleGridShiftY.on("input", function () {
  if (layerIsOn("toggleGrid")) drawGrid();
 });

+styleGridShowNumbers.on("change", function () {
+  getEl().attr("data-show-numbers", this.checked ? "1" : "0");
+  if (layerIsOn("toggleGrid")) drawGrid();
+});
+
+styleGridNumberSize.on("input", function () {
+  getEl().attr("data-number-size", this.value);
+  if (layerIsOn("toggleGrid")) drawGrid();
+});
+
+styleGridNumberColor.on("input", function () {
+  styleGridNumberColorOutput.value = this.value;
+  getEl().attr("data-number-color", this.value);
+  if (layerIsOn("toggleGrid")) drawGrid();
+});
+
+
 styleRescaleMarkers.on("change", function () {
  markers.attr("rescale", +this.checked);
  invokeActiveZooming();