2026-04-14-1

apps/web/src/components/MapComponent.tsx

@@ -21,13 +21,17 @@ const MapComponent: React.FC<MapComponentProps> = ({
   useEffect(() => {
     if (!map.current) return;
 
-    // Toggle 3D Buildings
+    // Toggle 3D Buildings (now on Overture source)
     if (map.current.getLayer('building-3d')) {
       map.current.setLayoutProperty('building-3d', 'visibility', show3D ? 'visible' : 'none');
     }
+    // Toggle flat Overture footprint (show when 3D is off)
+    if (map.current.getLayer('overture-building-footprint')) {
+      map.current.setLayoutProperty('overture-building-footprint', 'visibility', show3D ? 'none' : 'visible');
+    }
 
     // Toggle POI Layers
-    const poiLayers = ['poi-icons', 'place-labels'];
+    const poiLayers = ['poi-icons', 'place-labels', 'overture-building-names'];
     poiLayers.forEach(layerId => {
       if (map.current!.getLayer(layerId)) {
         map.current!.setLayoutProperty(layerId, 'visibility', showPOIs ? 'visible' : 'none');
@@ -389,7 +393,7 @@ const MapComponent: React.FC<MapComponentProps> = ({
 
   return (
     <div ref={mapContainer} style={{ width: '100%', height: '100%', position: 'relative' }}>
-      {/* Intaleq Branding Watermark */}
+      {/* Intaleq Premium Branding Watermark */}
       <div 
         style={{ 
           position: 'absolute', 
@@ -398,25 +402,29 @@ const MapComponent: React.FC<MapComponentProps> = ({
           zIndex: 10, 
           display: 'flex', 
           alignItems: 'center',
-          backgroundColor: 'rgba(255, 255, 255, 0.7)',
-          padding: '4px 8px',
-          borderRadius: '4px',
+          background: 'rgba(255, 255, 255, 0.85)',
+          backdropFilter: 'blur(12px) saturate(180%)',
+          WebkitBackdropFilter: 'blur(12px) saturate(180%)',
+          padding: '6px 12px',
+          borderRadius: '10px',
           pointerEvents: 'none',
           userSelect: 'none',
-          gap: '6px'
+          gap: '8px',
+          boxShadow: '0 4px 16px rgba(0,0,0,0.08)',
+          border: '1px solid rgba(255,255,255,0.35)'
         }}
       >
         <img 
           src="/intaleq-logo.png" 
           alt="Intaleq" 
-          style={{ height: '16px', filter: 'drop-shadow(0 1px 1px rgba(0,0,0,0.1))' }} 
+          style={{ height: '18px', filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.1))' }} 
         />
         <span 
           style={{ 
             fontSize: '10px', 
-            fontWeight: 600, 
-            color: '#3c4043', 
-            letterSpacing: '0.02em',
+            fontWeight: 800, 
+            color: '#c0a048', 
+            letterSpacing: '0.8px',
             textTransform: 'uppercase'
           }}
         >