[FE] KBA Map layer

[01painadam]

Goal

Implement a KBA vector layer in the existing map component, enabling users to visualise and interact with Key Biodiversity Areas (KBAs) within their portfolio.

Users should be able to:

• View KBA boundaries as an overlay on the map
• Hover over KBAs to display a tooltip with the KBA name

Designs

KBA Vector Layer

Layer Features

• KBAs displayed as polygons over the base map
• Tooltip on hover showing the KBA name
• Consistent styling (e.g. boundary lines and fill opacity matching Alerting prototype)
• Layer toggle to turn the KBA overlay on/off

Interaction

• Hover interaction – Displays a tooltip with the KBA name

Scope

In Scope

• Displaying KBAs as vector polygons on the existing map
• Tooltip with KBA name on hover
• Layer visibility toggle

Out of Scope

• Sidebar with additional KBA details (future work)
• Custom styling beyond predefined layer settings
• Editing or modifying KBA geometries

---

Job Stories & Acceptance Criteria

Viewing KBAs on the Map

When I explore the map,
I want to see KBA boundaries overlaid on the base map,
So that I can visually locate protected areas within my portfolio.

Acceptance Criteria:

• The KBA vector layer is correctly displayed on the map
• KBAs align with the correct geographic locations

Interacting with KBAs

When I hover over a KBA,
I want to see a tooltip displaying the KBA name,
So that I can identify it without additional steps.

Acceptance Criteria:

• Hovering over a KBA displays a tooltip with the correct name
• Tooltip disappears when the cursor moves away

Toggling the KBA Layer

When I need to adjust the map view,
I want to toggle the KBA layer on or off,
So that I can control the visibility of the overlay.

Acceptance Criteria:

• Users can toggle the KBA layer on and off
• The toggle button updates the map accordingly

Risks & Questions

• Does the map pane behave differently in this prototype?

Solution Hints

...

Future Work

Enhanced Interactions

• Clicking on a KBA to open a sidebar with full details
• Filtering KBAs by details