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

Implement map click interaction + layout state

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

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
48/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
react, typescript
Ambito
frontend, web-dev

Direzione di ricerca

Inizia dal contenitore della mappa o dal componente della pagina e traccia il modo in cui attualmente vengono gestiti i clic sui marker dei progetti fondiari. Leggi ProjectTitle e ProjectInfo, quindi esamina l’approccio esistente di Material UI al layout responsive. Il lavoro è completato quando la selezione di un marker mostra entrambi i componenti di dettaglio con i dati selezionati e l’azione di chiusura ripristina la visualizzazione della mappa completa sugli schermi più piccoli.

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

Descrizione

Advanced
Issue created with ChatGPT models' help¹

Dependency

  • #4
  • #15
  • Once above issues are done, please move this issue to ready column/status

Description

Implement the interaction flow where clicking a land project marker on the map changes the application layout state and reveals the lower project detail panels¹. When the map is in full-screen/default state and a user clicks a project marker, the map should shrink responsively and display both the ProjectTitle and ProjectInfo components beneath the map².

The interaction should also support resetting back to the original full-map layout when the user clicks the close button from the ProjectTitle component³. This issue is mainly focused on layout state management, interaction flow, responsive resizing behavior, and component visibility handling⁴.

React state management can initially use useState, context, or another lightweight approach depending on contributor preference¹.

Image

Goals

  • Implement project marker click interaction¹
  • Shrink map layout after marker selection²
  • Render ProjectTitle and ProjectInfo components dynamically³
  • Restore full map layout on close action⁴
  • Support responsive layout behavior for smaller screens¹
  • Prepare interaction flow for future routing/service integration²

Implementation Instructions

  • Add layout interaction logic to map container/page component¹

  • Use React state (useState or equivalent) to track selected project²

  • Create layout states such as:

    • default/full map view³
    • project selected/detail layout⁴

  • On marker click:

    • store selected project data¹
    • shrink map container height/layout²
    • render ProjectTitle component³
    • render ProjectInfo component⁴

  • On close button click from ProjectTitle:

    • clear selected project state¹
    • restore original map layout²
    • hide detail panels³

  • Ensure layout resizing works on smaller screens/mobile widths⁴

  • Use responsive breakpoints using Material UI¹

  • Avoid hardcoding viewport assumptions where possible²

Expected Interaction Flow

Default State
  • Map occupies primary/full content layout¹
  • Project detail panels are hidden²
Marker Click State
  • User clicks land project marker³
  • Map shrinks vertically according to detail layout⁴
  • ProjectTitle appears below map¹
  • ProjectInfo appears below title²
  • Selected project data populates components dynamically³
Close Interaction
  • User clicks close button from ProjectTitle⁴
  • Detail panels disappear¹
  • Map returns to original full-size state²

Responsive Layout Considerations

  • Shrinking behavior must account for smaller screen sizes¹
  • Layout should remain usable on tablets/laptops²
  • Avoid fixed pixel-only assumptions for height calculations³
  • Contributors may use flex/grid/MUI responsive containers⁴
  • Mobile interaction behavior can evolve later if needed¹

Suggested Technical Structure

Possible state example (not required):²

const [selectedProject, setSelectedProject] = useState(null);

Possible derived layout states:³

const isProjectOpen = Boolean(selectedProject);

This is only a suggestion and contributors may structure state differently⁴.

Acceptance Criteria

  • Clicking a map marker updates layout state¹
  • Map shrinks when project is selected²
  • ProjectTitle component renders correctly³
  • ProjectInfo component renders correctly⁴
  • Close button restores original map layout¹
  • Layout remains usable on smaller screens²
  • Selected project data flows into detail components³
  • Code structure supports future expansion/refactoring⁴

Resources

¹ https://react.dev/reference/react/useState
² https://react.dev/learn/sharing-state-between-components
³ https://mui.com/material-ui/react-box/
⁴ https://mui.com/material-ui/guides/responsive-ui/

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

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 Web Dev

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.