feat(Map): add showPopup and scrollWheelZoom props for interaction control

Adds two new props to Map, MapView, and MapContent for better control
over map interactions:

showPopup:
- Controls whether popup bubbles appear on marker clicks
- Default: true (existing behavior preserved)
- Set to false when using external UI (Inspector, sidebars, modals)
- Prevents duplicate information and keeps map cleaner

scrollWheelZoom:
- Controls scroll wheel zoom behavior
- Default: false (uses custom pinch-to-zoom for embedded maps)
- Set to true for native Leaflet scroll zoom (best for fullscreen)

Implementation:
- Props threaded through Map → MapView → MapContent
- showPopup guards popup open/close logic in MapContent
- Conditional popup rendering based on showPopup flag
- Comprehensive JSDoc with usage guidance

Author: JakeLin

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

@@ -80,6 +80,8 @@ const CompactMapDoc: FC = () => {
   const [pinSelectedId, setPinSelectedId] = useState<string | undefined>(undefined);
   const [dotSelectedId, setDotSelectedId] = useState<string | undefined>(undefined);
   const [hybridSelectedId, setHybridSelectedId] = useState<string | undefined>(undefined);
+  const [withPopupSelectedId, setWithPopupSelectedId] = useState<string | undefined>(undefined);
+  const [withoutPopupSelectedId, setWithoutPopupSelectedId] = useState<string | undefined>(undefined);
   const locations = useMemo(() => sampleLocations, []);
 
   return (
@@ -542,7 +544,9 @@ const CompactMapDoc: FC = () => {
               With Popups (default)
             </h3>
             <CompactMap
-              locations={locations.slice(0, 2)}
+              locations={locations}
+              selectedId={withPopupSelectedId}
+              onLocationSelect={setWithPopupSelectedId}
               showPopup={true}
               height={CHATGPT_APP_HEIGHT}
             />
@@ -568,7 +572,9 @@ const CompactMapDoc: FC = () => {
               Without Popups
             </h3>
             <CompactMap
-              locations={locations.slice(0, 2)}
+              locations={locations}
+              selectedId={withoutPopupSelectedId}
+              onLocationSelect={setWithoutPopupSelectedId}
               showPopup={false}
               height={CHATGPT_APP_HEIGHT}
             />

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

@@ -65,6 +65,8 @@ export const CompactMap: React.FC<CompactMapProps> = ({
   markerVariant,
   renderMarker,
   isInspectorOpen,
+  scrollWheelZoom,
+  showPopup,
   loading = false,
   error = false,
   height = DEFAULT_HEIGHT,
@@ -96,6 +98,8 @@ export const CompactMap: React.FC<CompactMapProps> = ({
           markerVariant={markerVariant}
           renderMarker={renderMarker}
           isInspectorOpen={isInspectorOpen}
+          scrollWheelZoom={scrollWheelZoom}
+          showPopup={showPopup}
           loading={loading}
           error={error}
           className={cn(styles.mapView, mapClassName)}

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

@@ -60,6 +60,8 @@ export const Map: React.FC<MapProps> = ({
   markerVariant,
   renderMarker,
   isInspectorOpen,
+  scrollWheelZoom,
+  showPopup,
   loading = false,
   error = false,
   isFullscreen: controlledIsFullscreen,
@@ -117,6 +119,8 @@ export const Map: React.FC<MapProps> = ({
     markerVariant,
     renderMarker,
     isInspectorOpen,
+    scrollWheelZoom,
+    showPopup,
     loading,
     error,
   };

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

@@ -366,6 +366,7 @@ export const MapContent: React.FC<MapViewProps> = ({
   style,
   isInspectorOpen,
   scrollWheelZoom = false,
+  showPopup = true,
 }) => {
   const containerClassName = className
     ? `${styles.mapContainer} ${className}`
@@ -476,8 +477,10 @@ export const MapContent: React.FC<MapViewProps> = ({
     });
   }, [locations]);
 
-  // Open/close popups based on selectedId
+  // Open/close popups based on selectedId (only if showPopup is enabled)
   useEffect(() => {
+    if (!showPopup) return;
+
     // Close all popups
     markerRefs.current.forEach((marker) => {
       marker.closePopup();
@@ -490,7 +493,7 @@ export const MapContent: React.FC<MapViewProps> = ({
         marker.openPopup();
       }
     }
-  }, [selectedId]);
+  }, [selectedId, showPopup]);
 
   // Update marker icons when selection changes
   useEffect(() => {
@@ -555,19 +558,21 @@ export const MapContent: React.FC<MapViewProps> = ({
                 markerRefs.current.delete(location.id);
               }}
             >
-              <Popup>
-                <article className={styles.popup}>
-                  <div className={styles.popupContent}>
-                    <h3 className={styles.popupTitle}>{location.name}</h3>
-                    {location.subtitle && (
-                      <div className={styles.popupSubtitle}>{location.subtitle}</div>
-                    )}
-                    {location.features && location.features.length > 0 && (
-                      <Features items={location.features} iconSize={14} />
-                    )}
-                  </div>
-                </article>
-              </Popup>
+              {showPopup && (
+                <Popup>
+                  <article className={styles.popup}>
+                    <div className={styles.popupContent}>
+                      <h3 className={styles.popupTitle}>{location.name}</h3>
+                      {location.subtitle && (
+                        <div className={styles.popupSubtitle}>{location.subtitle}</div>
+                      )}
+                      {location.features && location.features.length > 0 && (
+                        <Features items={location.features} iconSize={14} />
+                      )}
+                    </div>
+                  </article>
+                </Popup>
+              )}
             </Marker>
           );
         })}

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

@@ -126,6 +126,14 @@ export interface MapViewProps {
    */
   scrollWheelZoom?: boolean;
 
+  /**
+   * Show popup bubbles when markers are clicked.
+   * When false, disables the Leaflet popup that appears on marker click.
+   * Useful when you want to handle marker selection with external UI (e.g., a sidebar).
+   * @default true
+   */
+  showPopup?: boolean;
+
   // Additional map configuration props can be introduced over time.
 }