maplibre-gl 2.0.3 → 2.1.1

package/src/style/style_layer/symbol_style_layer.ts

@@ -185,4 +185,23 @@ class SymbolStyleLayer extends StyleLayer {
     }
 }
 
+export type OverlapMode = 'never' | 'always' | 'cooperative';
+
+export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, overlapProp: 'icon-overlap', allowOverlapProp: 'icon-allow-overlap'): OverlapMode;
+export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, overlapProp: 'text-overlap', allowOverlapProp: 'text-allow-overlap'): OverlapMode;
+export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, overlapProp: 'icon-overlap' | 'text-overlap', allowOverlapProp: 'icon-allow-overlap' | 'text-allow-overlap'): OverlapMode {
+    let result: OverlapMode = 'never';
+    const overlap = layout.get(overlapProp);
+
+    if (overlap) {
+        // if -overlap is set, use it
+        result = overlap;
+    } else if (layout.get(allowOverlapProp)) {
+        // fall back to -allow-overlap, with false='never', true='always'
+        result = 'always';
+    }
+
+    return result;
+}
+
 export default SymbolStyleLayer;

package/src/style/style_layer/symbol_style_layer_properties.ts

@@ -32,6 +32,7 @@ export type SymbolLayoutProps = {
     "symbol-sort-key": DataDrivenProperty<number>,
     "symbol-z-order": DataConstantProperty<"auto" | "viewport-y" | "source">,
     "icon-allow-overlap": DataConstantProperty<boolean>,
+    "icon-overlap": DataConstantProperty<"never" | "always" | "cooperative">,
     "icon-ignore-placement": DataConstantProperty<boolean>,
     "icon-optional": DataConstantProperty<boolean>,
     "icon-rotation-alignment": DataConstantProperty<"map" | "viewport" | "auto">,
@@ -65,6 +66,7 @@ export type SymbolLayoutProps = {
     "text-transform": DataDrivenProperty<"none" | "uppercase" | "lowercase">,
     "text-offset": DataDrivenProperty<[number, number]>,
     "text-allow-overlap": DataConstantProperty<boolean>,
+    "text-overlap": DataConstantProperty<"never" | "always" | "cooperative">,
     "text-ignore-placement": DataConstantProperty<boolean>,
     "text-optional": DataConstantProperty<boolean>,
 };
@@ -76,6 +78,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "symbol-sort-key": PossiblyEvaluatedPropertyValue<number>,
     "symbol-z-order": "auto" | "viewport-y" | "source",
     "icon-allow-overlap": boolean,
+    "icon-overlap": "never" | "always" | "cooperative",
     "icon-ignore-placement": boolean,
     "icon-optional": boolean,
     "icon-rotation-alignment": "map" | "viewport" | "auto",
@@ -109,6 +112,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "text-transform": PossiblyEvaluatedPropertyValue<"none" | "uppercase" | "lowercase">,
     "text-offset": PossiblyEvaluatedPropertyValue<[number, number]>,
     "text-allow-overlap": boolean,
+    "text-overlap": "never" | "always" | "cooperative",
     "text-ignore-placement": boolean,
     "text-optional": boolean,
 };
