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
geekdenz · Feb 23, 2025 · a262f80 · a262f80
1 parent b52cb12
commit a262f80
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 ### ✨ 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..._
 
 ### 🐞 Bug fixes

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: 1,
 };
 
 /**
@@ -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 1
+     */
+    locationOccludedOpacity?: number | string;
 };
 
 const focusQuerySelector = [
@@ -226,6 +233,17 @@ export class Popup extends Evented {
         return this;
     }
 
+    /**
+     * Add opacity to popup if in globe projection and location is behind view
+     */
+    _updateOpacity = () => {
+        if (this._map.transform.isLocationOccluded(this.getLngLat())) {
+            this._container.style.opacity = `${this.options.locationOccludedOpacity}`;
+        } else {
+            this._container.style.opacity = '1';
+        }
+    };
+
     /**
      * @returns `true` if the popup is open, `false` if it is closed.
      */
@@ -646,6 +664,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() {