jeffemmett
/
canvas-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
canvas-website/backlog/tasks/task-028 - OSM-Canvas-Integ...

3.1 KiB
Raw Blame History

id title status assignee created_date updated_date labels dependencies priority
task-028 OSM Canvas Integration Foundation Done
@claude
2025-12-04 21:12 2025-12-04 21:44
feature
mapping
foundation
high

Description

Implement the foundational layer for rendering OpenStreetMap data on the tldraw canvas. This includes coordinate transformation (geographic ↔ canvas), tile rendering as canvas background, and basic interaction patterns.

Core components:

  • Geographic coordinate system (lat/lng to canvas x/y transforms)
  • OSM tile layer rendering (raster tiles as background)
  • Zoom level handling that respects geographic scale
  • Pan/zoom gestures that work with map context
  • Basic marker/shape placement with geographic coordinates
  • Vector tile support for interactive OSM elements

This is the foundation that task-024 (Route Planning) and other spatial features build upon.

Acceptance Criteria

  • #1 OSM raster tiles render as canvas background layer
  • #2 Coordinate transformation functions (geo ↔ canvas) working accurately
  • #3 Zoom levels map to appropriate tile zoom levels
  • #4 Pan/zoom gestures work smoothly with tile loading
  • #5 Shapes can be placed with lat/lng coordinates
  • #6 Basic MapLibre GL or Leaflet integration pattern established

Implementation Notes

Progress (2025-12-04)

Completed:

  • Reviewed existing open-mapping module scaffolding
  • Installed maplibre-gl npm package
  • Created comprehensive geo-canvas coordinate transformation utilities (geoTransform.ts)
    • GeoCanvasTransform class for bidirectional geo ↔ canvas transforms
    • Web Mercator projection support
    • Tile coordinate utilities
    • Haversine distance calculations

In Progress:

  • Wiring up MapLibre GL JS in useMapInstance hook
  • Creating MapShapeUtil for tldraw canvas integration

Additional Progress:

  • Fixed MapLibre attributionControl type issue
  • Created MapShapeUtil.tsx with full tldraw integration
  • Created MapTool.ts for placing map shapes
  • Registered MapShape and MapTool in Board.tsx
  • Map shape features:
    • Resizable map window
    • Interactive pan/zoom toggle
    • Location presets (NYC, London, Tokyo, SF, Paris)
    • Live coordinate display
    • Pin to view support
    • Tag system integration

Completion Summary:

  • All core OSM canvas integration foundation is complete
  • MapShape can be placed on canvas via MapTool
  • MapLibre GL JS renders OpenStreetMap tiles
  • Coordinate transforms enable geo ↔ canvas mapping
  • Ready for testing on dev server at localhost:5173

Files Created/Modified:

  • src/open-mapping/utils/geoTransform.ts (NEW)
  • src/open-mapping/hooks/useMapInstance.ts (UPDATED with MapLibre)
  • src/shapes/MapShapeUtil.tsx (NEW)
  • src/tools/MapTool.ts (NEW)
  • src/routes/Board.tsx (UPDATED with MapShape/MapTool)
  • package.json (added maplibre-gl)

Next Steps (task-024):

  • Add OSRM routing backend
  • Implement waypoint placement
  • Route calculation and display