diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92a3f291a35..e5d03a7facd 100644
--- 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
index ca9ecdc1dbc..2469c2ea8d2 100644
--- 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 ``. Further instructions on how to select specific versions and semver ranges can be found on at [unpkg.com](https://unpkg.com).
```html
-
-
+
+
```
diff --git a/src/ui/popup.test.ts b/src/ui/popup.test.ts
index c845d326658..ff7b2c924e1 100644
--- 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
index 0087e8f1543..49d4c7820f1 100644
--- 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() {