Commit Graph

1 Commits

Author SHA1 Message Date
fe3c572ad9 Add Geofence visualization layer on map
Implemented visual representation of geofences on the main map view:

**New Component:**
- GeofenceLayer.tsx - Renders active geofences as circles with:
  - Configurable opacity (15% fill, 80% border)
  - Color matching from geofence settings
  - Interactive popups showing zone details (name, device, radius, coordinates)
  - Auto-refresh every 30 seconds

**Map Integration:**
- Added toggle button to show/hide geofences (top-right corner)
- Purple button when active, white when hidden
- Only displays active geofences (is_active = 1)
- Geofences render below markers for better visibility

**Features:**
- Real-time sync with geofence management
- Responsive to geofence changes (color, radius, status)
- Clean visual hierarchy with location markers on top
- Hover/click popups for detailed zone information

Users can now visually see their geofence zones on the map and
understand the spatial relationship between device locations and zones.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 23:09:53 +00:00