Map over lay

[ngoiyaeric]

There has to be a coordinate to placement as well as auto scale for the placed map.

Next most useful feature: Shadow & Sun Path Analysis
Since you already have:
✅ Floor plan placed on real satellite location
✅ Scale/orientation on the map
The natural next step is solar analysis overlay:
Show sun path arc for that specific GPS location
Animate shadow casting by time of day / season
Highlight which rooms get morning vs afternoon light
Flag rooms that are perpetually shaded or overheated
Why this is the right next feature:
The floor plan already shows a veranda, bedrooms, and living areas — orientation relative to sun is one of the most impactful design decisions an architect makes early on, and it's currently invisible in the tool.
With the lot position already georeferenced, you have everything needed — latitude/longitude is all a sun path algorithm requires.
After that, the logical sequence would be:
🌤️ Sun/shadow analysis ← next
🌧️ Prevailing wind & rainfall overlay — for ventilation and drainage planning
📐 Setback & zoning compliance checker — legal build boundaries
🏘️ Neighboring structure height import — see what actually blocks light

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Extend MapDataContext with floorPlanOverlay and solarAnalysis state objects, following the established pattern for shared map state
• Use Mapbox GL JS ImageSource with computed corner coordinates to render the floor plan, recalculating corners whenever center, scale, or rotation changes
• Implement scale calibration by having users specify a known real-world dimension, deriving meters-per-pixel scale
• Integrate the suncalc library for accurate sun position calculations based on lat/lng and date/time
• Project shadows as GeoJSON polygons using sun azimuth/altitude and configurable building height, rendered via the existing layer pattern

Design Choices

Design Choice 1: Floor plan placement approach

Options Considered:

1. 4-corner dragging: User drags each corner independently to warp the image onto the map
2. Center + scale + rotation: User places center point, then adjusts scale (via known dimension) and rotation
3. 2-point calibration: User places two known points on the floor plan and map, system derives transform

Chosen Option: 2

Rationale: Simpler implementation, natural for rectangular floor plans, and supports the "auto scale" requirement by deriving scale from a user-provided real-world dimension.

Design Choice 2: Shadow calculation approach

Options Considered:

1. 2D shadow projection using floor plan outline as building footprint with assumed/configurable height
2. Full 3D shadow rendering requiring building height data and complex geometry
3. Simple directional indicator showing sun direction without shadow polygons

Chosen Option: 1

Rationale: Achievable with suncalc azimuth/altitude data, renders as GeoJSON polygons, and provides meaningful results for single-building analysis. Building height can be a user input with a sensible default.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Floor Plan Overlay Foundation

Establish the data model, map rendering, and basic upload flow for placing a floor plan image on the map as a georeferenced overlay.

Task 1: Extend MapData with Floor Plan Overlay Type

Define the data structure for floor plan overlays and integrate it into the existing map state context.

• Add FloorPlanOverlay interface to components/map/map-data-context.tsx with fields: id, imageUrl, center (lat/lng), rotation (degrees), scale (meters per pixel), opacity, visible, and optional knownDimension for calibration
• Add floorPlanOverlay?: FloorPlanOverlay field to the MapData interface
• Update initial state and context setter to handle floor plan updates

Task 2: Implement Mapbox ImageSource Layer

Add the capability to render an image overlay using Mapbox GL JS ImageSource API.

• Create components/map/floor-plan-layer.tsx following the pattern established in geojson-layer.tsx
• Consume MapContext to access the map instance and MapDataContext to read floorPlanOverlay
• Implement useEffect that watches floorPlanOverlay and calls map.addSource() with type 'image' and computed corner coordinates
• Add a raster layer to render the image source with configurable opacity
• Implement coordinate calculation utility: given center, rotation, scale, and image dimensions, compute the 4 corners in [lng, lat] format (clockwise from top-left)
• Clean up source and layer on unmount or when overlay is removed

Task 3: Floor Plan Upload Component

Create the UI for users to upload or select a floor plan image.

• Create components/floor-plan-uploader.tsx as a modal or sidebar panel
• Implement file input accepting image types (PNG, JPG, SVG)
• On file selection, read as base64 data URL and create an Image object to capture width/height
• Initialize a new FloorPlanOverlay object with the image URL, current map center as initial placement, default rotation (0), and a default scale
• Update MapDataContext with the new overlay
• Include a preview thumbnail and basic metadata display

🤖 Prompt for AI agents

