Implement map click interaction + layout state
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 48/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 冷清
- 技术栈
- react, typescript
调研方向
从地图容器或页面组件开始，跟踪当前土地项目标记如何处理点击操作。阅读 ProjectTitle 和 ProjectInfo，然后检查现有的 Material UI 响应式布局方案。完成标准是：选择标记后显示包含所选数据的两个详情组件，并且在较小屏幕上执行关闭操作后恢复完整地图视图。
由索引模型根据 Issue 内容生成。
描述
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¹.
Goals
- Implement project marker click interaction¹
- Shrink map layout after marker selection²
- Render
ProjectTitleandProjectInfocomponents 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 (
useStateor 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
ProjectTitlecomponent³ - render
ProjectInfocomponent⁴
-
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⁴
ProjectTitleappears below map¹ProjectInfoappears 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²
-
ProjectTitlecomponent renders correctly³ -
ProjectInfocomponent 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/
- 主要语言
- HTML
- 星标
- 2
- 派生
- 11
- PR 合并指标
- 30 天内没有已合并 PR
环境准备
在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
OpenSourceFellows/map_dashboard_hackathon 的其他 Issue
-
California Tribal GIS Hackathon Intermediate
难度 2/5 半天 新手友好度 68/100
-
California Tribal GIS Hackathon Intermediate
难度 3/5 1-2 天 新手友好度 68/100
-
Advanced California Tribal GIS Hackathon
难度 4/5 3-5 天 新手友好度 45/100
-
Advanced California Tribal GIS Hackathon
难度 3/5 1-2 天 新手友好度 48/100
-
Advanced California Tribal GIS Hackathon
难度 4/5 3-5 天 新手友好度 45/100
查看 OpenSourceFellows/map_dashboard_hackathon 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 66/100
维护者通常 1 天内回复
-
🔍 Triage
难度 2/5 1-3 小时 新手友好度 76/100
coollabsio/coolify#12373 ·
维护者通常 1 天内回复
-
area/desktop-shell
难度 2/5 1-3 小时 新手友好度 72/100
yantrikos/yantrik-os#1012 ·
维护者通常 1 天内回复
-
bug ui-dashboard
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复