@trackunit/react-map-adapter-google 0.0.127 → 0.0.128

package/index.cjs.js

@@ -1652,8 +1652,16 @@ class GoogleMapsLayerPort {
                 const canvas = this.canvas;
                 if (canvas === null)
                     return;
+                // Read viewport state from the map this overlay is CURRENTLY attached to.
+                // reconnectAllSources() re-parents the overlay onto recreated map instances
+                // (theme or renderingType changes); the closed-over `map` parameter keeps
+                // pointing at the old, detached instance, whose bounds no longer move —
+                // which froze canvas dots on screen until a data refresh rebuilt the overlay.
+                const attachedMap = this.getMap();
+                if (attachedMap === null || !("getBounds" in attachedMap))
+                    return;
                 const projection = this.getProjection();
-                const bounds = map.getBounds();
+                const bounds = attachedMap.getBounds();
                 const pad = CANVAS_VIEWPORT_PADDING;
                 const dpr = window.devicePixelRatio || 1;
                 let originX;
@@ -2570,6 +2578,17 @@ class GoogleMapsAdapterInstance {
         /** Throttled pointermove channel shared by map mousemove and shape overlay mousemove. */
         this.pointerMoveRaf = null;
         this.lastPointerPosition = null;
+        /**
+         * Traffic overlay, created lazily in syncTrafficLayer() because the google
+         * global only exists once the Maps JS API has loaded.
+         */
+        this.trafficLayer = null;
+        /**
+         * Rendering type of the currently connected map, as declared by the renderer
+         * at connect() time. The traffic layer only ever attaches to RASTER maps
+         * (ADR 0028: attaching it to a vector map silently degrades the renderer).
+         */
+        this.connectedRenderingType = "VECTOR";
         this.appearance = { ...reactMapAdapterShared.DEFAULT_MAP_APPEARANCE, theme: config.theme ?? "light" };
         this.layers = new GoogleMapsLayerPort();
         this.layers.setTheme(this.appearance.theme);
@@ -2598,7 +2617,7 @@ class GoogleMapsAdapterInstance {
      * On reconnection the previous center, zoom, and map type are restored so
      * the user doesn't see the viewport jump.
      */
-    connect(map) {
+    connect(map, renderingType = "VECTOR") {
         // React 18 StrictMode (dev) runs effect cleanups between the first and second mount, so
         // `useMap`'s destroy cleanup fires before the real connect. Allow `connect` to revive a
         // destroyed adapter so the dev cycle self-heals; production unmounts never re-mount.
@@ -2616,7 +2635,16 @@ class GoogleMapsAdapterInstance {
             this.removeGoogleEventListeners();
         }
         this.map = map;
+        this.connectedRenderingType = renderingType;
+        // Re-derive the status appearance from the tracked appearance: destroy() resets
+        // `state` to defaults while `this.appearance` keeps the real values, so a
+        // StrictMode destroy → revive would otherwise report stale defaults, and the
+        // appearance controls' sync-back would overwrite persisted preferences with them.
+        this.state = { ...this.state, appearance: this.appearance };
+        this.updateStatusCache();
         this.layers.connect(map);
+        // Theme changes recreate the google.maps.Map, so traffic must re-attach on every (re)connect
+        this.syncTrafficLayer();
         this.setupEventListeners();
         this.layers.setPointerMoveReporter(position => {
             this.reportPointerMove(position);
@@ -2666,6 +2694,16 @@ class GoogleMapsAdapterInstance {
     getTheme() {
         return this.appearance.theme;
     }
+    /**
+     * Returns the current traffic preference.
+     * Used by GoogleMapsRenderer (via useSyncExternalStore) to pick the map's
+     * renderingType: TrafficLayer silently forces a vector map into raster
+     * fallback and orphans OverlayViews, so the renderer instead recreates the
+     * map with an explicit RASTER renderingType while traffic is on.
+     */
+    getShowTraffic() {
+        return this.appearance.showTraffic === true;
+    }
     async setCenter(center) {
         const validCenter = geoJsonUtils.validatePosition(center, "[setCenter]");
         if (validCenter === null)
@@ -2785,6 +2823,15 @@ class GoogleMapsAdapterInstance {
             currentMap.setMapTypeId(this.mapTypeToGoogleMapTypeId(this.appearance.mapType, showRoads));
         }
     }
+    async setShowTraffic(showTraffic) {
+        if (this.appearance.showTraffic === showTraffic)
+            return;
+        this.appearance = { ...this.appearance, showTraffic };
+        this.state = { ...this.state, appearance: this.appearance };
+        this.updateStatusCache();
+        this.notifyStatusListeners();
+        this.syncTrafficLayer();
+    }
     on(event, handler) {
         let listeners = this.eventListeners.get(event);
         if (listeners === undefined) {
@@ -2820,6 +2867,8 @@ class GoogleMapsAdapterInstance {
         }
         this.isDestroyedFlag = true;
         this.removeGoogleEventListeners();
+        this.trafficLayer?.setMap(null);
+        this.trafficLayer = null;
         this.layers.setPointerMoveReporter(null);
         this.layers.destroy();
         // Clear our listeners
@@ -2835,6 +2884,30 @@ class GoogleMapsAdapterInstance {
     // ============================================================================
     // Private methods
     // ============================================================================
+    /**
+     * Attach or detach the traffic overlay so it matches the current preference
+     * and zoom. Runs on setShowTraffic, on (re)connect (theme changes recreate
+     * the google.maps.Map), and on zoom changes. Google natively suppresses
+     * traffic on plain satellite, so no mapType check is needed here.
+     */
+    syncTrafficLayer() {
+        const currentMap = this.map;
+        if (currentMap === null)
+            return;
+        const zoom = currentMap.getZoom() ?? this.state.zoom;
+        // TrafficLayer must never touch a vector map — it silently degrades the renderer
+        // (ADR 0028). When the preference turns on, the attached map is briefly still the
+        // vector instance the renderer is about to replace; skip it, and the connect()
+        // that follows the raster recreation attaches on the right map.
+        const isRasterMap = this.connectedRenderingType === "RASTER";
+        const targetMap = isRasterMap && this.appearance.showTraffic === true && zoom >= reactMapAdapterShared.TRAFFIC_MIN_ZOOM ? currentMap : null;
+        if (this.trafficLayer === null && targetMap === null)
+            return;
+        this.trafficLayer ?? (this.trafficLayer = new google.maps.TrafficLayer());
+        if (this.trafficLayer.getMap() !== targetMap) {
+            this.trafficLayer.setMap(targetMap);
+        }
+    }
     /** Detach all Google Maps native event listeners without clearing our own subscribers */
     removeGoogleEventListeners() {
         this.googleEventListeners.forEach(listener => {
@@ -2882,6 +2955,8 @@ class GoogleMapsAdapterInstance {
         // Wheel / control zoom also fires bounds_changed but not dragstart
         this.googleEventListeners.push(currentMap.addListener("zoom_changed", () => {
             markCameraActive();
+            // Traffic hides below TRAFFIC_MIN_ZOOM; cheap no-op unless the threshold is crossed
+            this.syncTrafficLayer();
         }));
         // Bounds changed (during move) — keep isIdle false until the idle event
         this.googleEventListeners.push(currentMap.addListener("bounds_changed", () => {
@@ -2987,7 +3062,7 @@ const createGoogleMapsInstance = (config) => {
  * Internal component that renders the actual Google Map
  * Must be inside APIProvider
  */
-const GoogleMapInternal = ({ adapterInstance, children, className, style, theme, mapInstanceId, initialViewport, restrictBounds, }) => {
+const GoogleMapInternal = ({ adapterInstance, children, className, style, theme, renderingType, mapInstanceId, initialViewport, restrictBounds, }) => {
     const map = reactGoogleMaps.useMap(mapInstanceId);
     const loadingStatus = reactGoogleMaps.useApiLoadingStatus();
     const restrictionBbox = react.useMemo(() => reactMapAdapterShared.getEffectiveRestrictBounds(restrictBounds), [restrictBounds]);
@@ -3015,9 +3090,11 @@ const GoogleMapInternal = ({ adapterInstance, children, className, style, theme,
             return;
         }
         if (map !== null && adapterInstance instanceof GoogleMapsAdapterInstance) {
-            adapterInstance.connect(map);
+            // Declare the rendering type so the adapter only ever attaches the traffic
+            // layer to RASTER maps (ADR 0028)
+            adapterInstance.connect(map, renderingType === reactGoogleMaps.RenderingType.RASTER ? "RASTER" : "VECTOR");
         }
-    }, [loadingStatus, map, adapterInstance]);
+    }, [loadingStatus, map, adapterInstance, renderingType]);
     react.useEffect(() => {
         if (loadingStatus !== reactGoogleMaps.APILoadingStatus.FAILED) {
             return;
@@ -3038,7 +3115,9 @@ const GoogleMapInternal = ({ adapterInstance, children, className, style, theme,
             },
         }
         : {};
-    return (jsxRuntime.jsx(reactGoogleMaps.Map, { className: className, clickableIcons: false, disableDefaultUI: true, draggableCursor: reactMapAdapterShared.MAP_CURSORS.default, gestureHandling: reactDeviceDetect.isDesktop ? "greedy" : "cooperative", id: mapInstanceId, isFractionalZoomEnabled: true, mapId: GOOGLE_MAP_IDS[theme], style: { width: "100%", height: "100%", ...style }, ...restrictionProps, ...mapProps, children: children }));
+    return (jsxRuntime.jsx(reactGoogleMaps.Map, { className: className, clickableIcons: false, disableDefaultUI: true, draggableCursor: reactMapAdapterShared.MAP_CURSORS.default, gestureHandling: reactDeviceDetect.isDesktop ? "greedy" : "cooperative", id: mapInstanceId, 
+        // Fractional zoom is a vector-renderer feature; raster snaps to integer zooms
+        isFractionalZoomEnabled: renderingType === reactGoogleMaps.RenderingType.VECTOR, mapId: GOOGLE_MAP_IDS[theme], renderingType: renderingType, style: { width: "100%", height: "100%", ...style }, ...restrictionProps, ...mapProps, children: children }));
 };
 /**
  * Google Maps Renderer component
@@ -3065,9 +3144,19 @@ const GoogleMapsRenderer = (props) => {
     // Subscribe to the adapter's current theme reactively.
     // When setTheme() updates currentTheme and notifies listeners, this
     // causes a re-render so the <GoogleMap> receives the updated mapId.
-    const subscribeToTheme = react.useCallback((onStoreChange) => adapterInstance.subscribeStatus(onStoreChange), [adapterInstance]);
+    const subscribeToStatus = react.useCallback((onStoreChange) => adapterInstance.subscribeStatus(onStoreChange), [adapterInstance]);
     const getThemeSnapshot = react.useCallback(() => adapterInstance.getTheme(), [adapterInstance]);
-    const currentTheme = react.useSyncExternalStore(subscribeToTheme, getThemeSnapshot, getThemeSnapshot);
+    const currentTheme = react.useSyncExternalStore(subscribeToStatus, getThemeSnapshot, getThemeSnapshot);
+    // Subscribe to the traffic preference the same way. TrafficLayer is not
+    // supported by the vector renderer: attaching it silently drops the map into
+    // raster fallback and orphans mounted OverlayViews (frozen markers). Instead
+    // of that implicit half-state, the map is recreated with an explicit
+    // renderingType — RASTER while traffic is on, VECTOR when it is off. vis.gl
+    // treats renderingType like mapId: a change creates a fresh google.maps.Map
+    // (camera preserved), and connect() re-attaches layers and traffic.
+    const getShowTrafficSnapshot = react.useCallback(() => adapterInstance.getShowTraffic(), [adapterInstance]);
+    const showTraffic = react.useSyncExternalStore(subscribeToStatus, getShowTrafficSnapshot, getShowTrafficSnapshot);
+    const renderingType = showTraffic ? reactGoogleMaps.RenderingType.RASTER : reactGoogleMaps.RenderingType.VECTOR;
     // "marker" is required for AdvancedMarkerElement used by the layer port.
     // using satisfies to avoid type errors from the library while maintaining type safety
     const libraries = react.useMemo(() => ["marker"], []);
@@ -3080,7 +3169,7 @@ const GoogleMapsRenderer = (props) => {
     // initializations that cause zombie google.maps.Map instances.
     const existingContext = react.useContext(reactGoogleMaps.APIProviderContext);
     const hasExternalProvider = existingContext !== null;
-    const internalContent = (jsxRuntime.jsx(GoogleMapInternal, { ...props, initialViewport: initialViewport, mapInstanceId: mapInstanceId, restrictBounds: restrictBounds, theme: currentTheme }));
+    const internalContent = (jsxRuntime.jsx(GoogleMapInternal, { ...props, initialViewport: initialViewport, mapInstanceId: mapInstanceId, renderingType: renderingType, restrictBounds: restrictBounds, theme: currentTheme }));
     if (hasExternalProvider) {
         return internalContent;
     }

package/index.esm.js

@@ -1,7 +1,7 @@
-import { canPatchAdaptiveMarker, canPatchAdaptiveViewport, canPatchMarkerInPlace, extractPointCoordinates, mergeAntimeridianFeatures, extractPolygonPaths, extractLineCoordinates, patchPortalDescriptors, collectFeatureIdSet, removeGoneIndexedMarkers, getAdaptiveDomFeatureIds, extractSourceData, buildAdaptiveDomRenderFn, resolveCircleSymbolDefaults, resolveSymbolDescriptor, buildAdaptiveSymbolStyleFn, createSymbolDotElement, anchorFromBottomCenter, createDefaultClusterElement, createClusterPinElement, fadeInElement, buildAdaptiveDomEntries, MAP_CURSORS, resolveSelectedStyle, resolveHoveredStyle, attachSafeAreaHoverListeners, INITIAL_MAP_STATE, DEFAULT_MAP_APPEARANCE, computeInitialState, getEffectiveRestrictBounds, cameraStateEquals, isEventOfType, DEFAULT_ZOOM, DEFAULT_CENTER, defineAdapter } from '@trackunit/react-map-adapter-shared';
+import { canPatchAdaptiveMarker, canPatchAdaptiveViewport, canPatchMarkerInPlace, extractPointCoordinates, mergeAntimeridianFeatures, extractPolygonPaths, extractLineCoordinates, patchPortalDescriptors, collectFeatureIdSet, removeGoneIndexedMarkers, getAdaptiveDomFeatureIds, extractSourceData, buildAdaptiveDomRenderFn, resolveCircleSymbolDefaults, resolveSymbolDescriptor, buildAdaptiveSymbolStyleFn, createSymbolDotElement, anchorFromBottomCenter, createDefaultClusterElement, createClusterPinElement, fadeInElement, buildAdaptiveDomEntries, MAP_CURSORS, resolveSelectedStyle, resolveHoveredStyle, attachSafeAreaHoverListeners, INITIAL_MAP_STATE, DEFAULT_MAP_APPEARANCE, computeInitialState, getEffectiveRestrictBounds, TRAFFIC_MIN_ZOOM, cameraStateEquals, isEventOfType, DEFAULT_ZOOM, DEFAULT_CENTER, defineAdapter } from '@trackunit/react-map-adapter-shared';
 export { googleMapCspDirectives } from '@trackunit/react-map-adapter-shared';
 import { jsx } from 'react/jsx-runtime';
-import { APIProvider, APIProviderContext, useMap, useApiLoadingStatus, APILoadingStatus, Map as Map$1 } from '@vis.gl/react-google-maps';
+import { APIProvider, RenderingType, APIProviderContext, useMap, useApiLoadingStatus, APILoadingStatus, Map as Map$1 } from '@vis.gl/react-google-maps';
 import { useMemo, useCallback, useSyncExternalStore, useId, useContext, useEffect } from 'react';
 import { validateBbox, validatePosition } from '@trackunit/geo-json-utils';
 import { MarkerClusterer, SuperClusterAlgorithm } from '@googlemaps/markerclusterer';
@@ -1651,8 +1651,16 @@ class GoogleMapsLayerPort {
                 const canvas = this.canvas;
                 if (canvas === null)
                     return;
+                // Read viewport state from the map this overlay is CURRENTLY attached to.
+                // reconnectAllSources() re-parents the overlay onto recreated map instances
+                // (theme or renderingType changes); the closed-over `map` parameter keeps
+                // pointing at the old, detached instance, whose bounds no longer move —
+                // which froze canvas dots on screen until a data refresh rebuilt the overlay.
+                const attachedMap = this.getMap();
+                if (attachedMap === null || !("getBounds" in attachedMap))
+                    return;
                 const projection = this.getProjection();
-                const bounds = map.getBounds();
+                const bounds = attachedMap.getBounds();
                 const pad = CANVAS_VIEWPORT_PADDING;
                 const dpr = window.devicePixelRatio || 1;
                 let originX;
@@ -2569,6 +2577,17 @@ class GoogleMapsAdapterInstance {
         /** Throttled pointermove channel shared by map mousemove and shape overlay mousemove. */
         this.pointerMoveRaf = null;
         this.lastPointerPosition = null;
+        /**
+         * Traffic overlay, created lazily in syncTrafficLayer() because the google
+         * global only exists once the Maps JS API has loaded.
+         */
+        this.trafficLayer = null;
+        /**
+         * Rendering type of the currently connected map, as declared by the renderer
+         * at connect() time. The traffic layer only ever attaches to RASTER maps
+         * (ADR 0028: attaching it to a vector map silently degrades the renderer).
+         */
+        this.connectedRenderingType = "VECTOR";
         this.appearance = { ...DEFAULT_MAP_APPEARANCE, theme: config.theme ?? "light" };
         this.layers = new GoogleMapsLayerPort();
         this.layers.setTheme(this.appearance.theme);
@@ -2597,7 +2616,7 @@ class GoogleMapsAdapterInstance {
      * On reconnection the previous center, zoom, and map type are restored so
      * the user doesn't see the viewport jump.
      */
-    connect(map) {
+    connect(map, renderingType = "VECTOR") {
         // React 18 StrictMode (dev) runs effect cleanups between the first and second mount, so
         // `useMap`'s destroy cleanup fires before the real connect. Allow `connect` to revive a
         // destroyed adapter so the dev cycle self-heals; production unmounts never re-mount.
@@ -2615,7 +2634,16 @@ class GoogleMapsAdapterInstance {
             this.removeGoogleEventListeners();
         }
         this.map = map;
+        this.connectedRenderingType = renderingType;
+        // Re-derive the status appearance from the tracked appearance: destroy() resets
+        // `state` to defaults while `this.appearance` keeps the real values, so a
+        // StrictMode destroy → revive would otherwise report stale defaults, and the
+        // appearance controls' sync-back would overwrite persisted preferences with them.
+        this.state = { ...this.state, appearance: this.appearance };
+        this.updateStatusCache();
         this.layers.connect(map);
+        // Theme changes recreate the google.maps.Map, so traffic must re-attach on every (re)connect
+        this.syncTrafficLayer();
         this.setupEventListeners();
         this.layers.setPointerMoveReporter(position => {
             this.reportPointerMove(position);
@@ -2665,6 +2693,16 @@ class GoogleMapsAdapterInstance {
     getTheme() {
         return this.appearance.theme;
     }
+    /**
+     * Returns the current traffic preference.
+     * Used by GoogleMapsRenderer (via useSyncExternalStore) to pick the map's
+     * renderingType: TrafficLayer silently forces a vector map into raster
+     * fallback and orphans OverlayViews, so the renderer instead recreates the
+     * map with an explicit RASTER renderingType while traffic is on.
+     */
+    getShowTraffic() {
+        return this.appearance.showTraffic === true;
+    }
     async setCenter(center) {
         const validCenter = validatePosition(center, "[setCenter]");
         if (validCenter === null)
@@ -2784,6 +2822,15 @@ class GoogleMapsAdapterInstance {
             currentMap.setMapTypeId(this.mapTypeToGoogleMapTypeId(this.appearance.mapType, showRoads));
         }
     }
+    async setShowTraffic(showTraffic) {
+        if (this.appearance.showTraffic === showTraffic)
+            return;
+        this.appearance = { ...this.appearance, showTraffic };
+        this.state = { ...this.state, appearance: this.appearance };
+        this.updateStatusCache();
+        this.notifyStatusListeners();
+        this.syncTrafficLayer();
+    }
     on(event, handler) {
         let listeners = this.eventListeners.get(event);
         if (listeners === undefined) {
@@ -2819,6 +2866,8 @@ class GoogleMapsAdapterInstance {
         }
         this.isDestroyedFlag = true;
         this.removeGoogleEventListeners();
+        this.trafficLayer?.setMap(null);
+        this.trafficLayer = null;
         this.layers.setPointerMoveReporter(null);
         this.layers.destroy();
         // Clear our listeners
@@ -2834,6 +2883,30 @@ class GoogleMapsAdapterInstance {
     // ============================================================================
     // Private methods
     // ============================================================================
+    /**
+     * Attach or detach the traffic overlay so it matches the current preference
+     * and zoom. Runs on setShowTraffic, on (re)connect (theme changes recreate
+     * the google.maps.Map), and on zoom changes. Google natively suppresses
+     * traffic on plain satellite, so no mapType check is needed here.
+     */
+    syncTrafficLayer() {
+        const currentMap = this.map;
+        if (currentMap === null)
+            return;
+        const zoom = currentMap.getZoom() ?? this.state.zoom;
+        // TrafficLayer must never touch a vector map — it silently degrades the renderer
+        // (ADR 0028). When the preference turns on, the attached map is briefly still the
+        // vector instance the renderer is about to replace; skip it, and the connect()
+        // that follows the raster recreation attaches on the right map.
+        const isRasterMap = this.connectedRenderingType === "RASTER";
+        const targetMap = isRasterMap && this.appearance.showTraffic === true && zoom >= TRAFFIC_MIN_ZOOM ? currentMap : null;
+        if (this.trafficLayer === null && targetMap === null)
+            return;
+        this.trafficLayer ?? (this.trafficLayer = new google.maps.TrafficLayer());
+        if (this.trafficLayer.getMap() !== targetMap) {
+            this.trafficLayer.setMap(targetMap);
+        }
+    }
     /** Detach all Google Maps native event listeners without clearing our own subscribers */
     removeGoogleEventListeners() {
         this.googleEventListeners.forEach(listener => {
@@ -2881,6 +2954,8 @@ class GoogleMapsAdapterInstance {
         // Wheel / control zoom also fires bounds_changed but not dragstart
         this.googleEventListeners.push(currentMap.addListener("zoom_changed", () => {
             markCameraActive();
+            // Traffic hides below TRAFFIC_MIN_ZOOM; cheap no-op unless the threshold is crossed
+            this.syncTrafficLayer();
         }));
         // Bounds changed (during move) — keep isIdle false until the idle event
         this.googleEventListeners.push(currentMap.addListener("bounds_changed", () => {
@@ -2986,7 +3061,7 @@ const createGoogleMapsInstance = (config) => {
  * Internal component that renders the actual Google Map
  * Must be inside APIProvider
  */
-const GoogleMapInternal = ({ adapterInstance, children, className, style, theme, mapInstanceId, initialViewport, restrictBounds, }) => {
+const GoogleMapInternal = ({ adapterInstance, children, className, style, theme, renderingType, mapInstanceId, initialViewport, restrictBounds, }) => {
     const map = useMap(mapInstanceId);
     const loadingStatus = useApiLoadingStatus();
     const restrictionBbox = useMemo(() => getEffectiveRestrictBounds(restrictBounds), [restrictBounds]);
@@ -3014,9 +3089,11 @@ const GoogleMapInternal = ({ adapterInstance, children, className, style, theme,
             return;
         }
         if (map !== null && adapterInstance instanceof GoogleMapsAdapterInstance) {
-            adapterInstance.connect(map);
+            // Declare the rendering type so the adapter only ever attaches the traffic
+            // layer to RASTER maps (ADR 0028)
+            adapterInstance.connect(map, renderingType === RenderingType.RASTER ? "RASTER" : "VECTOR");
         }
-    }, [loadingStatus, map, adapterInstance]);
+    }, [loadingStatus, map, adapterInstance, renderingType]);
     useEffect(() => {
         if (loadingStatus !== APILoadingStatus.FAILED) {
             return;
@@ -3037,7 +3114,9 @@ const GoogleMapInternal = ({ adapterInstance, children, className, style, theme,
             },
         }
         : {};
-    return (jsx(Map$1, { className: className, clickableIcons: false, disableDefaultUI: true, draggableCursor: MAP_CURSORS.default, gestureHandling: isDesktop ? "greedy" : "cooperative", id: mapInstanceId, isFractionalZoomEnabled: true, mapId: GOOGLE_MAP_IDS[theme], style: { width: "100%", height: "100%", ...style }, ...restrictionProps, ...mapProps, children: children }));
+    return (jsx(Map$1, { className: className, clickableIcons: false, disableDefaultUI: true, draggableCursor: MAP_CURSORS.default, gestureHandling: isDesktop ? "greedy" : "cooperative", id: mapInstanceId, 
+        // Fractional zoom is a vector-renderer feature; raster snaps to integer zooms
+        isFractionalZoomEnabled: renderingType === RenderingType.VECTOR, mapId: GOOGLE_MAP_IDS[theme], renderingType: renderingType, style: { width: "100%", height: "100%", ...style }, ...restrictionProps, ...mapProps, children: children }));
 };
 /**
  * Google Maps Renderer component
@@ -3064,9 +3143,19 @@ const GoogleMapsRenderer = (props) => {
     // Subscribe to the adapter's current theme reactively.
     // When setTheme() updates currentTheme and notifies listeners, this
     // causes a re-render so the <GoogleMap> receives the updated mapId.
-    const subscribeToTheme = useCallback((onStoreChange) => adapterInstance.subscribeStatus(onStoreChange), [adapterInstance]);
+    const subscribeToStatus = useCallback((onStoreChange) => adapterInstance.subscribeStatus(onStoreChange), [adapterInstance]);
     const getThemeSnapshot = useCallback(() => adapterInstance.getTheme(), [adapterInstance]);
-    const currentTheme = useSyncExternalStore(subscribeToTheme, getThemeSnapshot, getThemeSnapshot);
+    const currentTheme = useSyncExternalStore(subscribeToStatus, getThemeSnapshot, getThemeSnapshot);
+    // Subscribe to the traffic preference the same way. TrafficLayer is not
+    // supported by the vector renderer: attaching it silently drops the map into
+    // raster fallback and orphans mounted OverlayViews (frozen markers). Instead
+    // of that implicit half-state, the map is recreated with an explicit
+    // renderingType — RASTER while traffic is on, VECTOR when it is off. vis.gl
+    // treats renderingType like mapId: a change creates a fresh google.maps.Map
+    // (camera preserved), and connect() re-attaches layers and traffic.
+    const getShowTrafficSnapshot = useCallback(() => adapterInstance.getShowTraffic(), [adapterInstance]);
+    const showTraffic = useSyncExternalStore(subscribeToStatus, getShowTrafficSnapshot, getShowTrafficSnapshot);
+    const renderingType = showTraffic ? RenderingType.RASTER : RenderingType.VECTOR;
     // "marker" is required for AdvancedMarkerElement used by the layer port.
     // using satisfies to avoid type errors from the library while maintaining type safety
     const libraries = useMemo(() => ["marker"], []);
@@ -3079,7 +3168,7 @@ const GoogleMapsRenderer = (props) => {
     // initializations that cause zombie google.maps.Map instances.
     const existingContext = useContext(APIProviderContext);
     const hasExternalProvider = existingContext !== null;
-    const internalContent = (jsx(GoogleMapInternal, { ...props, initialViewport: initialViewport, mapInstanceId: mapInstanceId, restrictBounds: restrictBounds, theme: currentTheme }));
+    const internalContent = (jsx(GoogleMapInternal, { ...props, initialViewport: initialViewport, mapInstanceId: mapInstanceId, renderingType: renderingType, restrictBounds: restrictBounds, theme: currentTheme }));
     if (hasExternalProvider) {
         return internalContent;
     }

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@trackunit/react-map-adapter-google",
-  "version": "0.0.127",
+  "version": "0.0.128",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-map-adapter-shared": "0.0.138",
-    "@trackunit/react-map-color-utils": "0.0.113",
-    "@trackunit/geo-json-utils": "1.15.53",
+    "@trackunit/react-map-adapter-shared": "0.0.139",
+    "@trackunit/react-map-color-utils": "0.0.114",
+    "@trackunit/geo-json-utils": "1.15.54",
     "@googlemaps/markerclusterer": "^2.6.2",
     "@vis.gl/react-google-maps": "^1.7.1",
     "es-toolkit": "^1.39.10",

package/src/GoogleMapsAdapterInstance.d.ts

@@ -35,6 +35,17 @@ export declare class GoogleMapsAdapterInstance implements AdapterInstance {
     private lastPointerPosition;
     /** Unified appearance state — theme, mapType, and showRoads in one place */
     private appearance;
+    /**
+     * Traffic overlay, created lazily in syncTrafficLayer() because the google
+     * global only exists once the Maps JS API has loaded.
+     */
+    private trafficLayer;
+    /**
+     * Rendering type of the currently connected map, as declared by the renderer
+     * at connect() time. The traffic layer only ever attaches to RASTER maps
+     * (ADR 0028: attaching it to a vector map silently degrades the renderer).
+     */
+    private connectedRenderingType;
     constructor(config: GoogleMapsConfig);
     /**
      * Connect to a Google Maps instance - called by GoogleMapsRenderer.
@@ -44,7 +55,7 @@ export declare class GoogleMapsAdapterInstance implements AdapterInstance {
      * On reconnection the previous center, zoom, and map type are restored so
      * the user doesn't see the viewport jump.
      */
-    connect(map: google.maps.Map): void;
+    connect(map: google.maps.Map, renderingType?: "RASTER" | "VECTOR"): void;
     getConfig(): GoogleMapsConfig;
     getCameraState(): CameraState;
     getStatus(): MapStatus;
@@ -56,6 +67,14 @@ export declare class GoogleMapsAdapterInstance implements AdapterInstance {
      * update the mapId prop on the <GoogleMap> component.
      */
     getTheme(): MapTheme;
+    /**
+     * Returns the current traffic preference.
+     * Used by GoogleMapsRenderer (via useSyncExternalStore) to pick the map's
+     * renderingType: TrafficLayer silently forces a vector map into raster
+     * fallback and orphans OverlayViews, so the renderer instead recreates the
+     * map with an explicit RASTER renderingType while traffic is on.
+     */
+    getShowTraffic(): boolean;
     setCenter(center: GeoJsonPosition): Promise<void>;
     setZoom(zoomLevel: number): Promise<void>;
     zoomBy(delta: number): Promise<void>;
@@ -65,9 +84,17 @@ export declare class GoogleMapsAdapterInstance implements AdapterInstance {
     setMapType(type: MapType): Promise<void>;
     setTheme(theme: MapTheme): Promise<void>;
     setShowRoads(showRoads: boolean): Promise<void>;
+    setShowTraffic(showTraffic: boolean): Promise<void>;
     on<TEventType extends MapEvent["type"]>(event: TEventType, handler: MapEventHandler<TEventType>): () => void;
     notifyInitializationFailed(): void;
     destroy(): void;
+    /**
+     * Attach or detach the traffic overlay so it matches the current preference
+     * and zoom. Runs on setShowTraffic, on (re)connect (theme changes recreate
+     * the google.maps.Map), and on zoom changes. Google natively suppresses
+     * traffic on plain satellite, so no mapType check is needed here.
+     */
+    private syncTrafficLayer;
     /** Detach all Google Maps native event listeners without clearing our own subscribers */
     private removeGoogleEventListeners;
     /** Emit a throttled pointermove event (map canvas + shape overlays). */