From c0efc72f90668520a04d70356b794f92493a4ec2 Mon Sep 17 00:00:00 2001 From: Masashi Katsumata Date: Sun, 8 Nov 2026 00:17:19 -0800 Subject: [PATCH] Give polygons, circles and polylines separate zIndex bands Google compares shape zIndexes across kinds, and every kind passed the state's zIndex as is, so with equal zIndexes the shape added last was on top (a polygon added after a circle covered it). Shapes now use overlayStackZ (js-sdk-core): polygon < circle < polyline, zIndex within the band. 2D and 3D (Map3DElement) alike; the 3D circle's latitude-based default for a missing zIndex is replaced by the band. Rasters (overlayMapTypes), ground overlays and markers already sat in the shared order. Needs the js-sdk-core release with overlayStackZ. --- src/circle/GoogleMapCircleOverlayRenderer.ts | 7 ++++--- src/circle/GoogleMapCircleOverlayRenderer2D.ts | 5 +++-- src/polygon/GoogleMapPolygonOverlayRenderer.ts | 5 +++-- src/polygon/GoogleMapPolygonOverlayRenderer2D.ts | 5 +++-- src/polyline/GoogleMapPolylineOverlayRenderer.ts | 5 +++-- src/polyline/GoogleMapPolylineOverlayRenderer2D.ts | 5 +++-- 6 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/circle/GoogleMapCircleOverlayRenderer.ts b/src/circle/GoogleMapCircleOverlayRenderer.ts index 2f182d4..185470e 100644 --- a/src/circle/GoogleMapCircleOverlayRenderer.ts +++ b/src/circle/GoogleMapCircleOverlayRenderer.ts @@ -3,11 +3,12 @@ import { AbstractCircleOverlayRenderer, type CircleEntity, type CircleState, + overlayStackZ, } from '@mapconductor/js-sdk-core'; import { GoogleMapActualCircle } from '../GoogleMapTypeAlias'; import { GoogleMapViewHolder } from '../GoogleMapViewHolder'; import { loadLibrary } from '../LibraryLoader'; -import { buildCirclePath, calculateCircleZIndex } from '../overlay3d'; +import { buildCirclePath } from '../overlay3d'; export class GoogleMapCircleOverlayRenderer extends AbstractCircleOverlayRenderer< GoogleMapViewHolder, @@ -26,7 +27,7 @@ export class GoogleMapCircleOverlayRenderer extends AbstractCircleOverlayRendere strokeWidth: state.strokeWidth, fillColor: state.fillColor, geodesic: state.geodesic, - zIndex: state.zIndex ?? calculateCircleZIndex(state.center), + zIndex: overlayStackZ('circle', state.zIndex), altitudeMode: AltitudeMode.CLAMP_TO_GROUND, }); this.holder.map.append(circle); @@ -47,7 +48,7 @@ export class GoogleMapCircleOverlayRenderer extends AbstractCircleOverlayRendere circle.strokeWidth = current.state.strokeWidth; circle.fillColor = current.state.fillColor; circle.geodesic = current.state.geodesic; - circle.zIndex = current.state.zIndex ?? calculateCircleZIndex(current.state.center); + circle.zIndex = overlayStackZ('circle', current.state.zIndex); return circle; } diff --git a/src/circle/GoogleMapCircleOverlayRenderer2D.ts b/src/circle/GoogleMapCircleOverlayRenderer2D.ts index 981c412..0341c7b 100644 --- a/src/circle/GoogleMapCircleOverlayRenderer2D.ts +++ b/src/circle/GoogleMapCircleOverlayRenderer2D.ts @@ -5,6 +5,7 @@ import { closeRing, type CircleEntity, type CircleState, + overlayStackZ, } from '@mapconductor/js-sdk-core'; import { toGoogleMapFillStyle } from '../color'; import { geoPointToLatLng } from '../helpers'; @@ -32,7 +33,7 @@ export class GoogleMapCircleOverlayRenderer2D extends AbstractCircleOverlayRende strokeWeight: state.strokeWidth, fillColor: fill.color, fillOpacity: fill.opacity, - zIndex: state.zIndex, + zIndex: overlayStackZ('circle', state.zIndex), clickable: state.clickable, map: this.holder.map, }); @@ -54,7 +55,7 @@ export class GoogleMapCircleOverlayRenderer2D extends AbstractCircleOverlayRende strokeWeight: current.state.strokeWidth, fillColor: fill.color, fillOpacity: fill.opacity, - zIndex: current.state.zIndex, + zIndex: overlayStackZ('circle', current.state.zIndex), clickable: current.state.clickable, map: this.holder.map, }); diff --git a/src/polygon/GoogleMapPolygonOverlayRenderer.ts b/src/polygon/GoogleMapPolygonOverlayRenderer.ts index 5e6cff2..a6d4403 100644 --- a/src/polygon/GoogleMapPolygonOverlayRenderer.ts +++ b/src/polygon/GoogleMapPolygonOverlayRenderer.ts @@ -3,6 +3,7 @@ import { AbstractPolygonOverlayRenderer, type PolygonEntity, type PolygonState, + overlayStackZ, } from '@mapconductor/js-sdk-core'; import { GoogleMapActualPolygon } from '../GoogleMapTypeAlias'; import { GoogleMapViewHolder } from '../GoogleMapViewHolder'; @@ -38,7 +39,7 @@ export class GoogleMapPolygonOverlayRenderer extends AbstractPolygonOverlayRende strokeWidth: state.strokeWidth, fillColor: state.fillColor, geodesic: false, - zIndex: state.zIndex, + zIndex: overlayStackZ('polygon', state.zIndex), }); this.holder.map.append(polygon); return polygon; @@ -66,7 +67,7 @@ export class GoogleMapPolygonOverlayRenderer extends AbstractPolygonOverlayRende polygon.strokeWidth = current.state.strokeWidth; polygon.fillColor = current.state.fillColor; polygon.geodesic = false; - polygon.zIndex = current.state.zIndex; + polygon.zIndex = overlayStackZ('polygon', current.state.zIndex); return polygon; } diff --git a/src/polygon/GoogleMapPolygonOverlayRenderer2D.ts b/src/polygon/GoogleMapPolygonOverlayRenderer2D.ts index 28fdef9..de26968 100644 --- a/src/polygon/GoogleMapPolygonOverlayRenderer2D.ts +++ b/src/polygon/GoogleMapPolygonOverlayRenderer2D.ts @@ -5,6 +5,7 @@ import { type GeoPoint, type PolygonEntity, type PolygonState, + overlayStackZ, } from '@mapconductor/js-sdk-core'; import { toGoogleMapFillStyle } from '../color'; import { ensureClockwise, ensureCounterClockwise, geoPointToLatLng } from '../helpers'; @@ -28,7 +29,7 @@ export class GoogleMapPolygonOverlayRenderer2D extends AbstractPolygonOverlayRen fillColor: fill.color, fillOpacity: fill.opacity, geodesic: state.geodesic, - zIndex: state.zIndex, + zIndex: overlayStackZ('polygon', state.zIndex), clickable: state.clickable, map: this.holder.map, }); @@ -51,7 +52,7 @@ export class GoogleMapPolygonOverlayRenderer2D extends AbstractPolygonOverlayRen fillColor: fill.color, fillOpacity: fill.opacity, geodesic: current.state.geodesic, - zIndex: current.state.zIndex, + zIndex: overlayStackZ('polygon', current.state.zIndex), clickable: current.state.clickable, map: this.holder.map, }); diff --git a/src/polyline/GoogleMapPolylineOverlayRenderer.ts b/src/polyline/GoogleMapPolylineOverlayRenderer.ts index fe7fd05..6ca3864 100644 --- a/src/polyline/GoogleMapPolylineOverlayRenderer.ts +++ b/src/polyline/GoogleMapPolylineOverlayRenderer.ts @@ -3,6 +3,7 @@ import { AbstractPolylineOverlayRenderer, type PolylineEntity, type PolylineState, + overlayStackZ, } from '@mapconductor/js-sdk-core'; import { GoogleMapActualPolyline } from '../GoogleMapTypeAlias'; import { GoogleMapViewHolder } from '../GoogleMapViewHolder'; @@ -25,7 +26,7 @@ export class GoogleMapPolylineOverlayRenderer extends AbstractPolylineOverlayRen strokeColor: state.strokeColor, strokeWidth: state.strokeWidth, geodesic: state.geodesic, - zIndex: state.zIndex, + zIndex: overlayStackZ('polyline', state.zIndex), altitudeMode: AltitudeMode.CLAMP_TO_GROUND, }); this.holder.map.append(polyline); @@ -45,7 +46,7 @@ export class GoogleMapPolylineOverlayRenderer extends AbstractPolylineOverlayRen polyline.strokeColor = current.state.strokeColor; polyline.strokeWidth = current.state.strokeWidth; polyline.geodesic = current.state.geodesic; - polyline.zIndex = current.state.zIndex; + polyline.zIndex = overlayStackZ('polyline', current.state.zIndex); return polyline; } diff --git a/src/polyline/GoogleMapPolylineOverlayRenderer2D.ts b/src/polyline/GoogleMapPolylineOverlayRenderer2D.ts index 92412c5..38135a0 100644 --- a/src/polyline/GoogleMapPolylineOverlayRenderer2D.ts +++ b/src/polyline/GoogleMapPolylineOverlayRenderer2D.ts @@ -4,6 +4,7 @@ import { buildUnwrappedPolylinePath, type PolylineEntity, type PolylineState, + overlayStackZ, } from '@mapconductor/js-sdk-core'; import { geoPointToLatLng } from '../helpers'; import { GoogleMapActualPolyline } from '../GoogleMapTypeAlias'; @@ -23,7 +24,7 @@ export class GoogleMapPolylineOverlayRenderer2D extends AbstractPolylineOverlayR strokeColor: state.strokeColor, strokeWeight: state.strokeWidth, geodesic: state.geodesic, - zIndex: state.zIndex, + zIndex: overlayStackZ('polyline', state.zIndex), clickable: state.clickable, map: this.holder.map, }); @@ -43,7 +44,7 @@ export class GoogleMapPolylineOverlayRenderer2D extends AbstractPolylineOverlayR strokeColor: current.state.strokeColor, strokeWeight: current.state.strokeWidth, geodesic: current.state.geodesic, - zIndex: current.state.zIndex, + zIndex: overlayStackZ('polyline', current.state.zIndex), clickable: current.state.clickable, map: this.holder.map, });