AOSSIE-Org / AOSSIE-Org/PictoPy

Feat:Interactive Photo Map for Browsing Images by Location

オープン
#1,041 コメント 2 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
Python
スター
283
フォーク
679
平均マージ
7日 2時間
マージ済み PR(30日)
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 を短くまとめたダイジェスト。