Properties — Map View & Postcode Grouping

The Properties page offers three ways to browse your portfolio: Grid, Table, and Map. You can also group properties by postcode area in both Grid and Map views.

Switching views

Use the view toggle in the top-right of the Properties page to switch between:

Icon	Mode	Description
⊞ Grid	`grid`	Card-based overview with health badges
☰ Table	`table`	Sortable, column-based list
🗺 Map	`map`	Interactive map with card list

Your last-used view is remembered between sessions.

Map View

Desktop layout

The page splits into two panels:

Left panel — scrollable list of property cards (or grouped sections when "Group by postcode area" is active).
Right panel — a sticky interactive map that stays visible as you scroll the list.

Mobile layout

The property list is shown by default. A floating "View on map" button opens a full-screen map sheet.

Map pins

Each property is represented by a colour-coded pin based on its health status:

Colour	Meaning
🔴 Red	Disputed tenancy or unprotected deposit
🟡 Amber	Compliance alert
🟢 Green	Active, no issues
⚫ Grey	Vacant

Interactions

Hover a card → the corresponding map pin is highlighted.
Hover a pin → the corresponding card is highlighted in the list.
Click a pin → opens the Quick View slide-over for that property.

Geocoding

Property locations are resolved from their postcodes using the postcodes.io public API. No API key is needed. Results are cached in-memory for the duration of the page session. Postcodes are sent in batches of up to 100 to keep requests efficient.

Group by Postcode Area

Select "Group by postcode area" from the sort dropdown to collapse your portfolio into collapsible sections by outward code.

How grouping works

Each section header shows the outward code (e.g. SW1A, M1, LS1), a property count, and optionally a red ⚠ Issues badge if any property in the group has a risk flag.
Sections are sorted alphabetically — first by district letters (e.g. M before SW), then by the full outward code.
Click a section header to collapse or expand it.

Outward code extraction

Input postcode	Outward code
`SW1A 1AA`	`SW1A`
`M1 1AA`	`M1`
`LS1 4AP`	`LS1`

Both space-separated and non-spaced postcode formats are handled automatically.

Compatibility

Group by postcode area works in Grid view and Map view.
In Map view, the left panel shows grouped card sections while the map still renders all pins for the full portfolio.
Grouped mode loads up to 500 properties (bypassing the standard 24-per-page limit) to ensure the full portfolio is visible.

Dependencies

Map View is powered by open-source, zero-cost services:

Service	Purpose	API key required?
Leaflet v1.9	Interactive map rendering	No
OpenStreetMap	Map tiles	No
postcodes.io	UK postcode geocoding	No