Implement the floor plan overlay foundation by establishing the data model, map
rendering layer, and upload UI.

**Task 1: Extend `components/map/map-data-context.tsx`**
- Define and export a new `FloorPlanOverlay` interface with fields: `id`
(string), `imageUrl` (string), `center` (lat/lng), `rotation` (degrees, number),
`scale` (meters per pixel, number), `opacity` (number), `visible` (boolean), and
optional `knownDimension` (for calibration)
- Add `floorPlanOverlay?: FloorPlanOverlay` to the existing `MapData` interface
- Update the initial state and context setter to handle floor plan overlay
updates

**Task 2: Create `components/map/floor-plan-layer.tsx`**
- Follow the same pattern as `geojson-layer.tsx` for dynamically adding/removing
map sources and layers
- Consume `MapContext` for the map instance and `MapDataContext` to read
`floorPlanOverlay`
- Use a `useEffect` that watches `floorPlanOverlay` and calls `map.addSource()`
with type `'image'` and computed corner coordinates
- Add a `raster` layer linked to the image source with configurable opacity from
`floorPlanOverlay.opacity`
- Implement a coordinate calculation utility function: given center, rotation,
scale, and image dimensions, compute the 4 corners in `[lng, lat]` format,
ordered clockwise from top-left
- Clean up the source and layer on unmount or when the overlay is removed from
context

**Task 3: Create `components/floor-plan-uploader.tsx`**
- Build as a modal or sidebar panel
- Include a file input accepting PNG, JPG, and SVG image types
- On file selection, read the file as a base64 data URL and create an `Image`
object to capture pixel width/height
- Initialize a new `FloorPlanOverlay` object with the image URL, current map
center as initial placement, default rotation of 0, and a sensible default scale
- Write the new overlay to `MapDataContext`
- Show a preview thumbnail and basic metadata (filename, dimensions)

Phase 2: Interactive Placement and Scaling

Enable users to interactively position, scale, and rotate the floor plan overlay on the map with precision controls.

Task 1: Placement Mode and Center Dragging

Allow users to reposition the floor plan by dragging or clicking on the map.

• Add FloorPlanPlacementMode to MapToggleEnum in components/map-toggle-context.tsx
• In components/map/mapbox-map.tsx, when in placement mode, attach a click handler that updates floorPlanOverlay.center to the clicked coordinates
• Alternatively, implement drag behavior: on mousedown on the overlay, track mouse movement and update center accordingly
• Trigger floor-plan-layer.tsx to recalculate corners and update the image source coordinates via map.getSource(id).setCoordinates()

Task 2: Scale Calibration with Known Dimension

Implement auto-scale by allowing users to specify a known real-world dimension.

• Add a calibration UI in components/floor-plan-uploader.tsx or a dedicated components/floor-plan-controls.tsx panel
• User workflow: click two points on the floor plan preview, enter the real-world distance between them (e.g., "10 meters")
• Calculate pixel distance between the two points using image coordinates
• Derive scale (meters per pixel) = real-world distance / pixel distance
• Update floorPlanOverlay.scale and knownDimension in context, triggering corner recalculation

Task 3: Rotation and Opacity Controls

Provide UI controls for adjusting floor plan rotation and transparency.

• Add rotation slider (0–360°) and opacity slider (0–100%) to components/floor-plan-controls.tsx
• On change, update floorPlanOverlay.rotation or floorPlanOverlay.opacity in MapDataContext
• In floor-plan-layer.tsx, update layer paint property for opacity via map.setPaintProperty()
• For rotation, recalculate corner coordinates using rotation transform around the center point

Task 4: Floor Plan Visibility Toggle and Removal

Allow users to temporarily hide or permanently remove the floor plan overlay.

• Add visibility toggle button that sets floorPlanOverlay.visible to false/true
• In floor-plan-layer.tsx, conditionally set layer visibility via map.setLayoutProperty(layerId, 'visibility', 'visible'/'none')
• Add remove button that clears floorPlanOverlay from context
• Ensure proper cleanup of map source and layer when removed

🤖 Prompt for AI agents

Implement interactive placement, scaling, rotation, and visibility controls for
the floor plan overlay.

