Map View & Postcode-Area Grouping on the Properties Page
Map View & Postcode-Area Grouping on the Properties Page
Available from v0.1.213, the Properties page has two new ways to explore and organise a portfolio: an interactive Map View and a Group by Postcode Area sort option.
Map View
Enabling map view
On the Properties page, click the Map (🗺) button in the view-toggle control at the top of the page. The toggle has three options:
| Icon | View |
|---|---|
| Grid | Card grid |
| List | Table |
| Map | Interactive map split-view |
Desktop layout
On desktop, the page switches to a two-panel layout:
- Left panel — scrollable list of property cards (or grouped sections when postcode grouping is active).
- Right panel — sticky interactive map that stays in view as you scroll the list.
Mobile layout
On mobile, the property list is shown as normal. A floating "View on map" button opens a full-screen map sheet. Dismiss the sheet to return to the list.
Map pins
Each property is plotted as a colour-coded pin based on its deposit health status:
| Colour | Meaning |
|---|---|
| 🔴 Red | Disputed or unprotected deposit |
| 🟡 Amber | Compliance alert |
| 🟢 Green | Active, no issues |
| ⚫ Grey | Vacant |
Interactivity
- Hover cross-highlighting — hovering over a property card highlights the corresponding map pin, and hovering over a pin highlights the card in the list.
- Quick View — clicking a map pin opens the Property Quick View slide-over, the same as clicking through from the list.
Geocoding
Property locations are resolved from their postcodes using the postcodes.io free UK postcode API.
- Requests are batched (up to 100 postcodes per call).
- Results are cached in memory for the lifetime of the page session to avoid redundant API calls.
- No API key is required.
- Fetches are protected by a timeout to prevent the UI from hanging on slow network conditions.
Note: Properties whose postcodes cannot be resolved will not appear on the map.
Group by Postcode Area
Enabling postcode grouping
Open the Sort dropdown on the Properties page and select "Group by postcode area".
How groups work
Properties are collapsed into collapsible sections by their UK outward code — the first part of a postcode (e.g. SW1A, M1, LS1). The outward code is derived as follows:
- Spaced postcodes:
M1 1AA→M1 - Non-spaced postcodes: last three characters are stripped
Groups are sorted alphabetically by district prefix first (e.g. E, M, SW), then by full outward code within each district.
Group headers
Each section header shows:
- The district prefix icon (e.g. SW)
- The full outward code (e.g.
SW1A) - A count of properties in the group
- A red ⚠ Issues badge if any property in the group has a disputed tenancy, unprotected deposit, or compliance alert
Click the header to expand or collapse the section.
Works with Map View
Postcode grouping can be combined with Map View. The left panel shows grouped, collapsible sections while the map on the right continues to display all pins.
Pagination
Pagination is disabled when postcode grouping is active. Up to 500 properties are loaded to give a complete portfolio view across all groups.
Technical notes
| Detail | Value |
|---|---|
| Map library | Leaflet v1.9.4 + react-leaflet |
| Map tiles | OpenStreetMap (free, no key required) |
| Geocoding | postcodes.io batch API (free, no key required) |
| SSR safety | PropertyMap is lazy-loaded via React.lazy + Suspense to avoid Leaflet's browser-only DOM dependency |
| Max properties in map/grouped mode | 500 |