Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

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

Abierto
  • ¿Algo no está bien?
#3 0 comentarios 0 reacciones 0 asignados Ver en GitHub

@echelonCodes ya está trabajando en esto.

Desde el 2/5/2026.

  • #6 de @echelonCodes — abierto
  • #8 de @echelonCodes — abierto

Evaluación

Dificultad
5/5
Tiempo estimado
Más de una semana
Aptitud para principiantes
35/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
react
Área
design, frontend, web-dev

Línea de trabajo

Comienza rastreando la interacción existente con los marcadores del mapa y el estado del mapa en React, utilizando los recursos sobre React-Leaflet y renderizado condicional en React enlazados en el issue. Revisa el diseño de Figma y determina cómo encajan ProjectTitle, ProjectInfo, el enrutamiento y el diseño responsive en la app actual. Se considera terminado cuando los clics en los marcadores muestran detalles precisos del proyecto, el mapa se puede redimensionar sin navegación y se cumplen los criterios de diseño e interacción indicados.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
HTML
Estrellas
2
Forks
11
Sin PR fusionados en 30 d

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de OpenSourceFellows/map_dashboard_hackathon

Todos los issues de OpenSourceFellows/map_dashboard_hackathon

Issues similares

Más issues de Design

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.