**Task 1: Placement Mode — `components/map-toggle-context.tsx` and
`components/map/mapbox-map.tsx`**
- Add `FloorPlanPlacementMode` to `MapToggleEnum` in
`components/map-toggle-context.tsx`
- In `components/map/mapbox-map.tsx`, when `FloorPlanPlacementMode` is active,
attach a map click handler that reads the clicked `[lng, lat]` and updates
`floorPlanOverlay.center` in `MapDataContext`
- Optionally support drag: on mousedown on the overlay, track mouse movement and
update center accordingly
- After updating center, call `map.getSource(id).setCoordinates()` in
`floor-plan-layer.tsx` with freshly recalculated corners

**Task 2: Scale Calibration — `components/floor-plan-controls.tsx` (or
`components/floor-plan-uploader.tsx`)**
- Add a calibration UI where the user clicks two points on the floor plan
preview image
- Prompt the user to enter the real-world distance between those two points
(e.g., "10 meters")
- Calculate pixel distance between the two clicked image coordinates
- Derive `scale` (meters per pixel) = real-world distance / pixel distance
- Update `floorPlanOverlay.scale` and `knownDimension` in `MapDataContext`,
which will trigger corner recalculation in `floor-plan-layer.tsx`

**Task 3: Rotation and Opacity Controls — `components/floor-plan-controls.tsx`**
- Add a rotation slider (range 0–360°) and an opacity slider (range 0–100%)
- On rotation change, update `floorPlanOverlay.rotation` in context; in
`floor-plan-layer.tsx` recalculate corners using a rotation transform around the
center point
- On opacity change, update `floorPlanOverlay.opacity` in context; in
`floor-plan-layer.tsx` apply via `map.setPaintProperty(layerId,
'raster-opacity', value)`

**Task 4: Visibility Toggle and Removal — `components/floor-plan-controls.tsx`
and `floor-plan-layer.tsx`**
- Add a visibility toggle button that updates `floorPlanOverlay.visible` in
context
- In `floor-plan-layer.tsx`, respond to visibility changes with
`map.setLayoutProperty(layerId, 'visibility', 'visible' | 'none')`
- Add a remove button that clears `floorPlanOverlay` from `MapDataContext`
- Ensure the source and layer are properly removed from the map when
`floorPlanOverlay` is cleared

Phase 3: Sun Path and Shadow Analysis

Integrate solar position calculations and render sun path arcs and shadow projections based on the georeferenced floor plan location.

Task 1: Install and Integrate SunCalc Library

Add the suncalc library and create utilities for sun position calculations.

• Add suncalc package to package.json
• Create lib/utils/solar-utils.ts with functions:
  • getSunPosition(lat, lng, date): Returns azimuth (compass direction) and altitude (elevation angle) using suncalc
  • getSunTimes(lat, lng, date): Returns sunrise, sunset, solar noon, and other key times
  • getSunPathPoints(lat, lng, date, intervalMinutes): Returns array of sun positions throughout the day for path rendering

Task 2: Solar Analysis Data Model and Context

Extend the map state to track solar analysis settings and computed data.

• Add SolarAnalysis interface to components/map/map-data-context.tsx with fields: enabled, date, time (decimal hours), showSunPath, showShadows, animating, buildingHeight
• Add solarAnalysis?: SolarAnalysis to MapData interface
• Add sunPosition?: { azimuth: number; altitude: number } as computed state derived from analysis settings

Task 3: Sun Path Arc Visualization

Render the sun's path across the sky as an arc on the map for the selected date.

• Create components/map/sun-path-layer.tsx following the GeoJSON layer pattern
• Calculate sun path as a LineString GeoJSON feature using getSunPathPoints() projected onto the ground plane around the floor plan center
• Project 3D sun positions (azimuth + altitude) to 2D map coordinates at a fixed radius from center (e.g., 50–100 meters)
• Style the arc with a gradient from sunrise (warm color) through noon (yellow) to sunset (warm color)
• Add markers at sunrise, solar noon, and sunset positions with time labels
• Add a marker showing current sun position based on selected time

Task 4: Shadow Projection Calculation

Calculate shadow polygons cast by the floor plan building footprint based on sun position.

• Create lib/utils/shadow-utils.ts with function calculateShadowPolygon(buildingFootprint, sunAzimuth, sunAltitude, buildingHeight)
• Building footprint is derived from floor plan corners (the georeferenced boundary)
• Shadow length = buildingHeight / tan(sunAltitude) for each corner
• Project each corner in the direction opposite to sun azimuth by the shadow length
• Return a GeoJSON Polygon combining building footprint + projected shadow corners
• Handle edge case when sun is below horizon (no shadow)

