US-05: Interactive Map with Draggable Pins (MapContainer.jsx) #5

New issue

Closed

opened 2026-09-23 17:42:58 +00:00 by gabogg · 2 comments

gabogg commented

2026-09-23 17:42:58 +00:00

Owner

User Story

As command leadership, I need to visualize the exact location of each deployed officer on the shopping mall floor plan using interactive draggable pins.

Acceptance Criteria

Shopping mall base floor plan rendered on a responsive canvas.
Draggable markers using native mouse drag-and-drop events without external heavy libraries.
Coordinates stored as relative percentages (, ) with clamping.
Visual distinction and color coding by category (purple for Gamas, red for Red Points, green for Parking).
Floating preview box showing shift map with smooth zoom expansion on hover.

## User Story As command leadership, I need to visualize the exact location of each deployed officer on the shopping mall floor plan using interactive draggable pins. ## Acceptance Criteria - [ ] Shopping mall base floor plan rendered on a responsive canvas. - [ ] Draggable markers using native mouse drag-and-drop events without external heavy libraries. - [ ] Coordinates stored as relative percentages (, ) with clamping. - [ ] Visual distinction and color coding by category (purple for Gamas, red for Red Points, green for Parking). - [ ] Floating preview box showing shift map with smooth zoom expansion on hover.

gabogg changed title from ~~US-05: Mapa Interactivo con Marcadores Draggable (MapContainer.jsx)~~ to US-05: Interactive Map with Draggable Pins (MapContainer.jsx)

2026-09-23 17:46:14 +00:00

gabogg added the

ready-for-agent

mvp

frontend

labels

2026-09-23 18:10:27 +00:00

gabogg referenced this issue

2026-09-23 22:35:30 +00:00

feat(ui): implement interactive map with draggable pins and distribution summary cards (US-05, US-06) #14

gabogg commented

2026-09-23 22:35:36 +00:00