3.5 KiB
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:
placeobject containingid(ULID),title,lat,lon,geohash,osmId,url, etc. - Storage Path:
places/<geohash-prefix-6>/<ulid>(groups places by location). - Dependencies: Uses
ulidandlatlon-geohashinternally (bundled vianpm run build). - Fixes: Refactored to
async/await, removed manualtry/catchvalidation, and added logic to stripundefinedfields 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.jsfor Haversine distance calculations.
Current State
- Repo: The app runs via
pnpm start. - Workflow:
- User clicks map -> Sidebar opens.
- If a POI is matched heuristically, it opens "Details" directly.
- Otherwise, it lists nearby places.
- User clicks "Save Bookmark" -> Stores JSON in RemoteStorage.
- Recent Fixes: Corrected an issue where saving failed due to
undefinedURL fields. AddedosmIdto the schema and sidebar UI.
Files Currently in Focus
vendor/remotestorage-module-places/src/places.ts: The data module logic (schema, pathing, storage). Requiresnpm run buildin 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
- Rendering Bookmarks: We are saving places, but not yet displaying them on the map. We need to fetch stored places from RemoteStorage (likely via
listByPrefixbased on the current map view) and render them as markers on the OpenLayers map. - UI Feedback: Verify the "Save" action gives better visual feedback than
alert(). - Widget: The RemoteStorage widget attachment code in
storage.jsis currently commented out; it needs to be enabled or properly placed in the UI. - Refinement: The
osmIdproperty was just added; verify the link in the sidebar works correctly.
Technical Constraints
- Template Style: Strict Mode GJS (
<template>). - Package Manager:
pnpmfor the main app,npmfor the vendor module. - Visuals: No Tailwind/Bootstrap; using custom CSS in
app/styles/app.css.