Map visualizations

[ngoiyaeric]

I want to use glassmorphic UI as seen inside the Mapbox

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Leverage the existing .mapboxgl-ctrl-group CSS override hook in globals.css to apply glassmorphic properties to all native Mapbox controls without modifying the map component logic
• Update measurement label inline styles in mapbox-map.tsx to match the glassmorphic aesthetic, using backdrop-filter with reduced background opacity
• Follow established codebase patterns (header's backdrop-blur + translucent background + subtle border) to ensure visual consistency across the application
• Keep changes minimal and targeted—no new components, no structural changes, only visual styling updates

Implementation Steps

Phase 1: Glassmorphic Styling for Mapbox Native Controls

Apply frosted-glass visual treatment to Mapbox's native control groups (NavigationControl and MapboxDraw toolbar buttons) by extending the existing CSS overrides in the global stylesheet.

Task 1: Add Glassmorphic Properties to Control Group Selector

Extend the existing .mapboxgl-ctrl-group rule in app/globals.css to include glassmorphic visual properties that create the frosted-glass effect.

• Update the existing .mapboxgl-ctrl-group rule in app/globals.css to add backdrop-filter: blur(), semi-translucent background, subtle border with alpha, and soft box-shadow
• Follow the established pattern from header.tsx (backdrop-blur with ~95% opacity background and ~40% opacity border)
• Ensure the background uses a translucent white/light tone appropriate for overlaying satellite imagery
• Add border-radius override if the default Mapbox styling doesn't match the desired rounded appearance

Task 2: Style Individual Control Buttons

Add complementary styles for the individual buttons within control groups to maintain visual consistency and ensure proper hover/active states.

• Add CSS rules for .mapboxgl-ctrl-group button to set transparent backgrounds, appropriate text/icon colors for visibility against the glassmorphic container
• Add hover state styling (.mapboxgl-ctrl-group button:hover) with slightly elevated opacity or subtle background shift
• Target .mapbox-gl-draw_ctrl-draw-btn if MapboxDraw buttons require distinct treatment from NavigationControl buttons
• Ensure button icons (.mapboxgl-ctrl-icon) remain visible with proper contrast against the frosted background

🤖 Prompt for AI agents

Extend the existing `.mapboxgl-ctrl-group` CSS rules in `app/globals.css` to
apply a glassmorphic frosted-glass effect to all native Mapbox controls. Do not
add new components or modify map logic — only update CSS.

- In `app/globals.css`, find the existing `.mapboxgl-ctrl-group` rule and add
the following visual properties:
  - `backdrop-filter: blur(...)` to create the frosted-glass blur
- A semi-translucent white/light background (translucent enough to show the
satellite imagery beneath)
- A subtle border with alpha transparency, following the pattern from
`header.tsx` (~40% opacity border)
  - A soft `box-shadow`
- A `border-radius` override if the Mapbox default doesn't match the desired
rounded appearance
- Add a `.mapboxgl-ctrl-group button` rule with:
  - Transparent background
- Appropriate text/icon colors for visibility against the glassmorphic container
- Add a `.mapboxgl-ctrl-group button:hover` rule with a slightly elevated
opacity or subtle background shift
- If MapboxDraw buttons (`.mapbox-gl-draw_ctrl-draw-btn`) require distinct
treatment from NavigationControl buttons, add a targeted rule
- Add a `.mapboxgl-ctrl-icon` rule to ensure icons remain visible with proper
contrast against the frosted background

Phase 2: Glassmorphic Measurement Labels

Update the dynamically created measurement label elements (area and distance markers) to use glassmorphic styling consistent with the new control appearance.

Update Measurement Label Inline Styles

Modify the inline style assignments for area and distance label elements in mapbox-map.tsx to incorporate backdrop-filter and adjusted visual properties.

• Locate the measurement label creation code in components/map/mapbox-map.tsx (approximately lines 96–154) where el.style.* properties are set
• Add el.style.backdropFilter = 'blur(8px)' (or similar value) to enable the frosted-glass effect
• Adjust el.style.background from rgba(255, 255, 255, 0.8) to a more translucent value (e.g., rgba(255, 255, 255, 0.25)) to let the blur effect show through
• Add el.style.border with a subtle semi-transparent border (e.g., 1px solid rgba(255, 255, 255, 0.3))
• Consider adding -webkit-backdrop-filter for Safari compatibility alongside the standard property
• Maintain existing pointerEvents: 'none' and typography settings to preserve label functionality

🤖 Prompt for AI agents

Update the inline styles applied to measurement label DOM elements in
`components/map/mapbox-map.tsx` to give them a glassmorphic appearance
consistent with the styled native controls.

- Find the measurement label creation code at approximately lines 96–154 in
`components/map/mapbox-map.tsx` where `el.style.*` properties are assigned for
area and distance labels
- Apply the following style changes to the label elements:
- Add `el.style.backdropFilter = 'blur(8px)'` (or similar blur value) to enable
the frosted-glass effect
  - Add `el.style.webkitBackdropFilter = 'blur(8px)'` for Safari compatibility
- Change `el.style.background` from `rgba(255, 255, 255, 0.8)` to a more
translucent value such as `rgba(255, 255, 255, 0.25)` so the blur shows through
- Add `el.style.border = '1px solid rgba(255, 255, 255, 0.3)'` for a subtle
semi-transparent border
- Do NOT modify `el.style.pointerEvents` or any typography/layout settings —
preserve all existing label functionality

Research

The map visualization is built with mapbox-gl directly (imperative API, not react-map-gl) in components/map/mapbox-map.tsx. Native controls like NavigationControl and MapboxDraw are added programmatically via map.addControl(). Measurement labels (area/distance) are created as raw DOM elements with inline styles and attached via mapboxgl.Marker. The codebase already has glassmorphic patterns established in the header (backdrop-blur bg-background/95) and loading overlay (backdrop-blur-lg bg-background/80), plus a glassmorphic npm package used for image cards. The app/globals.css file already contains .mapboxgl-ctrl-group selectors with z-index and pointer-events overrides—these are the hook points for adding visual glassmorphic properties.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Extend the existing `.mapboxgl-ctrl-group` CSS rules in `app/globals.css` to
apply a glassmorphic frosted-glass effect to all native Mapbox controls. Do not
add new components or modify map logic — only update CSS.

- In `app/globals.css`, find the existing `.mapboxgl-ctrl-group` rule and add
the following visual properties:
  - `backdrop-filter: blur(...)` to create the frosted-glass blur
- A semi-translucent white/light background (translucent enough to show the
satellite imagery beneath)
- A subtle border with alpha transparency, following the pattern from
`header.tsx` (~40% opacity border)
  - A soft `box-shadow`
- A `border-radius` override if the Mapbox default doesn't match the desired
rounded appearance
- Add a `.mapboxgl-ctrl-group button` rule with:
  - Transparent background
- Appropriate text/icon colors for visibility against the glassmorphic container
- Add a `.mapboxgl-ctrl-group button:hover` rule with a slightly elevated
opacity or subtle background shift
- If MapboxDraw buttons (`.mapbox-gl-draw_ctrl-draw-btn`) require distinct
treatment from NavigationControl buttons, add a targeted rule
- Add a `.mapboxgl-ctrl-icon` rule to ensure icons remain visible with proper
contrast against the frosted background
===============================================================================

Task: 2

Update the inline styles applied to measurement label DOM elements in
`components/map/mapbox-map.tsx` to give them a glassmorphic appearance
consistent with the styled native controls.

- Find the measurement label creation code at approximately lines 96–154 in
`components/map/mapbox-map.tsx` where `el.style.*` properties are assigned for
area and distance labels
- Apply the following style changes to the label elements:
- Add `el.style.backdropFilter = 'blur(8px)'` (or similar blur value) to enable
the frosted-glass effect
  - Add `el.style.webkitBackdropFilter = 'blur(8px)'` for Safari compatibility
- Change `el.style.background` from `rgba(255, 255, 255, 0.8)` to a more
translucent value such as `rgba(255, 255, 255, 0.25)` so the blur shows through
- Add `el.style.border = '1px solid rgba(255, 255, 255, 0.3)'` for a subtle
semi-transparent border
- Do NOT modify `el.style.pointerEvents` or any typography/layout settings —
preserve all existing label functionality

💡 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!

[segundavid-dev]

Hiii @ngoiyaeric
Could I be assigned this issue to work on as my first contribution to QCX ?

[ngoiyaeric]

Sounds good, currently the visualizations post resolution search are random red dot pointers. You can start by making them more contextual.