{"id":"697aa519738837d493d59ff6","title":"2026 01 28","path":"how-to/committee/release-notes/2026-01-28","contentMarkdown":"# 28-Jan-2026 — enhanced area map with legend, shared districts, and neighbouring areas [ref: #129](https://github.com/nbarrett/ngx-ramblers/issues/129)\n\n## [build 440](https://github.com/nbarrett/ngx-ramblers/actions/runs/21460052817) — [commit e07fe70](https://github.com/nbarrett/ngx-ramblers/commit/e07fe7011b9cd7fa9e0e5765e7ff9d7e5eebed71)\n\n_____\n\n## User Guide\n### Using the Area Map\n**Interactive Legend**\n- Hover over any group name in the legend to highlight that group's area on the map\n- The highlighted area shows with full opacity and a thicker border for easy identification\n- **Extended hover** on a legend item shows the same popup as the map with links to group websites\n- Move your mouse away to restore the normal view\n**Group Information Popup**\nHover over any area on the map (or legend item) for a moment to see a popup with quick actions:\n- **Group Website**\n- Opens the group's own website (if they have one)\n- **Ramblers Page**\n- Opens the official Ramblers group page\n- **View Walks**\n- Shows walks from that group (for groups in your area)\n**Map Controls (Standalone View)**\n- Adjust opacity sliders to control how transparent the coloured areas appear\n- Use the hover opacity to control how visible areas become when you mouse over them\n- Filter which groups appear using the groups dropdown\n- Resize the map height by dragging the bottom edge\n---\n### Initial Setup (System Settings)\nThese settings are configured once in System Settings > Group Area Settings:\n**Neighboring Areas**\n- Select which neighbouring Ramblers areas to display alongside your area\n- Groups from neighbouring areas will be available on all area maps\n- Useful for members who walk with groups in adjacent areas\n**Shared District Display Style**\nChoose the default style for districts that belong to multiple groups:\n- **First Group**\n- Shows only the first group's colour (default, cleanest look)\n- **Stripes**\n- Diagonal stripes in each group's colour\n- **Gradient**\n- Smooth colour blend across all groups\n- **Dashed Border**\n- Dashed outline to indicate shared territory\n---\n### Creating Individual Maps (Site Editor)\nWhen adding an area map content row in the site editor, you can configure:\n**New Controls**\n- **Groups to Display**\n- Multi-select dropdown to filter which groups appear on this map\n- **Shared District Display Style**\n- Override the system default for this specific map\n- **Show Legend**\n- Checkbox to enable/disable the group legend\n- **Legend Position**\n- Dropdown to place the legend (top-left, top-right, bottom-left, bottom-right, or below map)\n**Map Display Controls**\n- **Map Provider**\n- Choose between OpenStreetMap or OS Maps\n- **OS Map Style**\n- When using OS Maps, select the style (Outdoor, Road, Light, Leisure)\n- **Zoom Level**\n- Slider to set initial zoom (0-18)\n- **Map Height**\n- Slider to set map height (300-900px)\n- **Vertical/Horizontal**\n- Sliders to position the map centre\n**Opacity Controls**\n- **Normal Opacity**\n- How transparent areas appear normally (0.1-1.0)\n- **Hover Opacity**\n- How visible areas become on hover (0.1-1.0)\n- **Text Opacity**\n- Visibility of group name labels (0.1-1.0)\n**Options**\n- **Show map options by default**\n- Whether controls are visible when page loads\n- **Allow visitors to toggle map options**\n- Whether users can show/hide controls\n- **Auto-fit map to routes**\n- Automatically zoom to fit all areas\n- **Reset to Defaults**\n- Button to restore all settings to defaults\n**Live Preview**\nThe editor shows a live preview that updates as you change settings.\n---\n## Technical Details\n### New Components\n- `LegendPositionSelector`\n- Dropdown for selecting legend placement\n- `SharedDistrictStyleSelector`\n- Dropdown for shared district visualisation mode\n### API Changes\n- `/api/geojson/areas/:region` now accepts `neighbouringAreaCodes` query parameter\n- Response includes `sharedDistricts`, `sharedDistrictStyle`, and `mainAreaGroupCodes`\n- Groups include `externalUrl` for non-Ramblers websites\n### Configuration Model Changes\n- `Organisation.neighbouringAreaCodes`\n- Array of area codes to include\n- `Organisation.exclusiveDistricts`\n- Whether to claim districts exclusively\n- `Organisation.sharedDistrictStyle`\n- Default style for shared districts\n- `AreaMapData.showLegend`\n- Toggle legend visibility\n- `AreaMapData.legendPosition`\n- Legend placement option\n- `AreaMapData.sharedDistrictStyle`\n- Per-map style override\n### New Enums\n- `LegendPosition`\n- TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, BELOW_MAP\n- `SharedDistrictStyle`\n- STRIPES, FIRST_GROUP, DASHED_BORDER, GRADIENT\n### SVG Pattern Generation\nShared districts using stripes or gradients create dynamic SVG patterns:\n- Patterns are generated at runtime and injected into the DOM\n- Unique pattern IDs prevent conflicts when multiple maps are present\n- Patterns are cleaned up when maps are rebuilt\n- Patterns are correctly reapplied after hover events\n### DRY Implementation\n- `showAreaPopup()` method reused by both map polygon hover and legend item hover\n- `areaDataMap` stores area configuration for access from both map and legend interactions\n- Separate timeout tracking for map hover (`hoverTimeout`) and legend hover (`legendHoverTimeout`)","contentHtml":"<h1>28-Jan-2026 — enhanced area map with legend, shared districts, and neighbouring areas <a href=\"https://github.com/nbarrett/ngx-ramblers/issues/129\">ref: #129</a></h1>\n<h2><a href=\"https://github.com/nbarrett/ngx-ramblers/actions/runs/21460052817\">build 440</a> — <a href=\"https://github.com/nbarrett/ngx-ramblers/commit/e07fe7011b9cd7fa9e0e5765e7ff9d7e5eebed71\">commit e07fe70</a></h2>\n<hr>\n<h2>User Guide</h2>\n<h3>Using the Area Map</h3>\n<p><strong>Interactive Legend</strong></p>\n<ul>\n<li>Hover over any group name in the legend to highlight that group&#39;s area on the map</li>\n<li>The highlighted area shows with full opacity and a thicker border for easy identification</li>\n<li><strong>Extended hover</strong> on a legend item shows the same popup as the map with links to group websites</li>\n<li>Move your mouse away to restore the normal view\n<strong>Group Information Popup</strong>\nHover over any area on the map (or legend item) for a moment to see a popup with quick actions:</li>\n<li><strong>Group Website</strong></li>\n<li>Opens the group&#39;s own website (if they have one)</li>\n<li><strong>Ramblers Page</strong></li>\n<li>Opens the official Ramblers group page</li>\n<li><strong>View Walks</strong></li>\n<li>Shows walks from that group (for groups in your area)\n<strong>Map Controls (Standalone View)</strong></li>\n<li>Adjust opacity sliders to control how transparent the coloured areas appear</li>\n<li>Use the hover opacity to control how visible areas become when you mouse over them</li>\n<li>Filter which groups appear using the groups dropdown</li>\n<li>Resize the map height by dragging the bottom edge</li>\n</ul>\n<hr>\n<h3>Initial Setup (System Settings)</h3>\n<p>These settings are configured once in System Settings &gt; Group Area Settings:\n<strong>Neighboring Areas</strong></p>\n<ul>\n<li>Select which neighbouring Ramblers areas to display alongside your area</li>\n<li>Groups from neighbouring areas will be available on all area maps</li>\n<li>Useful for members who walk with groups in adjacent areas\n<strong>Shared District Display Style</strong>\nChoose the default style for districts that belong to multiple groups:</li>\n<li><strong>First Group</strong></li>\n<li>Shows only the first group&#39;s colour (default, cleanest look)</li>\n<li><strong>Stripes</strong></li>\n<li>Diagonal stripes in each group&#39;s colour</li>\n<li><strong>Gradient</strong></li>\n<li>Smooth colour blend across all groups</li>\n<li><strong>Dashed Border</strong></li>\n<li>Dashed outline to indicate shared territory</li>\n</ul>\n<hr>\n<h3>Creating Individual Maps (Site Editor)</h3>\n<p>When adding an area map content row in the site editor, you can configure:\n<strong>New Controls</strong></p>\n<ul>\n<li><strong>Groups to Display</strong></li>\n<li>Multi-select dropdown to filter which groups appear on this map</li>\n<li><strong>Shared District Display Style</strong></li>\n<li>Override the system default for this specific map</li>\n<li><strong>Show Legend</strong></li>\n<li>Checkbox to enable/disable the group legend</li>\n<li><strong>Legend Position</strong></li>\n<li>Dropdown to place the legend (top-left, top-right, bottom-left, bottom-right, or below map)\n<strong>Map Display Controls</strong></li>\n<li><strong>Map Provider</strong></li>\n<li>Choose between OpenStreetMap or OS Maps</li>\n<li><strong>OS Map Style</strong></li>\n<li>When using OS Maps, select the style (Outdoor, Road, Light, Leisure)</li>\n<li><strong>Zoom Level</strong></li>\n<li>Slider to set initial zoom (0-18)</li>\n<li><strong>Map Height</strong></li>\n<li>Slider to set map height (300-900px)</li>\n<li><strong>Vertical/Horizontal</strong></li>\n<li>Sliders to position the map centre\n<strong>Opacity Controls</strong></li>\n<li><strong>Normal Opacity</strong></li>\n<li>How transparent areas appear normally (0.1-1.0)</li>\n<li><strong>Hover Opacity</strong></li>\n<li>How visible areas become on hover (0.1-1.0)</li>\n<li><strong>Text Opacity</strong></li>\n<li>Visibility of group name labels (0.1-1.0)\n<strong>Options</strong></li>\n<li><strong>Show map options by default</strong></li>\n<li>Whether controls are visible when page loads</li>\n<li><strong>Allow visitors to toggle map options</strong></li>\n<li>Whether users can show/hide controls</li>\n<li><strong>Auto-fit map to routes</strong></li>\n<li>Automatically zoom to fit all areas</li>\n<li><strong>Reset to Defaults</strong></li>\n<li>Button to restore all settings to defaults\n<strong>Live Preview</strong>\nThe editor shows a live preview that updates as you change settings.</li>\n</ul>\n<hr>\n<h2>Technical Details</h2>\n<h3>New Components</h3>\n<ul>\n<li><code>LegendPositionSelector</code></li>\n<li>Dropdown for selecting legend placement</li>\n<li><code>SharedDistrictStyleSelector</code></li>\n<li>Dropdown for shared district visualisation mode</li>\n</ul>\n<h3>API Changes</h3>\n<ul>\n<li><code>/api/geojson/areas/:region</code> now accepts <code>neighbouringAreaCodes</code> query parameter</li>\n<li>Response includes <code>sharedDistricts</code>, <code>sharedDistrictStyle</code>, and <code>mainAreaGroupCodes</code></li>\n<li>Groups include <code>externalUrl</code> for non-Ramblers websites</li>\n</ul>\n<h3>Configuration Model Changes</h3>\n<ul>\n<li><code>Organisation.neighbouringAreaCodes</code></li>\n<li>Array of area codes to include</li>\n<li><code>Organisation.exclusiveDistricts</code></li>\n<li>Whether to claim districts exclusively</li>\n<li><code>Organisation.sharedDistrictStyle</code></li>\n<li>Default style for shared districts</li>\n<li><code>AreaMapData.showLegend</code></li>\n<li>Toggle legend visibility</li>\n<li><code>AreaMapData.legendPosition</code></li>\n<li>Legend placement option</li>\n<li><code>AreaMapData.sharedDistrictStyle</code></li>\n<li>Per-map style override</li>\n</ul>\n<h3>New Enums</h3>\n<ul>\n<li><code>LegendPosition</code></li>\n<li>TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT, BELOW_MAP</li>\n<li><code>SharedDistrictStyle</code></li>\n<li>STRIPES, FIRST_GROUP, DASHED_BORDER, GRADIENT</li>\n</ul>\n<h3>SVG Pattern Generation</h3>\n<p>Shared districts using stripes or gradients create dynamic SVG patterns:</p>\n<ul>\n<li>Patterns are generated at runtime and injected into the DOM</li>\n<li>Unique pattern IDs prevent conflicts when multiple maps are present</li>\n<li>Patterns are cleaned up when maps are rebuilt</li>\n<li>Patterns are correctly reapplied after hover events</li>\n</ul>\n<h3>DRY Implementation</h3>\n<ul>\n<li><code>showAreaPopup()</code> method reused by both map polygon hover and legend item hover</li>\n<li><code>areaDataMap</code> stores area configuration for access from both map and legend interactions</li>\n<li>Separate timeout tracking for map hover (<code>hoverTimeout</code>) and legend hover (<code>legendHoverTimeout</code>)</li>\n</ul>\n"}