Task 5: Shadow Layer Rendering

Display the calculated shadow as a semi-transparent overlay on the map.

• Create components/map/shadow-layer.tsx following the GeoJSON layer pattern
• Watch solarAnalysis and floorPlanOverlay in context
• When enabled, compute shadow polygon using calculateShadowPolygon() with current sun position
• Render as a fill layer with dark semi-transparent color (e.g., rgba(0, 0, 0, 0.3))
• Update shadow dynamically when time or date changes

Task 6: Solar Analysis Controls Panel

Create the UI for controlling date, time, and solar visualization options.

• Create components/solar-analysis-panel.tsx as a collapsible panel or modal
• Include date picker for selecting analysis date
• Include time slider (0–24 hours) with current time display
• Add play/pause button for time animation (increment time at interval, loop through day)
• Add toggles for sun path visibility and shadow visibility
• Add building height input (meters) with sensible default (e.g., 3m for single story)
• Display computed sunrise/sunset times and current sun altitude

Task 7: Room Lighting Indicators

Provide basic indication of which areas of the floor plan receive direct sunlight at the selected time.

• In shadow-layer.tsx or a new components/map/sunlight-layer.tsx, calculate intersection between floor plan bounds and shadow polygon
• Areas of floor plan NOT covered by shadow receive direct sunlight
• Render a semi-transparent yellow/warm overlay on sunlit portions of the floor plan
• Update dynamically with time slider to show how light moves across the floor plan
• Use @turf/turf difference and intersection operations for polygon math

🤖 Prompt for AI agents

Implement sun path and shadow analysis, integrating the suncalc library with map
rendering layers and a controls panel.

**Task 1: Install suncalc and create `lib/utils/solar-utils.ts`**
- Add `suncalc` to `package.json`
- Implement and export three functions:
- `getSunPosition(lat, lng, date)` — returns azimuth (compass direction) and
altitude (elevation angle) via suncalc
- `getSunTimes(lat, lng, date)` — returns sunrise, sunset, solar noon, and other
key times
- `getSunPathPoints(lat, lng, date, intervalMinutes)` — returns an array of sun
positions sampled throughout the day at the given interval

**Task 2: Extend `components/map/map-data-context.tsx`**
- Define and export a `SolarAnalysis` interface with fields: `enabled`
(boolean), `date` (Date), `time` (decimal hours, number), `showSunPath`
(boolean), `showShadows` (boolean), `animating` (boolean), `buildingHeight`
(number)
- Add `solarAnalysis?: SolarAnalysis` to `MapData` interface
- Add `sunPosition?: { azimuth: number; altitude: number }` as computed/derived
state driven by `solarAnalysis` settings

**Task 3: Create `components/map/sun-path-layer.tsx`**
- Follow the GeoJSON layer pattern from `geojson-layer.tsx`
- Build a LineString GeoJSON feature from `getSunPathPoints()`, projecting sun
positions (azimuth + altitude) to 2D map coordinates at a fixed radius (50–100
m) around the floor plan center
- Style the arc with a color gradient: warm color at sunrise → yellow at solar
noon → warm color at sunset
- Add map markers at sunrise, solar noon, and sunset with time labels
- Add a separate marker for the current sun position based on the selected time

**Task 4: Create `lib/utils/shadow-utils.ts`**
- Implement and export `calculateShadowPolygon(buildingFootprint, sunAzimuth,
sunAltitude, buildingHeight)`
- Derive building footprint from the georeferenced floor plan corners
- Compute shadow length per corner as `buildingHeight / tan(sunAltitude)`
- Project each corner in the direction opposite to sun azimuth by the shadow
length
- Return a GeoJSON Polygon merging the building footprint with the projected
shadow corners
- Return null or an empty geometry when the sun is below the horizon

**Task 5: Create `components/map/shadow-layer.tsx`**
- Follow the GeoJSON layer pattern
- Watch both `solarAnalysis` and `floorPlanOverlay` from context
- When enabled, call `calculateShadowPolygon()` with the current sun position
and render the result as a fill layer with color `rgba(0, 0, 0, 0.3)`
- Re-compute and update the layer whenever time or date changes

**Task 6: Create `components/solar-analysis-panel.tsx`**
- Build as a collapsible panel or modal
- Include: date picker, time slider (0–24 hours) with current time readout,
play/pause animation button (loops through the day), sun path visibility toggle,
shadow visibility toggle, building height number input (default 3 m)
- Display computed sunrise/sunset times and current sun altitude

