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

Implement map click interaction + layout state

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

まだ誰も着手していません。

評価

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

調査の方向性

マップコンテナまたはページコンポーネントから始め、土地プロジェクトのマーカーのクリックが現在どのように処理されているかを追跡します。ProjectTitle と ProjectInfo を読み、その後、Material UI の既存のレスポンシブレイアウトのアプローチを確認します。マーカーを選択すると、選択されたデータを含む両方の詳細コンポーネントが表示され、小さい画面では閉じる操作によってマップ全体のビューが復元されれば完了です。

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

説明

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

主要言語
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

Web Dev の issue をもっと見る

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

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