marco/PROJECT_STATUS.md

3.5 KiB

Project Status: Marco

Last Updated: Fri Jan 16 2026

Project Context

We are building Marco, a decentralized maps application using Ember.js (Octane/Polaris edition with GJS/GLIMMER), Vite, and OpenLayers. The core feature is storing place bookmarks in RemoteStorage.js, using a custom module structure.

What We Have Done

1. Map Integration

  • Set up OpenLayers in app/components/map.gjs (class-based component).
  • Switched tiles to OpenFreeMap Liberty style (supports vector POIs).
  • Implemented a hybrid click handler:
    • Detects clicks on visual vector tiles.
    • Falls back to fetching authoritative data from an Overpass API service.
    • Uses a heuristic (distance + type matching) to link visual clicks to API results (handling data desynchronization).

2. RemoteStorage Module (@remotestorage/module-places)

  • Created a custom TypeScript module in vendor/remotestorage-module-places/.
  • Schema: place object containing id (ULID), title, lat, lon, geohash, osmId, url, etc.
  • Storage Path: places/<geohash-prefix-6>/<ulid> (groups places by location).
  • Dependencies: Uses ulid and latlon-geohash internally (bundled via npm run build).
  • Fixes: Refactored to async/await, removed manual try/catch validation, and added logic to strip undefined fields to satisfy RemoteStorage validation.

3. App Infrastructure

  • Services:
    • storage.js: Initializes RemoteStorage, claims access, enables caching, and sets up the widget.
    • osm.js: Fetches nearby POIs from Overpass API.
  • UI Components:
    • places-sidebar.gjs: Displays a list of nearby POIs. Allows selecting a place to view details and saving it as a bookmark. Links to the OSM website via the node ID.
  • Geo Utils: Added app/utils/geo.js for Haversine distance calculations.

Current State

  • Repo: The app runs via pnpm start.
  • Workflow:
    1. User clicks map -> Sidebar opens.
    2. If a POI is matched heuristically, it opens "Details" directly.
    3. Otherwise, it lists nearby places.
    4. User clicks "Save Bookmark" -> Stores JSON in RemoteStorage.
  • Recent Fixes: Corrected an issue where saving failed due to undefined URL fields. Added osmId to the schema and sidebar UI.

Files Currently in Focus

  • vendor/remotestorage-module-places/src/places.ts: The data module logic (schema, pathing, storage). Requires npm run build in this directory after changes.
  • app/components/map.gjs: Map rendering and click interaction logic.
  • app/components/places-sidebar.gjs: UI for listing POIs and saving them.
  • app/services/storage.js: RemoteStorage configuration.

Next Steps & Pending Tasks

  1. Rendering Bookmarks: We are saving places, but not yet displaying them on the map. We need to fetch stored places from RemoteStorage (likely via listByPrefix based on the current map view) and render them as markers on the OpenLayers map.
  2. UI Feedback: Verify the "Save" action gives better visual feedback than alert().
  3. Widget: The RemoteStorage widget attachment code in storage.js is currently commented out; it needs to be enabled or properly placed in the UI.
  4. Refinement: The osmId property was just added; verify the link in the sidebar works correctly.

Technical Constraints

  • Template Style: Strict Mode GJS (<template>).
  • Package Manager: pnpm for the main app, npm for the vendor module.
  • Visuals: No Tailwind/Bootstrap; using custom CSS in app/styles/app.css.