@trackunit/react-map-adapter-google 0.0.11 → 0.0.13

package/index.cjs.js

@@ -180,6 +180,16 @@ class GoogleMapsLayerPort {
         this.interactionHandlers = new Set();
         this.backgroundClickHandlers = new Set();
         this.entityClickedInTick = false;
+        /**
+         * True for one tick after a point (marker/cluster) click is emitted. Symbol
+         * markers render on a full-viewport canvas overlay that is not a Google-native
+         * marker, so — unlike `AdvancedMarkerElement` DOM markers, whose `gmp-click`
+         * makes Google swallow the underlying map click — a single click on a symbol
+         * marker overlapping a polygon fires BOTH the canvas marker click and the
+         * polygon's geometric click. This flag lets the trailing shape click bail so
+         * the marker the user visibly clicked wins.
+         */
+        this.pointEntityClickedInTick = false;
         this.mapClickListener = null;
         // Tracked sources, keyed by source ID
         this.markerSources = new Map();
@@ -1969,6 +1979,9 @@ class GoogleMapsLayerPort {
         return new google.maps.Polygon({
             paths,
             map,
+            // Great-circle edges natively (no densification needed); honours the shape
+            // style flag, defaulting to true per the ShapeStyle.geodesic contract.
+            geodesic: style.geodesic ?? true,
             fillColor: style.fill ?? "rgba(0,0,0,0.1)",
             fillOpacity: style.fillOpacity ?? this.shapeStyleDefaults.polygon.fillOpacity,
             strokeColor: style.stroke ?? "#000000",
@@ -1982,6 +1995,9 @@ class GoogleMapsLayerPort {
         return new google.maps.Polyline({
             path,
             map,
+            // Match the polygon: native great-circle stroke so a tiled outline curves
+            // the same way as its densified fill instead of drawing a straight chord.
+            geodesic: style.geodesic ?? true,
             strokeColor: style.stroke ?? "#000000",
             strokeWeight: style.strokeWidth ?? this.shapeStyleDefaults.line.strokeWidth,
             strokeOpacity: style.strokeOpacity ?? this.shapeStyleDefaults.line.strokeOpacity,
@@ -1998,6 +2014,11 @@ class GoogleMapsLayerPort {
         return new google.maps.Polygon({
             paths,
             map,
+            // Intentionally NOT geodesic: this is clipped tiling geometry. Its original
+            // edges are already densified to great-circle arcs by the fill-tiling pass,
+            // while the clip cuts must stay as straight Web-Mercator segments so they
+            // land exactly on the covering shape's rendered edge. geodesic:true would
+            // re-curve those straight cuts and break the tiling seam.
             fillColor: style.fill ?? "rgba(0,0,0,0.1)",
             fillOpacity: style.fillOpacity ?? this.shapeStyleDefaults.polygon.fillOpacity,
             strokeWeight: 0,
@@ -2364,10 +2385,47 @@ class GoogleMapsLayerPort {
     /** Emit entity interaction event to all subscribed handlers */
     emitEntityInteraction(type, entity) {
         if (type === "click") {
+            // On Google Maps vector maps, a canvas OverlayView (used for symbol
+            // markers and clusters) emits its click event before the tile renderer
+            // dispatches geometric polygon events for the same user gesture. This is
+            // because canvas draw calls and their DOM-level pointer events are
+            // processed in the same microtask / paint frame, which completes before
+            // the vector-tile renderer's async polygon hit-test resolves. In
+            // practice this ordering has been consistent across all tested Google
+            // Maps JS API versions; however it is not contractually guaranteed by
+            // Google's public documentation.
+            //
+            // We exploit this ordering to let the point-entity click (marker /
+            // cluster) win when it spatially overlaps a shape: the marker sets
+            // `pointEntityClickedInTick` first, and the shape click that follows in
+            // the same tick is suppressed here.
+            //
+            // Fallback risk: if Google ever reverses the order, the shape click
+            // would arrive first and be emitted normally, then the marker click
+            // would also arrive and be emitted — resulting in two consecutive
+            // selection events for the same gesture. The user experience degrades to
+            // "shape is briefly selected, then replaced by the marker", which is
+            // recoverable with a second click. No data loss or error occurs.
+            //
+            // A position-based deduplication approach (comparing click coordinates
+            // within a pixel tolerance) would be more robust against ordering
+            // changes, but adds meaningful complexity: we would need to store the
+            // last click coordinate, handle clustered events whose centres may not
+            // match pixel-exactly, and choose a tolerance that works across zoom
+            // levels. The ordering-based guard is simpler and has been reliable
+            // in production.
+            if (entity.type === "shape" && this.pointEntityClickedInTick)
+                return;
             this.entityClickedInTick = true;
             setTimeout(() => {
                 this.entityClickedInTick = false;
             }, 0);
+            if (entity.type === "marker" || entity.type === "cluster") {
+                this.pointEntityClickedInTick = true;
+                setTimeout(() => {
+                    this.pointEntityClickedInTick = false;
+                }, 0);
+            }
         }
         const event = { type, entity };
         this.interactionHandlers.forEach(handler => handler(event));

package/index.esm.js

@@ -178,6 +178,16 @@ class GoogleMapsLayerPort {
         this.interactionHandlers = new Set();
         this.backgroundClickHandlers = new Set();
         this.entityClickedInTick = false;
+        /**
+         * True for one tick after a point (marker/cluster) click is emitted. Symbol
+         * markers render on a full-viewport canvas overlay that is not a Google-native
+         * marker, so — unlike `AdvancedMarkerElement` DOM markers, whose `gmp-click`
+         * makes Google swallow the underlying map click — a single click on a symbol
+         * marker overlapping a polygon fires BOTH the canvas marker click and the
+         * polygon's geometric click. This flag lets the trailing shape click bail so
+         * the marker the user visibly clicked wins.
+         */
+        this.pointEntityClickedInTick = false;
         this.mapClickListener = null;
         // Tracked sources, keyed by source ID
         this.markerSources = new Map();
@@ -1967,6 +1977,9 @@ class GoogleMapsLayerPort {
         return new google.maps.Polygon({
             paths,
             map,
+            // Great-circle edges natively (no densification needed); honours the shape
+            // style flag, defaulting to true per the ShapeStyle.geodesic contract.
+            geodesic: style.geodesic ?? true,
             fillColor: style.fill ?? "rgba(0,0,0,0.1)",
             fillOpacity: style.fillOpacity ?? this.shapeStyleDefaults.polygon.fillOpacity,
             strokeColor: style.stroke ?? "#000000",
@@ -1980,6 +1993,9 @@ class GoogleMapsLayerPort {
         return new google.maps.Polyline({
             path,
             map,
+            // Match the polygon: native great-circle stroke so a tiled outline curves
+            // the same way as its densified fill instead of drawing a straight chord.
+            geodesic: style.geodesic ?? true,
             strokeColor: style.stroke ?? "#000000",
             strokeWeight: style.strokeWidth ?? this.shapeStyleDefaults.line.strokeWidth,
             strokeOpacity: style.strokeOpacity ?? this.shapeStyleDefaults.line.strokeOpacity,
@@ -1996,6 +2012,11 @@ class GoogleMapsLayerPort {
         return new google.maps.Polygon({
             paths,
             map,
+            // Intentionally NOT geodesic: this is clipped tiling geometry. Its original
+            // edges are already densified to great-circle arcs by the fill-tiling pass,
+            // while the clip cuts must stay as straight Web-Mercator segments so they
+            // land exactly on the covering shape's rendered edge. geodesic:true would
+            // re-curve those straight cuts and break the tiling seam.
             fillColor: style.fill ?? "rgba(0,0,0,0.1)",
             fillOpacity: style.fillOpacity ?? this.shapeStyleDefaults.polygon.fillOpacity,
             strokeWeight: 0,
@@ -2362,10 +2383,47 @@ class GoogleMapsLayerPort {
     /** Emit entity interaction event to all subscribed handlers */
     emitEntityInteraction(type, entity) {
         if (type === "click") {
+            // On Google Maps vector maps, a canvas OverlayView (used for symbol
+            // markers and clusters) emits its click event before the tile renderer
+            // dispatches geometric polygon events for the same user gesture. This is
+            // because canvas draw calls and their DOM-level pointer events are
+            // processed in the same microtask / paint frame, which completes before
+            // the vector-tile renderer's async polygon hit-test resolves. In
+            // practice this ordering has been consistent across all tested Google
+            // Maps JS API versions; however it is not contractually guaranteed by
+            // Google's public documentation.
+            //
+            // We exploit this ordering to let the point-entity click (marker /
+            // cluster) win when it spatially overlaps a shape: the marker sets
+            // `pointEntityClickedInTick` first, and the shape click that follows in
+            // the same tick is suppressed here.
+            //
+            // Fallback risk: if Google ever reverses the order, the shape click
+            // would arrive first and be emitted normally, then the marker click
+            // would also arrive and be emitted — resulting in two consecutive
+            // selection events for the same gesture. The user experience degrades to
+            // "shape is briefly selected, then replaced by the marker", which is
+            // recoverable with a second click. No data loss or error occurs.
+            //
+            // A position-based deduplication approach (comparing click coordinates
+            // within a pixel tolerance) would be more robust against ordering
+            // changes, but adds meaningful complexity: we would need to store the
+            // last click coordinate, handle clustered events whose centres may not
+            // match pixel-exactly, and choose a tolerance that works across zoom
+            // levels. The ordering-based guard is simpler and has been reliable
+            // in production.
+            if (entity.type === "shape" && this.pointEntityClickedInTick)
+                return;
             this.entityClickedInTick = true;
             setTimeout(() => {
                 this.entityClickedInTick = false;
             }, 0);
+            if (entity.type === "marker" || entity.type === "cluster") {
+                this.pointEntityClickedInTick = true;
+                setTimeout(() => {
+                    this.pointEntityClickedInTick = false;
+                }, 0);
+            }
         }
         const event = { type, entity };
         this.interactionHandlers.forEach(handler => handler(event));

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@trackunit/react-map-adapter-google",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=24.x"
   },
   "dependencies": {
-    "@trackunit/react-map-adapter-shared": "0.0.24",
-    "@trackunit/react-map-color-utils": "0.0.9",
-    "@trackunit/geo-json-utils": "1.14.43",
+    "@trackunit/react-map-adapter-shared": "0.0.26",
+    "@trackunit/react-map-color-utils": "0.0.11",
+    "@trackunit/geo-json-utils": "1.14.45",
     "@googlemaps/markerclusterer": "^2.6.2",
     "@vis.gl/react-google-maps": "^1.7.1",
     "es-toolkit": "^1.39.10",

package/src/GoogleMapsLayerPort.d.ts

@@ -31,6 +31,16 @@ export declare class GoogleMapsLayerPort implements LayerPort {
     private readonly interactionHandlers;
     private readonly backgroundClickHandlers;
     private entityClickedInTick;
+    /**
+     * True for one tick after a point (marker/cluster) click is emitted. Symbol
+     * markers render on a full-viewport canvas overlay that is not a Google-native
+     * marker, so — unlike `AdvancedMarkerElement` DOM markers, whose `gmp-click`
+     * makes Google swallow the underlying map click — a single click on a symbol
+     * marker overlapping a polygon fires BOTH the canvas marker click and the
+     * polygon's geometric click. This flag lets the trailing shape click bail so
+     * the marker the user visibly clicked wins.
+     */
+    private pointEntityClickedInTick;
     private mapClickListener;
     private readonly markerSources;
     /** featureId → element, keyed by sourceId. Cleared when a source is removed. */