feat(Map): add hideAttribution prop to control attribution visibility

Add hideAttribution prop to all Map components to control the visibility
of Leaflet attribution control in the bottom-right corner.

Changes:
- Add hideAttribution?: boolean prop to MapViewProps (default: true)
- Update MapContent to apply conditional 'show-attribution' class
- Update Map.module.css with conditional attribution display rules
- Pass prop through Map, CompactMap, and FullscreenMap components
- Add documentation to Maps.stories.tsx Advanced Features section

Usage:
- hideAttribution={false} - Show attribution (licensing compliant)
- hideAttribution={true} - Hide attribution (default, backward compatible)

Future: Default will change to false (show) for licensing compliance.

Author: JakeLin

packages/ui/src/components/Map/CompactMap.tsx

@@ -75,6 +75,7 @@ export const CompactMap: React.FC<CompactMapProps> = ({
   isInspectorOpen,
   scrollWheelZoom,
   showPopup,
+  hideAttribution,
   loading = false,
   error = false,
   height = DEFAULT_HEIGHT,
@@ -111,6 +112,7 @@ export const CompactMap: React.FC<CompactMapProps> = ({
           isInspectorOpen={isInspectorOpen}
           scrollWheelZoom={scrollWheelZoom}
           showPopup={showPopup}
+          hideAttribution={hideAttribution}
           loading={loading}
           error={error}
           tileProvider={tileProvider}

packages/ui/src/components/Map/Map.module.css

@@ -177,7 +177,16 @@
   display: none !important;
 }
 
-/* Hide Leaflet attribution */
-:global(.leaflet-control-attribution) {
-  display: none !important;
+/* Hide Leaflet attribution by default */
+.mapContainer :global(.leaflet-control-attribution) {
+  display: none;
+}
+
+/* Show attribution when hideAttribution is false */
+.mapContainer:global(.show-attribution) :global(.leaflet-control-attribution) {
+  display: block !important;
+}
+
+:global(.show-attribution) .mapContainer :global(.leaflet-control-attribution) {
+  display: block !important;
 }

packages/ui/src/components/Map/Map.tsx

@@ -71,6 +71,7 @@ export const Map: React.FC<MapProps> = ({
   isInspectorOpen,
   scrollWheelZoom,
   showPopup,
+  hideAttribution,
   autoExpandOnCarouselClick = false,
   loading = false,
   error = false,
@@ -146,6 +147,7 @@ export const Map: React.FC<MapProps> = ({
     isInspectorOpen,
     scrollWheelZoom,
     showPopup,
+    hideAttribution,
     loading,
     error,
     tileProvider,

packages/ui/src/components/Map/MapContent.tsx

@@ -8,6 +8,7 @@ import { TILE_PROVIDER_PRESETS, type TileProviderConfig } from './tileProviders'
 import { Features } from '../Feature/Features';
 import { ThemeContext } from '../../providers/ThemeProvider';
 import type { ThemeContextValue } from '../../providers/ThemeProvider';
+import { cn } from '../../utils/cn';
 import styles from './Map.module.css';
 
 /**
@@ -418,12 +419,15 @@ export const MapContent: React.FC<MapViewProps> = ({
   isInspectorOpen,
   scrollWheelZoom = false,
   showPopup = true,
+  hideAttribution = true,
   tileProvider,
   tileApiKey,
 }) => {
-  const containerClassName = className
-    ? `${styles.mapContainer} ${className}`
-    : styles.mapContainer;
+  const containerClassName = cn(
+    styles.mapContainer,
+    !hideAttribution && 'show-attribution',
+    className
+  );
 
   // Resolve tile provider configuration
   const tileConfig = useMemo(

packages/ui/src/components/Map/MapView.tsx

@@ -135,6 +135,14 @@ export interface MapViewProps {
    */
   showPopup?: boolean;
 
+  /**
+   * Hide Leaflet attribution control.
+   * When true, hides the attribution text in bottom-right corner.
+   * Note: Attribution is required by most tile providers' terms of service.
+   * @default true (for backward compatibility, will change to false in future)
+   */
+  hideAttribution?: boolean;
+
   /**
    * Tile provider configuration.
    *

packages/ui/src/components/Map/Maps.stories.tsx

@@ -1017,6 +1017,51 @@ const handleMapToggle = (fullscreen: boolean) => {
               <code>{`<Map
   locations={locations}
   autoExpandOnCarouselClick={true}
+/>`}</code>
+            </pre>
+          </div>
+
+          {/* Attribution Control */}
+          <div
+            style={{
+              padding: '16px',
+              background: 'var(--ai-color-bg-secondary)',
+              borderRadius: '12px',
+              border: '1px solid var(--ai-color-border-default)',
+            }}
+          >
+            <h3 style={{ fontSize: '16px', marginBottom: '8px', fontWeight: 600 }}>
+              Attribution Control
+            </h3>
+            <p style={{ margin: '0 0 12px', fontSize: '14px', color: 'var(--ai-color-text-secondary)' }}>
+              Control the visibility of Leaflet attribution using the <code>hideAttribution</code> prop.
+              By default, attribution is hidden. Set to <code>false</code> to display tile provider
+              credits in the bottom-right corner.
+            </p>
+            <div style={{ fontSize: '13px', color: 'var(--ai-color-text-secondary)', marginBottom: '12px' }}>
+              <strong>Note:</strong> Attribution is required by most tile providers' terms of service.
+            </div>
+            <pre
+              style={{
+                margin: 0,
+                padding: '12px',
+                background: 'var(--ai-color-bg-tertiary)',
+                borderRadius: '6px',
+                fontSize: '12px',
+                lineHeight: '1.5',
+                fontFamily: 'Monaco, Menlo, monospace',
+              }}
+            >
+              <code>{`// Show attribution (licensing compliant)
+<Map
+  locations={locations}
+  hideAttribution={false}
+/>
+
+// Hide attribution (default)
+<Map
+  locations={locations}
+  hideAttribution={true}
 />`}</code>
             </pre>
           </div>