Feat:Interactive Photo Map for Browsing Images by Location

[JaYRaNa213]

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

• I agree to follow this project's Code of Conduct
• I want to work on this issue

[github-actions]

👋 Thanks for opening this issue! The maintainers will review it shortly. Till then, do not open any PR. This is a strict rule we like to follow around here :)

[JaYRaNa213]

hello @rahulharpal1603 sir

please assign this issue to me