Feat: Add interactive map view to visualize geotagged photos on Memories page

[yugalkaushik]

Describe the feature

Problem Statement

Right now, we are extracting GPS coordinates from photo EXIF data but not doing anything useful with them. The location information just sits in the database unused, and the Memories page literally renders nothing (<></> in Memories.tsx).

This results in wasted metadata that users would actually find valuable. Being able to view where photos were taken is a standard and expected feature in modern photo applications.

Current Implementation

The GPS data extraction is already working.

Backend

_extract_gps_coordinates(exif_data) function:

• Pulls GPS information from photo EXIF tags
• Extracts latitude and longitude in DMS (degrees, minutes, seconds) format
• Returns a tuple (latitude, longitude) or (None, None) if no GPS data is present
• Location data is stored in the images table under the metadata column (JSON text)

Frontend

TypeScript types already support location metadata in Media.ts

Despite having:

• GPS extraction logic
• Database storage
• Frontend type support
  …the data is never surfaced to users.

The Memories page is currently just a placeholder and renders nothing, making all the extracted location metadata effectively unused.

What Should Be Built

An interactive map on the Memories page that enables users to explore their photos geographically.

Required Features

• Display all photos with GPS data plotted on a map
• Cluster nearby photos to avoid overwhelming the map with markers
• Clicking a marker should show the photos taken at that location
• Filter photos by date range
• Zoom in/out to switch between detailed and overview levels

Record

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

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[DhanashreePetare]

Greetings @yugalkaushik. I am interested to work on the issue. Can you please assign me the same. ThankYou

[Chetansahney]

Hi! I want to solve this issue. Have already worked on the similar thing before. Please assign it to me.

[yugalkaushik]

@DhanashreePetare @Chetansahney thank you guys for your interest but currently I want maintainers to look through the problem then decide if we can move forward with it or not.