**Task 7: Create `components/map/sunlight-layer.tsx` (or extend
`shadow-layer.tsx`)**
- Compute the intersection of the floor plan boundary polygon and the shadow
polygon using `@turf/turf` difference and intersection operations
- Areas of the floor plan NOT covered by shadow are considered sunlit
- Render a semi-transparent warm/yellow fill layer over the sunlit portions
- Update dynamically whenever the time slider changes

Research

The application uses Mapbox GL JS and Google Maps 3D as dual map backends, switched via a Zustand settings store. Map state flows through MapDataContext which holds targetPosition, cameraState, drawnFeatures, and markers. The existing geojson-layer.tsx component demonstrates the pattern for dynamically adding/removing map sources and layers. Currently, there is no image overlay capability, no floor plan support, and no solar analysis code. The earthengine.tsx file is empty. The @turf/turf library is available for geospatial calculations, and tz-lookup already provides timezone data from map coordinates—a foundation for time-based solar calculations.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Implement the floor plan overlay foundation by establishing the data model, map
rendering layer, and upload UI.

**Task 1: Extend `components/map/map-data-context.tsx`**
- Define and export a new `FloorPlanOverlay` interface with fields: `id`
(string), `imageUrl` (string), `center` (lat/lng), `rotation` (degrees, number),
`scale` (meters per pixel, number), `opacity` (number), `visible` (boolean), and
optional `knownDimension` (for calibration)
- Add `floorPlanOverlay?: FloorPlanOverlay` to the existing `MapData` interface
- Update the initial state and context setter to handle floor plan overlay
updates

**Task 2: Create `components/map/floor-plan-layer.tsx`**
- Follow the same pattern as `geojson-layer.tsx` for dynamically adding/removing
map sources and layers
- Consume `MapContext` for the map instance and `MapDataContext` to read
`floorPlanOverlay`
- Use a `useEffect` that watches `floorPlanOverlay` and calls `map.addSource()`
with type `'image'` and computed corner coordinates
- Add a `raster` layer linked to the image source with configurable opacity from
`floorPlanOverlay.opacity`
- Implement a coordinate calculation utility function: given center, rotation,
scale, and image dimensions, compute the 4 corners in `[lng, lat]` format,
ordered clockwise from top-left
- Clean up the source and layer on unmount or when the overlay is removed from
context

**Task 3: Create `components/floor-plan-uploader.tsx`**
- Build as a modal or sidebar panel
- Include a file input accepting PNG, JPG, and SVG image types
- On file selection, read the file as a base64 data URL and create an `Image`
object to capture pixel width/height
- Initialize a new `FloorPlanOverlay` object with the image URL, current map
center as initial placement, default rotation of 0, and a sensible default scale
- Write the new overlay to `MapDataContext`
- Show a preview thumbnail and basic metadata (filename, dimensions)
===============================================================================

Task: 2

Implement interactive placement, scaling, rotation, and visibility controls for
the floor plan overlay.

**Task 1: Placement Mode — `components/map-toggle-context.tsx` and
`components/map/mapbox-map.tsx`**
- Add `FloorPlanPlacementMode` to `MapToggleEnum` in
`components/map-toggle-context.tsx`
- In `components/map/mapbox-map.tsx`, when `FloorPlanPlacementMode` is active,
attach a map click handler that reads the clicked `[lng, lat]` and updates
`floorPlanOverlay.center` in `MapDataContext`
- Optionally support drag: on mousedown on the overlay, track mouse movement and
update center accordingly
- After updating center, call `map.getSource(id).setCoordinates()` in
`floor-plan-layer.tsx` with freshly recalculated corners

**Task 2: Scale Calibration — `components/floor-plan-controls.tsx` (or
`components/floor-plan-uploader.tsx`)**
- Add a calibration UI where the user clicks two points on the floor plan
preview image
- Prompt the user to enter the real-world distance between those two points
(e.g., "10 meters")
- Calculate pixel distance between the two clicked image coordinates
- Derive `scale` (meters per pixel) = real-world distance / pixel distance
- Update `floorPlanOverlay.scale` and `knownDimension` in `MapDataContext`,
which will trigger corner recalculation in `floor-plan-layer.tsx`

