From fcbe9e5244c3918b5fdb0e9a865a75f1371ab0a4 Mon Sep 17 00:00:00 2001
From: Eran Geva <eran.geva@gmail.com>
Date: Sun, 2 Feb 2025 23:24:26 +0200
Subject: [PATCH] Avoid setting marker opacity twice (#5441)

* avoid setting opacity twice

* updating CHANGELOG

* add PR number and link to CHANGELOG

* setOpacity handles being called from constructor
---
 CHANGELOG.md     | 1 +
 src/ui/marker.ts | 6 ++++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 21acacb9b4..6e6effd201 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ### ✨ 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..._
 
diff --git a/src/ui/marker.ts b/src/ui/marker.ts
index 8440e1e58b..1c3b5e6fdf 100644
--- a/src/ui/marker.ts
+++ b/src/ui/marker.ts
@@ -168,7 +168,6 @@ export class Marker extends Evented {
         this._rotation = options && options.rotation || 0;
         this._rotationAlignment = options && options.rotationAlignment || 'auto';
         this._pitchAlignment = options && options.pitchAlignment && options.pitchAlignment !== 'auto' ?  options.pitchAlignment : this._rotationAlignment;
-        this.setOpacity(); // set default opacity
         this.setOpacity(options?.opacity, options?.opacityWhenCovered);
 
         if (!options || !options.element) {
@@ -857,16 +856,19 @@ export class Marker extends Evented {
      * @param opacityWhenCovered - Sets the `opacityWhenCovered` property of the marker.
      */
     setOpacity(opacity?: string, opacityWhenCovered?: string): this {
-        if (opacity === undefined && opacityWhenCovered === undefined) {
+        // Reset opacity when called without params or from constructor
+        if (this._opacity === undefined || (opacity === undefined && opacityWhenCovered === undefined)) {
             this._opacity = '1';
             this._opacityWhenCovered = '0.2';
         }
+
         if (opacity !== undefined) {
             this._opacity = opacity;
         }
         if (opacityWhenCovered !== undefined) {
             this._opacityWhenCovered = opacityWhenCovered;
         }
+
         if (this._map) {
             this._updateOpacity(true);
         }