Epic Feature – Land Project Detail View (Map Interaction + Title & Info Panels)

[SAUMILDHANKAR]

---

Issue created with ChatGPT models help¹

---

Description

This epic focuses on implementing an interactive project detail view triggered when a user clicks on a map marker (e.g., Tez Naz Iah / Chinle Creek)¹. Upon interaction, the map should dynamically resize (shrink vertically) and reveal two structured UI sections: Project Title and Project Info panels². This behavior aligns with the Figma design and improves usability by surfacing contextual project details without navigating away from the map³.

The Project Title will display high-level information (e.g., campaign name), while the Project Info section will provide detailed structured data split into left and right panels (filters vs metadata)⁴. This implementation should follow a component-based architecture using React (e.g., ProjectTitle, ProjectInfo) and integrate cleanly with map state and routing logic⁵.

---

Goals

• Enable click interaction on map markers to open project detail view¹
• Dynamically resize map layout to accommodate detail panels²
• Implement reusable ProjectTitle component³
• Implement reusable ProjectInfo component with split layout⁴
• Align UI with Figma design specifications (spacing, borders, layout)⁵
• Ensure smooth UX without full page navigation¹

---

Implementation Instructions

• Add click handler on map markers (React-Leaflet interaction)¹
• Implement layout state to toggle between full map and detail view²
• Create ProjectTitle component (header bar UI)³
• Apply Figma styles: padding (20px/24px), border-bottom, background color⁴
• Create ProjectInfo component with two sections (left + right panels)⁵
• Left panel: filters / layer toggles (e.g., acreage, watershed)¹
• Right panel: project metadata (status, partner, acreage, location, etc.)²
• Apply layout styling: fixed widths (300px / 840px split) and borders³
• Ensure responsive behavior for smaller screens⁴
• Integrate with data source (static or API-based depending on current phase)⁵
• Please use Material UI

---

Acceptance Criteria

• Clicking a map marker opens project detail view¹
• Map resizes smoothly without layout break issues²
• Project Title component renders correctly with Figma styling³
• Project Info panel displays left/right layout correctly⁴
• Project data (status, partner, acreage, etc.) displays accurately⁵
• UI matches Figma design (spacing, borders, alignment)¹
• Interaction does not require full page reload²

---

Sub-Issues

• Create ProjectInfo component (left/right layout)
• Implement map click interaction + layout state
• Integrate project data into UI (static/API)
• Apply Figma-based styling (spacing, borders, layout)
• Ensure routing/state handling for selected project
• Add validation/middleware if needed for data handling

---

Resources

¹ https://react-leaflet.js.org/docs/api-components/
² https://react.dev/learn/conditional-rendering
³ https://react.dev/learn/passing-props-to-a-component
⁴ https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model
⁵ https://react.dev/learn/sharing-state-between-components

Figma Design: https://www.figma.com/design/eRcnlUKzSsIJv3JcOMddwU/OpenNature-Map?node-id=5771-3802&t=R2HRz2FxbgryeS8U-0

Please reach out to team for access to Figma.