Integrate project data into UI (static/API)

从 public/fixtures/land_project_sites.geojson 开始，检查现有的 Leaflet、ProjectTitle 和 ProjectInfo 组件。与维护者确认是否有可用的 API，或是否应使用静态 GeoJSON 路径，然后跟踪页面加载数据和标记选择当前的流转方式。当动态标记和所选项目的详细信息通过分离的数据获取逻辑进行渲染，并保留静态 fallback 时，即视为完成。

Issue created with ChatGPT models' help¹

---

Description

Integrate land project data into the frontend UI so map markers, project title panels, and project information components consume real project data instead of isolated hardcoded values¹. The application currently uses static GeoJSON files to render land project markers on the Leaflet map². This issue should support both possible data flows depending on backend readiness:

• Static GeoJSON/local project data flow³
• API/server/database-driven data flow⁴

If backend/server architecture is not ready when this issue is worked on, contributors may continue using static GeoJSON project data temporarily¹. However, if backend APIs are available, the preferred implementation is consuming validated project data from the server through a structured frontend architecture².

This issue is mainly about connecting the UI layer with project data sources so components render dynamically from data instead of static placeholders³.

Please request notion table and geojson file access with the maintainer team:

• https://www.notion.so/programequity/31bfc2c48401801c8047f5a420902687?v=31bfc2c4840180818555000c840d5956&source=copy_link
• https://github.com/OpenSourceFellows/map-dashboard/blame/main/public/fixtures/land_project_sites.geojson

---

Goals

• Load land project data into frontend UI¹
• Support both static GeoJSON and API-driven data sources²
• Dynamically populate map markers and project detail components³
• Establish reusable frontend data flow architecture⁴
• Support project data loading on page load and marker click¹
• Prepare application for future backend scaling and validation²

---

Implementation Instructions

• Create reusable frontend data flow structure¹

• Suggested architecture (optional but recommended):

  • controller²
  • middleware³
  • service⁴

• Use React + TypeScript + Material UI where possible¹

• Axios may be used for API requests if preferred²

• On initial page load:

  • request/load project data³
  • render markers on Leaflet map⁴

• On marker click:

  • load/display selected project detail data¹
  • populate ProjectTitle component²
  • populate ProjectInfo component³

• If backend/server APIs are unavailable:

  • use static GeoJSON data from repo⁴

• If backend/server APIs are available:

  • consume project data through API architecture¹
  • use validated server responses if available²

• Avoid tightly coupling UI components directly to fetch logic³

• Keep service/request logic reusable for future routes/pages⁴

---

Suggested Frontend Data Flow

Option A — Static GeoJSON Flow

• GeoJSON files stored locally in repository¹
• Frontend services read/transform local data²
• Components consume transformed project objects³

Option B — API/Database Flow

• Frontend sends API request on page load⁴
• Server retrieves project data from database¹
• Frontend consumes API response through service/controller architecture²
• Components dynamically render returned project data³

---

Expected Functionalities

On Page Load

• Land project dataset loads automatically¹
• Markers render on Leaflet map²
• Project metadata becomes available for interaction³

On Marker Click

• Selected project becomes active⁴
• Project detail data loads into UI¹
• ProjectTitle renders selected title²
• ProjectInfo renders selected project metadata³

---

Architecture Notes

This issue is less about final backend implementation details and more about making the UI correctly consume project data regardless of source¹.

“Integrating data into UI” may include:

• setting up API/service requests²
• transforming response data³
• connecting data to React components⁴
• managing loading/error states¹
• validating incoming data shapes²
• rendering dynamic UI content³
• preparing reusable frontend architecture⁴

Contributors may structure implementation differently as long as the UI cleanly consumes dynamic project data¹.

---

Suggested Folder Structure (Optional)

src/
 ├── controllers/
 ├── middleware/
 ├── services/
 ├── types/
 ├── components/
 ├── pages/
 └── data/

Possible service examples:²

services/
 ├── projectService.ts
 ├── mapService.ts
 └── apiClient.ts

---

Acceptance Criteria

• Project data renders dynamically in UI¹
• Map markers load from project dataset²
• Clicking markers updates project detail components³
• Application supports static GeoJSON fallback⁴
• API integration path is supported if backend is ready¹
• Data-fetching logic is separated from UI components²
• Code structure supports future scalability and testing³
• Layout/components correctly consume dynamic project values⁴

---

Resources

¹ https://react.dev/learn/passing-data-deeply-with-context
² https://axios-http.com/docs/intro
³ https://leafletjs.com/examples/quick-start/
⁴ https://mui.com/material-ui/getting-started/overview/

Please request notion table and geojson file access with the maintainer team:

• https://www.notion.so/programequity/31bfc2c48401801c8047f5a420902687?v=31bfc2c4840180818555000c840d5956&source=copy_link
• https://github.com/OpenSourceFellows/map-dashboard/blame/main/public/fixtures/land_project_sites.geojson

Reference Figma Design:
https://www.figma.com/proto/e9z8edludVssFYABGEWsoI/OpenNature-Map--Hackathons-?node-id=1-1465&viewport=787%2C545%2C0.11&t=Xwc2asfn9Qksi99P-8&scaling=scale-down&content-scaling=fixed&starting-point-node-id=1%3A896&page-id=0%3A1&hide-ui=1

Reference Issues (these may not be accessible but please reach out to maintainer team if you would like to access):

• https://github.com/OpenSourceFellows/map-dashboard/issues/203
• https://github.com/OpenSourceFellows/dashboard_server/issues/108
• https://github.com/OpenSourceFellows/dashboard_server/issues/83
• https://github.com/OpenSourceFellows/dashboard_server/issues/72