Allow setting opacity of popup when behind surface (maplibre#5079)

* add locationOccludedOpacity: number property as opacity * listen on the map if this is set * change opacity when behind the surface * unit test and document * set undefined as default value for locationOccludedOpacity
geekdenz · Feb 25, 2025 · 5d0cda9 · 5d0cda9
1 parent b52cb12
commit 5d0cda9
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,21 @@
 ## main
 
+### 🐞 Bug fixes
+
+- _...Add new stuff here..._
+
 ### ✨ Features and improvements
 
 - _...Add new stuff here..._
 
-### 🐞 Bug fixes
+### ✨ Features and improvements
 
+- Allow opacity to be set when location becomes invisible in the globe projection. ([#5532](https://github.com/maplibre/maplibre-gl-js/pull/5532))
+
+### ✨ Features and improvements
+
+- Avoid setting marker opacity twice. ([#5441](https://github.com/maplibre/maplibre-gl-js/pull/5441))
+- Fix rendering Japanese symbols which are accidentally ignored. ([#5421](https://github.com/maplibre/maplibre-gl-js/pull/5421)
 - _...Add new stuff here..._
 
 ## 5.1.1

diff --git a/docs/index.md b/docs/index.md
@@ -94,6 +94,6 @@ Note too that if the CSS isn't available by the first render, as soon as the CSS
 MapLibre GL JS is also distributed via UNPKG. Our latest version can installed by adding below tags this in the html `<head>`. Further instructions on how to select specific versions and semver ranges can be found on at [unpkg.com](https://unpkg.com).
 
 ```html
-<script src="https://unpkg.com/maplibre-gl@^4.7.0/dist/maplibre-gl.js"></script>
-<link href="https://unpkg.com/maplibre-gl@^4.7.0/dist/maplibre-gl.css" rel="stylesheet" />
+<script src="https://unpkg.com/maplibre-gl@^5.1.1/dist/maplibre-gl.js"></script>
+<link href="https://unpkg.com/maplibre-gl@^5.1.1/dist/maplibre-gl.css" rel="stylesheet" />
 ```
diff --git a/src/ui/popup.test.ts b/src/ui/popup.test.ts
@@ -825,4 +825,20 @@ describe('popup', () => {
 
         expect(popup.getElement().style.transform).toBe('translate(-50%,-100%) translate(0px,1px)');
     });
+    test('Popup changes opacity when location behind globe', async () => {
+        const map = createMap();
+
+        const popup = new Popup({locationOccludedOpacity: 0.2})
+            .setLngLat([0, 0])
+            .setText('Test')
+            .addTo(map);
+
+        await map.once('load', () => {
+            map.setProjection({
+                type: 'globe'
+            });
+            map.setCenter([180, 0]);
+            expect(popup.getElement().style.opacity).toBe('0.2');
+        });
+    });
 });
diff --git a/src/ui/popup.ts b/src/ui/popup.ts
@@ -18,7 +18,8 @@ const defaultOptions = {
     focusAfterOpen: true,
     className: '',
     maxWidth: '240px',
-    subpixelPositioning: false
+    subpixelPositioning: false,
+    locationOccludedOpacity: undefined,
 };
 
 /**
@@ -88,6 +89,12 @@ export type PopupOptions = {
      * @defaultValue false
      */
     subpixelPositioning?: boolean;
+    /**
+     * Optional opacity when the location is behind the globe.
+     * If not supplied default to 1. Note the number is converted to a string.
+     * @defaultValue undefined
+     */
+    locationOccludedOpacity?: number | string;
 };
 
 const focusQuerySelector = [
@@ -226,6 +233,20 @@ export class Popup extends Evented {
         return this;
     }
 
+    /**
+     * Add opacity to popup if in globe projection and location is behind view
+     */
+    _updateOpacity = () => {
+        if (this.options.locationOccludedOpacity === undefined) {
+            return;
+        }
+        if (this._map.transform.isLocationOccluded(this.getLngLat())) {
+            this._container.style.opacity = `${this.options.locationOccludedOpacity}`;
+        } else {
+            this._container.style.opacity = '';
+        }
+    };
+
     /**
      * @returns `true` if the popup is open, `false` if it is closed.
      */
@@ -646,6 +667,8 @@ export class Popup extends Evented {
 
         DOM.setTransform(this._container, `${anchorTranslate[anchor]} translate(${offsetedPos.x}px,${offsetedPos.y}px)`);
         applyAnchorClass(this._container, anchor, 'popup');
+
+        this._updateOpacity();
     };
 
     _focusFirstElement() {