AOSSIE-Org / AOSSIE-Org/PictoPy

Feat:Interactive Photo Map for Browsing Images by Location

未關閉
#1,041 2 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
主要語言
Python
星號
283
分支
679
平均合併
7 天 2 小時
30 天內合併 PR
3

描述

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

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。