@@ -120,6 +124,7 @@ const layout: Properties<SymbolLayoutProps> = new Properties({
     "symbol-sort-key": new DataDrivenProperty(styleSpec["layout_symbol"]["symbol-sort-key"] as any as StylePropertySpecification),
     "symbol-z-order": new DataConstantProperty(styleSpec["layout_symbol"]["symbol-z-order"] as any as StylePropertySpecification),
     "icon-allow-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["icon-allow-overlap"] as any as StylePropertySpecification),
+    "icon-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["icon-overlap"] as any as StylePropertySpecification),
     "icon-ignore-placement": new DataConstantProperty(styleSpec["layout_symbol"]["icon-ignore-placement"] as any as StylePropertySpecification),
     "icon-optional": new DataConstantProperty(styleSpec["layout_symbol"]["icon-optional"] as any as StylePropertySpecification),
     "icon-rotation-alignment": new DataConstantProperty(styleSpec["layout_symbol"]["icon-rotation-alignment"] as any as StylePropertySpecification),
@@ -153,6 +158,7 @@ const layout: Properties<SymbolLayoutProps> = new Properties({
     "text-transform": new DataDrivenProperty(styleSpec["layout_symbol"]["text-transform"] as any as StylePropertySpecification),
     "text-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["text-offset"] as any as StylePropertySpecification),
     "text-allow-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["text-allow-overlap"] as any as StylePropertySpecification),
+    "text-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["text-overlap"] as any as StylePropertySpecification),
     "text-ignore-placement": new DataConstantProperty(styleSpec["layout_symbol"]["text-ignore-placement"] as any as StylePropertySpecification),
     "text-optional": new DataConstantProperty(styleSpec["layout_symbol"]["text-optional"] as any as StylePropertySpecification),
 });

package/src/style-spec/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 15.1.0
+
+### ✨ Features and improvements
+* Add `icon-overlap` and `text-overlap` symbol layout properties [#347](https://github.com/maplibre/maplibre-gl-js/pull/347)
+* Deprecate `icon-allow-overlap` and `text-allow-overlap` symbol layout properties. `icon-overlap` and `text-overlap` are their replacements.
+
 ## 15.0.0
 
 ### Breaking changes

package/src/style-spec/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-gl-style-spec",
   "description": "a specification for maplibre gl styles",
-  "version": "15.0.0",
+  "version": "15.1.0",
   "author": "MapLibre",
   "keywords": [
     "mapbox",

package/src/style-spec/reference/v8.json

@@ -1144,7 +1144,10 @@
       "default": false,
       "doc": "If true, the icon will be visible even if it collides with other previously drawn symbols.",
       "requires": [
-        "icon-image"
+        "icon-image",
+        {
+          "!": "icon-overlap"
+        }
       ],
       "sdk-support": {
         "basic functionality": {
@@ -1162,6 +1165,36 @@
       },
       "property-type": "data-constant"
     },
+    "icon-overlap": {
+      "type": "enum",
+      "values": {
+        "never": {
+          "doc": "The icon will be hidden if it collides with any other previously drawn symbol."
+        },
+        "always": {
+          "doc": "The icon will be visible even if it collides with any other previously drawn symbol."
+        },
+        "cooperative": {
+          "doc": "If the icon collides with another previously drawn symbol, the overlap mode for that symbol is checked. If the previous symbol was placed using `never` overlap mode, the new icon is hidden. If the previous symbol was placed using `always` or `cooperative` overlap mode, the new icon is visible."
+        }
+      },
+      "doc": "Allows for control over whether to show an icon when it overlaps other symbols on the map. If `icon-overlap` is not set, `icon-allow-overlap` is used instead.",
+      "requires": [
+        "icon-image"
+      ],
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.1.0"
+        }
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "property-type": "data-constant"
+    },
     "icon-ignore-placement": {
       "type": "boolean",
       "default": false,
@@ -2309,7 +2342,10 @@
       "default": false,
       "doc": "If true, the text will be visible even if it collides with other previously drawn symbols.",
       "requires": [
-        "text-field"
+        "text-field",
+        {
+          "!": "text-overlap"
+        }
       ],
       "sdk-support": {
         "basic functionality": {
@@ -2327,6 +2363,36 @@
       },
       "property-type": "data-constant"
     },
+    "text-overlap": {
+      "type": "enum",
+      "values": {
+        "never": {
+          "doc": "The text will be hidden if it collides with any other previously drawn symbol."
+        },
+        "always": {
+          "doc": "The text will be visible even if it collides with any other previously drawn symbol."
+        },
+        "cooperative": {
+          "doc": "If the text collides with another previously drawn symbol, the overlap mode for that symbol is checked. If the previous symbol was placed using `never` overlap mode, the new text is hidden. If the previous symbol was placed using `always` or `cooperative` overlap mode, the new text is visible."
+        }
+      },
+      "doc": "Allows for control over whether to show symbol text when it overlaps other symbols on the map. If `text-overlap` is not set, `text-allow-overlap` is used instead",
+      "requires": [
+        "text-field"
+      ],
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.1.0"
+        }
+      },
+      "expression": {
+        "interpolated": false,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "property-type": "data-constant"
+    },
     "text-ignore-placement": {
       "type": "boolean",
       "default": false,

package/src/style-spec/types.ts

@@ -248,6 +248,7 @@ export type SymbolLayerSpecification = {
         "symbol-sort-key"?: DataDrivenPropertyValueSpecification<number>,
         "symbol-z-order"?: PropertyValueSpecification<"auto" | "viewport-y" | "source">,
         "icon-allow-overlap"?: PropertyValueSpecification<boolean>,
+        "icon-overlap"?: PropertyValueSpecification<"never" | "always" | "cooperative">,
         "icon-ignore-placement"?: PropertyValueSpecification<boolean>,
         "icon-optional"?: PropertyValueSpecification<boolean>,
         "icon-rotation-alignment"?: PropertyValueSpecification<"map" | "viewport" | "auto">,
@@ -281,6 +282,7 @@ export type SymbolLayerSpecification = {
         "text-transform"?: DataDrivenPropertyValueSpecification<"none" | "uppercase" | "lowercase">,
         "text-offset"?: DataDrivenPropertyValueSpecification<[number, number]>,
         "text-allow-overlap"?: PropertyValueSpecification<boolean>,
+        "text-overlap"?: PropertyValueSpecification<"never" | "always" | "cooperative">,
         "text-ignore-placement"?: PropertyValueSpecification<boolean>,
         "text-optional"?: PropertyValueSpecification<boolean>,
         "visibility"?: "visible" | "none"

package/src/symbol/collision_index.ts

@@ -16,6 +16,7 @@ import type {
     GlyphOffsetArray,
     SymbolLineVertexArray
 } from '../data/array_types';
+import type {OverlapMode} from '../style/style_layer/symbol_style_layer';
 
 // When a symbol crosses the edge that causes it to be included in
 // collision detection, it will cause changes in the symbols around
@@ -29,6 +30,7 @@ export type FeatureKey = {
     bucketInstanceId: number;
     featureIndex: number;
     collisionGroupID: number;
+    overlapMode: OverlapMode;
 };
 
 /**
@@ -72,7 +74,7 @@ class CollisionIndex {
 
     placeCollisionBox(
       collisionBox: SingleCollisionBox,
-      allowOverlap: boolean,
+      overlapMode: OverlapMode,
       textPixelRatio: number,
       posMatrix: mat4,
       collisionGroupPredicate?: (key: FeatureKey) => boolean
@@ -88,7 +90,7 @@ class CollisionIndex {
         const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
 
         if (!this.isInsideGrid(tlX, tlY, brX, brY) ||
-            (!allowOverlap && this.grid.hitTest(tlX, tlY, brX, brY, collisionGroupPredicate))) {
+            (overlapMode !== 'always' && this.grid.hitTest(tlX, tlY, brX, brY, overlapMode, collisionGroupPredicate))) {
             return {
                 box: [],
                 offscreen: false
@@ -102,7 +104,7 @@ class CollisionIndex {
     }
 
     placeCollisionCircles(
-      allowOverlap: boolean,
+      overlapMode: OverlapMode,
       symbol: any,
       lineVertexArray: SymbolLineVertexArray,
       glyphOffsetArray: GlyphOffsetArray,
@@ -245,18 +247,16 @@ class CollisionIndex {
                     entirelyOffscreen = entirelyOffscreen && this.isOffscreen(x1, y1, x2, y2);
                     inGrid = inGrid || this.isInsideGrid(x1, y1, x2, y2);
 
-                    if (!allowOverlap) {
-                        if (this.grid.hitTestCircle(centerX, centerY, radius, collisionGroupPredicate)) {
-                            // Don't early exit if we're showing the debug circles because we still want to calculate
-                            // which circles are in use
-                            collisionDetected = true;
-                            if (!showCollisionCircles) {
-                                return {
-                                    circles: [],
-                                    offscreen: false,
-                                    collisionDetected
-                                };
-                            }
+                    if (overlapMode !== 'always' && this.grid.hitTestCircle(centerX, centerY, radius, overlapMode, collisionGroupPredicate)) {
+                        // Don't early exit if we're showing the debug circles because we still want to calculate
+                        // which circles are in use
+                        collisionDetected = true;
+                        if (!showCollisionCircles) {
+                            return {
+                                circles: [],
+                                offscreen: false,
+                                collisionDetected
+                            };
                         }
                     }
                 }
@@ -337,17 +337,17 @@ class CollisionIndex {
         return result;
     }
 
-    insertCollisionBox(collisionBox: Array<number>, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
+    insertCollisionBox(collisionBox: Array<number>, overlapMode: OverlapMode, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
         const grid = ignorePlacement ? this.ignoredGrid : this.grid;
 
-        const key = {bucketInstanceId, featureIndex, collisionGroupID};
+        const key = {bucketInstanceId, featureIndex, collisionGroupID, overlapMode};
         grid.insert(key, collisionBox[0], collisionBox[1], collisionBox[2], collisionBox[3]);
     }
 
-    insertCollisionCircles(collisionCircles: Array<number>, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
+    insertCollisionCircles(collisionCircles: Array<number>, overlapMode: OverlapMode, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
         const grid = ignorePlacement ? this.ignoredGrid : this.grid;
 
-        const key = {bucketInstanceId, featureIndex, collisionGroupID};
+        const key = {bucketInstanceId, featureIndex, collisionGroupID, overlapMode};
         for (let k = 0; k < collisionCircles.length; k += 4) {
             grid.insertCircle(key, collisionCircles[k], collisionCircles[k + 1], collisionCircles[k + 2]);
         }

package/src/symbol/grid_index.test.ts

@@ -1,12 +1,13 @@
 import GridIndex from './grid_index';
+import type {GridKey} from './grid_index';
 
 describe('GridIndex', () => {
 
     test('indexes features', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        grid.insert(0, 4, 10, 6, 30);
-        grid.insert(1, 4, 10, 30, 12);
-        grid.insert(2, -10, 30, 5, 35);
+        const grid = new GridIndex(100, 100, 10);
+        grid.insert(0 as GridKey, 4, 10, 6, 30);
+        grid.insert(1 as GridKey, 4, 10, 30, 12);
+        grid.insert(2 as GridKey, -10, 30, 5, 35);
 
         expect(grid.query(4, 10, 5, 11).map(x => x.key).sort()).toEqual([0, 1]);
         expect(grid.query(24, 10, 25, 11).map(x => x.key).sort()).toEqual([1]);
@@ -18,8 +19,8 @@ describe('GridIndex', () => {
     });
 
     test('returns multiple copies of a key if multiple boxes were inserted with the same key', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        const key = 123;
+        const grid = new GridIndex(100, 100, 10);
+        const key = 123 as GridKey;
         grid.insert(key, 3, 3, 4, 4);
         grid.insert(key, 13, 13, 14, 14);
         grid.insert(key, 23, 23, 24, 24);
@@ -27,26 +28,48 @@ describe('GridIndex', () => {
     });
 
     test('circle-circle intersection', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        grid.insertCircle(0, 50, 50, 10);
-        grid.insertCircle(1, 60, 60, 15);
-        grid.insertCircle(2, -10, 110, 20);
-
-        expect(grid.hitTestCircle(55, 55, 2)).toBeTruthy();
-        expect(grid.hitTestCircle(10, 10, 10)).toBeFalsy();
-        expect(grid.hitTestCircle(0, 100, 10)).toBeTruthy();
-        expect(grid.hitTestCircle(80, 60, 10)).toBeTruthy();
+        const grid = new GridIndex(100, 100, 10);
+        grid.insertCircle(0 as GridKey, 50, 50, 10);
+        grid.insertCircle(1 as GridKey, 60, 60, 15);
+        grid.insertCircle(2 as GridKey, -10, 110, 20);
+
+        expect(grid.hitTestCircle(55, 55, 2, 'never')).toBeTruthy();
+        expect(grid.hitTestCircle(10, 10, 10, 'never')).toBeFalsy();
+        expect(grid.hitTestCircle(0, 100, 10, 'never')).toBeTruthy();
+        expect(grid.hitTestCircle(80, 60, 10, 'never')).toBeTruthy();
     });
 
     test('circle-rectangle intersection', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        grid.insertCircle(0, 50, 50, 10);
-        grid.insertCircle(1, 60, 60, 15);
-        grid.insertCircle(2, -10, 110, 20);
+        const grid = new GridIndex(100, 100, 10);
+        grid.insertCircle(0 as GridKey, 50, 50, 10);
+        grid.insertCircle(1 as GridKey, 60, 60, 15);
+        grid.insertCircle(2 as GridKey, -10, 110, 20);
 
         expect(grid.query(45, 45, 55, 55).map(x => x.key)).toEqual([0, 1]);
         expect(grid.query(0, 0, 30, 30).map(x => x.key)).toEqual([]);
         expect(grid.query(0, 80, 20, 100).map(x => x.key)).toEqual([2]);
     });
 
+    test('overlap mode', () => {
+        const grid = new GridIndex(100, 100, 10);
+        grid.insert({overlapMode: 'never'}, 10, 10, 20, 20);
+        grid.insert({overlapMode: 'always'}, 30, 10, 40, 20);
+        grid.insert({overlapMode: 'cooperative'}, 50, 10, 60, 20);
+
+        // 'never' can't overlap anything
+        expect(grid.hitTest(15, 15, 25, 25, 'never')).toBeTruthy();
+        expect(grid.hitTest(35, 15, 45, 25, 'never')).toBeTruthy();
+        expect(grid.hitTest(55, 15, 65, 25, 'never')).toBeTruthy();
+
+        // 'always' can overlap everything
+        expect(grid.hitTest(15, 15, 25, 25, 'always')).toBeFalsy();
+        expect(grid.hitTest(35, 15, 45, 25, 'always')).toBeFalsy();
+        expect(grid.hitTest(55, 15, 65, 25, 'always')).toBeFalsy();
+
+        // 'cooperative' can overlap 'always' and 'cooperative'
+        expect(grid.hitTest(15, 15, 25, 25, 'cooperative')).toBeTruthy();
+        expect(grid.hitTest(35, 15, 45, 25, 'cooperative')).toBeFalsy();
+        expect(grid.hitTest(55, 15, 65, 25, 'cooperative')).toBeFalsy();
+    });
+
 });

package/src/symbol/grid_index.ts

@@ -1,5 +1,8 @@
+import type {OverlapMode} from '../style/style_layer/symbol_style_layer';
+
 type QueryArgs = {
     hitTest: boolean;
+    overlapMode?: OverlapMode;
     circle?: {
         x: number;
         y: number;
@@ -23,6 +26,24 @@ type QueryResult<T> = {
     y2: number;
 };
 
+export type GridKey = {
+    overlapMode?: OverlapMode;
+}
+
+function overlapAllowed(overlapA: OverlapMode, overlapB: OverlapMode): boolean {
+    let allowed = true;
+
+    if (overlapA === 'always') {
+        // symbol A using 'always' overlap - allowed to overlap anything.
+    } else if (overlapA === 'never' || overlapB === 'never') {
+        // symbol A using 'never' overlap - can't overlap anything
+        // symbol A using 'cooperative' overlap - can overlap 'always' or 'cooperative' symbol; can't overlap 'never'
+        allowed = false;
+    }
+
+    return allowed;
+}
+
 /**
  * GridIndex is a data structure for testing the intersection of
  * circles and rectangles in a 2d plane.
@@ -36,7 +57,7 @@ type QueryResult<T> = {
  *
  * @private
  */
-class GridIndex<T> {
+class GridIndex<T extends GridKey> {
     circleKeys: Array<T>;
     boxKeys: Array<T>;
     boxCells: Array<Array<number>>;
@@ -110,7 +131,7 @@ class GridIndex<T> {
         this.circleCells[cellIndex].push(uid);
     }
 
-    private _query(x1: number, y1: number, x2: number, y2: number, hitTest: boolean, predicate?: (key: T) => boolean): Array<QueryResult<T>> {
+    private _query(x1: number, y1: number, x2: number, y2: number, hitTest: boolean, overlapMode: OverlapMode, predicate?: (key: T) => boolean): Array<QueryResult<T>> {
         if (x2 < 0 || x1 > this.width || y2 < 0 || y1 > this.height) {
             return [];
         }
@@ -150,6 +171,7 @@ class GridIndex<T> {
         } else {
             const queryArgs: QueryArgs = {
                 hitTest,
+                overlapMode,
                 seenUids: {box: {}, circle: {}}
             };
             this._forEachCell(x1, y1, x2, y2, this._queryCell, result, queryArgs, predicate);
@@ -162,11 +184,11 @@ class GridIndex<T> {
         return this._query(x1, y1, x2, y2, false, null);
     }
 
-    hitTest(x1: number, y1: number, x2: number, y2: number, predicate?: (key: T) => boolean): boolean {
-        return this._query(x1, y1, x2, y2, true, predicate).length > 0;
+    hitTest(x1: number, y1: number, x2: number, y2: number, overlapMode: OverlapMode, predicate?: (key: T) => boolean): boolean {
+        return this._query(x1, y1, x2, y2, true, overlapMode, predicate).length > 0;
     }
 
-    hitTestCircle(x: number, y: number, radius: number, predicate?: (key: T) => boolean): boolean {
+    hitTestCircle(x: number, y: number, radius: number, overlapMode: OverlapMode, predicate?: (key: T) => boolean): boolean {
         // Insert circle into grid for all cells in the circumscribing square
         // It's more than necessary (by a factor of 4/PI), but fast to insert
         const x1 = x - radius;
@@ -183,6 +205,7 @@ class GridIndex<T> {
         const result: boolean[] = [];
         const queryArgs: QueryArgs = {
             hitTest: true,
+            overlapMode,
             circle: {x, y, radius},
             seenUids: {box: {}, circle: {}}
         };
@@ -191,7 +214,7 @@ class GridIndex<T> {
     }
 
     private _queryCell(x1: number, y1: number, x2: number, y2: number, cellIndex: number, result: Array<QueryResult<T>>, queryArgs: QueryArgs, predicate?: (key: T) => boolean): boolean {
-        const {seenUids, hitTest} = queryArgs;
+        const {seenUids, hitTest, overlapMode} = queryArgs;
         const boxCell = this.boxCells[cellIndex];
 
         if (boxCell !== null) {
@@ -207,16 +230,18 @@ class GridIndex<T> {
                         (x2 >= bboxes[offset + 0]) &&
                         (y2 >= bboxes[offset + 1]) &&
                         (!predicate || predicate(key))) {
-                        result.push({
-                            key,
-                            x1: bboxes[offset],
-                            y1: bboxes[offset + 1],
-                            x2: bboxes[offset + 2],
-                            y2: bboxes[offset + 3]
-                        });
-                        if (hitTest) {
-                            // true return value stops the query after first match
-                            return true;
+                        if (!hitTest || !overlapAllowed(overlapMode, key.overlapMode)) {
+                            result.push({
+                                key,
+                                x1: bboxes[offset],
+                                y1: bboxes[offset + 1],
+                                x2: bboxes[offset + 2],
+                                y2: bboxes[offset + 3]
+                            });
+                            if (hitTest) {
+                                // true return value stops the query after first match
+                                return true;
+                            }
                         }
                     }
                 }
@@ -240,19 +265,21 @@ class GridIndex<T> {
                         x2,
                         y2) &&
                         (!predicate || predicate(key))) {
-                        const x = circles[offset];
-                        const y = circles[offset + 1];
-                        const radius = circles[offset + 2];
-                        result.push({
-                            key,
-                            x1: x - radius,
-                            y1: y - radius,
-                            x2: x + radius,
-                            y2: y + radius
-                        });
-                        if (hitTest) {
-                            // true return value stops the query after first match
-                            return true;
+                        if (!hitTest || !overlapAllowed(overlapMode, key.overlapMode)) {
+                            const x = circles[offset];
+                            const y = circles[offset + 1];
+                            const radius = circles[offset + 2];
+                            result.push({
+                                key,
+                                x1: x - radius,
+                                y1: y - radius,
+                                x2: x + radius,
+                                y2: y + radius
+                            });
+                            if (hitTest) {
+                                // true return value stops the query after first match
+                                return true;
+                            }
                         }
                     }
                 }
@@ -263,8 +290,8 @@ class GridIndex<T> {
         return false;
     }
 
-    private _queryCellCircle(x1: number, y1: number, x2: number, y2: number, cellIndex: number, result: Array<boolean>, queryArgs: QueryArgs, predicate?: (key:T) => boolean): boolean {
-        const {circle, seenUids} = queryArgs;
+    private _queryCellCircle(x1: number, y1: number, x2: number, y2: number, cellIndex: number, result: Array<boolean>, queryArgs: QueryArgs, predicate?: (key: T) => boolean): boolean {
+        const {circle, seenUids, overlapMode} = queryArgs;
         const boxCell = this.boxCells[cellIndex];
 
         if (boxCell !== null) {
@@ -282,7 +309,8 @@ class GridIndex<T> {
                         bboxes[offset + 1],
                         bboxes[offset + 2],
                         bboxes[offset + 3]) &&
-                        (!predicate || predicate(key))) {
+                        (!predicate || predicate(key)) &&
+                        !overlapAllowed(overlapMode, key.overlapMode)) {
                         result.push(true);
                         return true;
                     }
@@ -305,7 +333,8 @@ class GridIndex<T> {
                         circle.x,
                         circle.y,
                         circle.radius) &&
-                        (!predicate || predicate(key))) {
+                        (!predicate || predicate(key)) &&
+                        !overlapAllowed(overlapMode, key.overlapMode)) {
                         result.push(true);
                         return true;
                     }