Build Interactive 2D Clickable Site Plot Map in Angular

Build Interactive 2D Clickable Site Plot Map in Angular

Description:
We have a real estate site layout image (sample attached) and need it turned into an interactive, clickable 2D plot map for our Angular platform.

Requirements:
Use our provided site map as the base.
Create vector overlays (SVG polygons) for each plot so they can be individually clicked.
Each plot will have a unique ID matching our database records.
Color-code plots by status (e.g., Available = Green, Reserved = Amber, Sold = Red) from our API data.

On click/tap:
Open a popup modal with plot details (number, size, status, price, facing, etc.).
Include “View Full Details” link to another page.
Include legend showing status colors.

Responsive design for desktop & mobile (tap-to-select on mobile instead of hover).
Ensure smooth zoom/pan for larger site maps.

What We Will Provide:
Site map image (PNG)
Plot data via API (JSON format with IDs, status, price, etc.)
Color & branding guidelines
Wireframe/mockup of popup modal

Deliverables:
Angular component integrating the clickable SVG overlay with our API.
Clean, documented code with reusable structure.
All clickable plot shapes aligned accurately with the site map.