AOSSIE-Org / AOSSIE-Org/PictoPy

Feat:Interactive Photo Map for Browsing Images by Location

Đang mở
#1,041 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
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 )

Image
Image

### 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

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.