[Feature] Evaluate and implement multiple GPX/KML rendering on single map

[freedeaths]

Evaluate the feasibility and implement functionality to render multiple GPX/KML files simultaneously on the same map view for track comparison and analysis.

[freedeaths]

add my-footprints in the left ribbon with the url of /#/my-footprints and an icon like import { FaMapMarkedAlt } from "react-icons/fa";

It collects all the gpx and marks(manual but where to config?) or exif info from all photos and renders them in a map with the smallest range.

[freedeaths]

Great feature request! After some analysis, I think we can implement this in phases, but there are some interesting challenges around data collection and storage.

Data Sources & Challenges

The ideal implementation would collect data from multiple sources:

1. GPX/KML tracks (straightforward - scan attachments folder)
2. Photo EXIF geolocation (requires EXIF extraction)
3. Manual city/location entries (requires persistent storage)

The main challenge is that Perlite React is a read-only vault viewer - we can't modify the source vault files since they might be synced from OneDrive/Dropbox and would get overwritten.

Proposed Solution: Two-Phase Approach

Phase 1: Node.js Script (MVP)

# User runs in their vault directory
npm install -g obsidian-footprints-scanner
cd /path/to/obsidian-vault
footprints-scan --output .my-footprints.md

Features:

• Scans all GPX/KML files in attachments
• Extracts EXIF geolocation from photos
• Generates a hidden .my-footprints.md config file (invisible in Obsidian)
• Manual entries can be added by editing the markdown file

Phase 2: Obsidian Plugin (Enhanced UX)

A dedicated Obsidian plugin that provides:

• Visual interface for managing footprint data
• Auto-detection of new GPX/photos
• Manual city/location entry with GUI
• Real-time updates when files change

Data Storage Format

Use a hidden .my-footprints.md file with mixed manual/auto content:

---
version: "1.0"
last_updated: "2024-12-29T10:30:00Z"
---

# My Footprints Configuration

## Manual City Records
- Beijing (39.9042, 116.4074) - 2024-01-15 "Chinese New Year"
- Shanghai (31.2304, 121.4737) - 2024-02-10 "Business trip"

## Auto-Scanned Results (Read-only)
<!-- AUTO_SCAN_START -->
### GPX Tracks
- beijing-trip.gpx - 2024-03-20 (auto-detected)
- shanghai-walk.gpx - 2024-02-10 (auto-detected)

### Photo Locations  
- IMG_001.jpg - (39.9042, 116.4074) - 2024-03-20 (EXIF)
<!-- AUTO_SCAN_END -->

Implementation in Perlite React

The /my-footprints page would:

1. Read the .my-footprints.md config file
2. Parse and merge all data sources
3. Render everything on a single map with:
   • Different colors for different tracks
   • Photo location markers
   • City visit indicators
   • Auto-zoom to encompass all data

Next Steps

I suggest starting with Phase 1 (Node.js script) as it's:

• Quick to prototype and validate the concept
• Platform-independent
• Can serve as the core logic for the future plugin
• Allows testing the data format and UI integration

What do you think of this approach? Should we start with the script implementation, or would you prefer to jump directly to the Obsidian plugin?