**Task 3: Rotation and Opacity Controls — `components/floor-plan-controls.tsx`**
- Add a rotation slider (range 0–360°) and an opacity slider (range 0–100%)
- On rotation change, update `floorPlanOverlay.rotation` in context; in
`floor-plan-layer.tsx` recalculate corners using a rotation transform around the
center point
- On opacity change, update `floorPlanOverlay.opacity` in context; in
`floor-plan-layer.tsx` apply via `map.setPaintProperty(layerId,
'raster-opacity', value)`

**Task 4: Visibility Toggle and Removal — `components/floor-plan-controls.tsx`
and `floor-plan-layer.tsx`**
- Add a visibility toggle button that updates `floorPlanOverlay.visible` in
context
- In `floor-plan-layer.tsx`, respond to visibility changes with
`map.setLayoutProperty(layerId, 'visibility', 'visible' | 'none')`
- Add a remove button that clears `floorPlanOverlay` from `MapDataContext`
- Ensure the source and layer are properly removed from the map when
`floorPlanOverlay` is cleared
===============================================================================

Task: 3

Implement sun path and shadow analysis, integrating the suncalc library with map
rendering layers and a controls panel.

**Task 1: Install suncalc and create `lib/utils/solar-utils.ts`**
- Add `suncalc` to `package.json`
- Implement and export three functions:
- `getSunPosition(lat, lng, date)` — returns azimuth (compass direction) and
altitude (elevation angle) via suncalc
- `getSunTimes(lat, lng, date)` — returns sunrise, sunset, solar noon, and other
key times
- `getSunPathPoints(lat, lng, date, intervalMinutes)` — returns an array of sun
positions sampled throughout the day at the given interval

**Task 2: Extend `components/map/map-data-context.tsx`**
- Define and export a `SolarAnalysis` interface with fields: `enabled`
(boolean), `date` (Date), `time` (decimal hours, number), `showSunPath`
(boolean), `showShadows` (boolean), `animating` (boolean), `buildingHeight`
(number)
- Add `solarAnalysis?: SolarAnalysis` to `MapData` interface
- Add `sunPosition?: { azimuth: number; altitude: number }` as computed/derived
state driven by `solarAnalysis` settings

**Task 3: Create `components/map/sun-path-layer.tsx`**
- Follow the GeoJSON layer pattern from `geojson-layer.tsx`
- Build a LineString GeoJSON feature from `getSunPathPoints()`, projecting sun
positions (azimuth + altitude) to 2D map coordinates at a fixed radius (50–100
m) around the floor plan center
- Style the arc with a color gradient: warm color at sunrise → yellow at solar
noon → warm color at sunset
- Add map markers at sunrise, solar noon, and sunset with time labels
- Add a separate marker for the current sun position based on the selected time

**Task 4: Create `lib/utils/shadow-utils.ts`**
- Implement and export `calculateShadowPolygon(buildingFootprint, sunAzimuth,
sunAltitude, buildingHeight)`
- Derive building footprint from the georeferenced floor plan corners
- Compute shadow length per corner as `buildingHeight / tan(sunAltitude)`
- Project each corner in the direction opposite to sun azimuth by the shadow
length
- Return a GeoJSON Polygon merging the building footprint with the projected
shadow corners
- Return null or an empty geometry when the sun is below the horizon

**Task 5: Create `components/map/shadow-layer.tsx`**
- Follow the GeoJSON layer pattern
- Watch both `solarAnalysis` and `floorPlanOverlay` from context
- When enabled, call `calculateShadowPolygon()` with the current sun position
and render the result as a fill layer with color `rgba(0, 0, 0, 0.3)`
- Re-compute and update the layer whenever time or date changes

**Task 6: Create `components/solar-analysis-panel.tsx`**
- Build as a collapsible panel or modal
- Include: date picker, time slider (0–24 hours) with current time readout,
play/pause animation button (loops through the day), sun path visibility toggle,
shadow visibility toggle, building height number input (default 3 m)
- Display computed sunrise/sunset times and current sun altitude

**Task 7: Create `components/map/sunlight-layer.tsx` (or extend
`shadow-layer.tsx`)**
- Compute the intersection of the floor plan boundary polygon and the shadow
polygon using `@turf/turf` difference and intersection operations
- Areas of the floor plan NOT covered by shadow are considered sunlit
- Render a semi-transparent warm/yellow fill layer over the sunlit portions
- Update dynamically whenever the time slider changes

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!