Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

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

Aperta
  • Qualcosa non va?
#3 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

@echelonCodes ci sta già lavorando.

Dal 2/5/2026.

  • #6 di @echelonCodes — aperta
  • #8 di @echelonCodes — aperta

Valutazione

Difficoltà
5/5
Tempo stimato
Più di una settimana
Idoneità per principianti
35/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react
Ambito
design, frontend, web-dev

Direzione di ricerca

Inizia tracciando l’interazione esistente con i marker della mappa e lo stato della mappa in React, utilizzando le risorse su React-Leaflet e sul rendering condizionale in React collegate nell’issue. Esamina il design di Figma e determina come ProjectTitle, ProjectInfo, il routing e il layout responsive si integrano nell’app attuale. Il lavoro è completato quando i clic sui marker mostrano dettagli accurati del progetto, la mappa può essere ridimensionata senza navigazione e vengono soddisfatti i criteri di layout e interazione elencati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Advanced Beginner California Tribal GIS Hackathon
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⁵.

Image

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.

Lingua principale
HTML
Stelle
2
Fork
11
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di OpenSourceFellows/map_dashboard_hackathon

Tutte le issue di OpenSourceFellows/map_dashboard_hackathon

Issue simili

Altre issue su Design

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.