# 31-Mar-2026 — System Settings Map tab improvements [#149](https://github.com/nbarrett/ngx-ramblers/issues/149)

## [build 571](https://github.com/nbarrett/ngx-ramblers/actions/runs/23824076494) — [commit 392d25a](https://github.com/nbarrett/ngx-ramblers/commit/392d25ae638c1c20236d2262df180a4cb99b796f)

_____
### Colour Palette Selector

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/3d046a05-d82c-4da7-b8a8-087828e409b7.jpeg)

- A new colour palette selector replaces the previous "Regenerate Colours" button. 
- Select from 19 curated palettes including Ramblers, Pastel, Ocean, Sunset, Forest, Vivid, Appealing, and more. 
- Each palette shows colour swatches in the dropdown for easy preview. Selecting a palette immediately applies those colours to all visible groups. 
- Click "Reapply" to shuffle the same palette for a different arrangement.
- The palette selector is available in both the **Groups** sub-tab and the **Map Preview** sub-tab. 
- Individual group colours can also be regenerated using the refresh button next to each colour picker — the new colour is drawn from the currently selected palette. 
- The last selected palette is remembered across sessions.

### Map Preview Enhancements
The **Map Preview** sub-tab now includes:
- **Group filter** with select all/none — choose which groups to display
on the preview map
- **Named presets** — save a group selection and palette as a named
preset for quick recall. Presets are stored in system settings and
persist across sessions. The active preset is highlighted in yellow.
Deleting a preset requires a two-step confirmation
- **Live colour preview** — colour changes (palette, individual picker,
regenerate) update the map preview immediately without needing to save
or upload geographic data first. Colour picker dragging is debounced
to prevent excessive map redraws
### Map Interaction Changes
- **Click for popup** — area popups now appear on left-click instead of
hovering. The floating tooltip shows the group name with "click for
options" hint
- **Legend click** — clicking a legend item opens the popup for that
group area. Hovering still highlights the area on the map
- **Group website links** — popup always shows "group website" button
when an external URL is available. Both links now open in new tabs
- **Area data logging** — all area popup data is logged when the map
loads for easier debugging
### Groups Table Improvements
- **Boundary Source dropdown** — renamed "ONS Districts" to "Local
Authority Districts" for clarity. 
- **Member Groups select** — dropdown renders above the table (not
clipped inside it) and supports adding/removing individual items.
Select all/none header included
- **Custom shapefile indicator** — shown as inline text with a red cross
to clear, replacing the separate "Custom" column which has been removed
- **Draggable table heights** — both the groups table and parish
allocations table have drag-to-resize handles. Heights are persisted
to localStorage (up to 2000px)
- **Buttons above table** — "Rebuild Groups" and palette selector moved
above the groups table for better accessibility
- **Populated districts filter** — now correctly filters to groups with
districts, member groups, or custom shapefiles selected (excludes
empty non-geographic groups)
- **Regenerate scope** — colour regeneration applies only to currently
visible/filtered groups, not all groups
### Sub-Tab Navigation
The Maps tab content is organised into sub-tabs:
| Sub-tab                | Content                                          |
|------------------------|--------------------------------------------------|
| **All**                | Show everything (previous behaviour)             |
| **Map Preview**        | Map display, palette, group filter, presets       |
| **Groups**             | Group table, filters, colours, boundaries         |
| **Neighbouring Areas** | Area selection, shared district settings          |
| **Geographic Data**    | Upload/clear data, map position and zoom settings |
| **Parish Allocations** | CSV import and allocation management             |
Sub-tab labels no longer wrap onto multiple lines.
### Map Rendering Fixes
- Map correctly refreshes when navigating away from and back to the
Maps tab
- Opacity slider changes update styles in place without repositioning
labels
- Improved label collision detection with more search directions and
finer step sizes to reduce overlapping labels

---
## Technical Details
### New Components
- `ColourPaletteSelectorComponent` — reusable ng-select with colour
swatches, palette data, and reapply button. Exports
`COLOUR_PALETTE_OPTIONS` and `COLOUR_PALETTE_COLOURS` for shared use
- `SelectAllHeaderComponent` — reusable select all/none header for
ng-select dropdowns. Refactored out of `EnvironmentSelectComponent`,
`CollectionsMultiSelectComponent`, and `BackupsMultiSelectComponent`
which now all use it
### Database Migration
- `20260330000000-backfill-area-group-geometry-source.ts` — sets
`geometrySource: "ons-districts"` on all area groups in system config that lack this field
-  The dropdown is now populated via a database migration that backfills `geometrySource` on existing groups
### Model Changes
- `ColourPalette` enum — 19 named palettes
- `GroupPreset` interface — `name`, `groupNames[]`, `colourPalette?`
- `Organisation.groupPresets` — optional array of saved presets
- `StoredValue` — added `GROUPS_TABLE_HEIGHT`, `PARISH_TABLE_HEIGHT`,
`COLOUR_PALETTE`
### Area Map Component Changes
- `previewAreaColors` input — overrides backend colours for live preview
- `previewSelectedGroups` input — filters displayed groups in preview
- Click-based popup instead of hover-based with 800ms delay
- `onOpacityChange()` updates styles in place instead of rebuilding map
- Label collision detection: 17 directions, 20 steps, 14px spacing
### ESLint Config
- Added `nativeBrowserDialogRestrictions` array banning `alert`,
`confirm`, `prompt` and their `window.*` variants via
`no-restricted-syntax` selectors
### ESLint: Native Browser Dialogs Banned
- `alert()`, `confirm()`, and `prompt()` are now banned by ESLint across the entire codebase. All UI interactions must use inline elements.
- Existing `alert()` calls in the walk search proximity feature have been replaced with inline error messages.