Hacktoberfest 2026：メンテナが10月に向けて印を付けた、オープンで初心者向けの issue。 Hacktoberfest の issue を見る

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

オープン
  • 何か問題がありますか？
#3 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

@echelonCodes がすでに取り組んでいます。

2026年5月2日 から。

  • #6 @echelonCodes による — オープン
  • #8 @echelonCodes による — オープン

評価

難易度
5/5
見積もり時間
1週間以上
初心者へのやさしさ
35/100
issue の種類
機能追加
明瞭さ
おおむね明確
活発さ
静か
技術スタック
react
領域
design, frontend, web-dev

調査の方向性

まず、Issue にリンクされている React-Leaflet と React の条件付きレンダリングに関するリソースを使って、既存の React におけるマーカー操作とマップの状態を追跡します。Figma デザインを確認し、ProjectTitle、ProjectInfo、ルーティング、レスポンシブレイアウトが現在のアプリにどのように組み込まれるかを判断します。マーカーをクリックすると正確なプロジェクト詳細が表示され、ナビゲーションなしでマップのサイズを変更でき、一覧にあるレイアウトと操作の基準を満たせば完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
HTML
スター
2
フォーク
11
30日以内にマージされた PR はありません

環境構築

Codespaces で開く

このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

OpenSourceFellows/map_dashboard_hackathon のほかの issue

OpenSourceFellows/map_dashboard_hackathon の issue をすべて見る

似ている issue

Design の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。