AOSSIE-Org / AOSSIE-Org/PictoPy
Feat:Interactive Photo Map for Browsing Images by Location
- Ngôn ngữ chính
- Python
- Star
- 283
- Fork
- 679
- Merge trung bình
- 7 ngày 2 giờ
- Pull request đã merge (30 ngày)
- 3
Mô tả
### Describe the feature
PictoPy already extracts GPS metadata from images via _extract_gps_coordinates in the backend, but this data is currently not used in the UI.
### As a result:
- Users cannot visually explore photos by location
- Travel photos are limited to list/grid browsing
- A key metadata feature remains underutilized
- This is a missed opportunity for an engaging, visual browsing experience.
### Goal
Introduce an Interactive Photo Map that allows users to browse images geographically.
#### When implemented:
1. Photos with GPS data appear on a world map
2. Users can zoom into locations to view photos from a specific trip or place
3. The gallery dynamically filters based on the visible map area
4. This will provide the most visually impressive way to browse travel photos in PictoPy.
### Proposed Solution:
High-Level Workflow
```
Image with GPS metadata
↓
Backend already extracts coordinates
↓
Frontend Map tab (react-leaflet)
↓
Clustered photo markers on map
↓
Zoom / pan map
↓
Gallery auto-filters by location
```
### Feature Breakdown
**1. Map Tab (Frontend)**
- Add a new "Map" tab alongside existing gallery views
- Integrate react-leaflet for map rendering
- Display a world map with zoom and pan support
**2. Photo Markers & Clustering**
- Plot markers only for images with valid GPS metadata
- Use marker clustering for better performance and UX
- Marker click can highlight or preview the photo(s)
**3. Location-Based Gallery Filtering**
- Zooming or panning the map filters the gallery
- Only photos within the visible map bounds are shown
- Enables trip-based browsing (city, country, region)
### Files to Change / Add
**Frontend**
```
frontend/src/pages/Map/PhotoMap.tsx (new)
frontend/src/components/Map/PhotoMarker.tsx (new)
frontend/src/hooks/useMapFilter.ts (new)
frontend/src/pages/Home/Home.tsx (update – map/gallery sync)
frontend/src/router/routes.ts (update – Map tab)
```
**Backend**
No new backend logic required
Reuse existing GPS extraction (_extract_gps_coordinates)
Optional: expose helper API for images with GPS data
### Acceptance Criteria
1. Images with GPS metadata appear on a world map
2. Marker clustering works smoothly
3. Zooming into a region filters the gallery automatically
4. No performance regression with large image sets
5. Works consistently on Windows, macOS, and Linux
### Future Enhancements 👍
Timeline + map combined view
Heatmap visualization
Offline map support
Reverse geocoding (city/country labels)
### Add ScreenShots (Prototype )
### Record
- [x] I agree to follow this project's Code of Conduct
- [x] I want to work on this issue
Hướng dẫn đóng góp
Đánh giá
Issue này chưa được đánh giá.