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

---

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., land project 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

• 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.

Start by tracing the existing React map-marker interaction and map state, using the React-Leaflet and React conditional-rendering resources linked in the issue. Review the Figma design and determine how ProjectTitle, ProjectInfo, routing, and responsive layout fit the current app. Done means marker clicks show accurate project details, resize the map without navigation, and satisfy the listed layout and interaction criteria.