map.getStyle() modification issue

CHANGELOG.md

@@ -10,6 +10,8 @@
 
 - Fix right-to-left layout of labels that contain characters in the Arabic Extended-B code block. ([#4536](https://github.com/maplibre/maplibre-gl-js/pull/4536))
 - Fix 3D map freezing when camera is adjusted against map bounds. ([#4537](https://github.com/maplibre/maplibre-gl-js/issues/4537))
+- Fix `getStyle()` to return a clone so the object cannot be internally changed ([#4488](https://github.com/maplibre/maplibre-gl-js/issues/4488))
+
 - - _...Add new stuff here..._
 
 ## 4.5.2

src/style/style.ts

@@ -479,20 +479,22 @@ export class Style extends Evented {
      * @hidden
      * take an array of string IDs, and based on this._layers, generate an array of LayerSpecification
      * @param ids - an array of string IDs, for which serialized layers will be generated. If omitted, all serialized layers will be returned
+     * @param returnClose - if true, return a clone of the layer object
      * @returns generated result
      */
-    private _serializeByIds(ids?: Array<string>): Array<LayerSpecification> {
+    private _serializeByIds(ids: Array<string>, returnClone: boolean = false): Array<LayerSpecification> {
 
         const serializedLayersDictionary = this._serializedAllLayers();
         if (!ids || ids.length === 0) {
-            return Object.values(serializedLayersDictionary);
+            return returnClone ? Object.values(clone(serializedLayersDictionary)) : Object.values(serializedLayersDictionary);
         }
 
         const serializedLayers = [];
         for (const id of ids) {
             // this check will skip all custom layers
             if (serializedLayersDictionary[id]) {
-                serializedLayers.push(serializedLayersDictionary[id]);
+                const toPush = returnClone ? clone(serializedLayersDictionary[id]) : serializedLayersDictionary[id];
+                serializedLayers.push(toPush);
             }
         }
 
@@ -666,7 +668,7 @@ export class Style extends Evented {
 
     _updateWorkerLayers(updatedIds: Array<string>, removedIds: Array<string>) {
         this.dispatcher.broadcast(MessageType.updateLayers, {
-            layers: this._serializeByIds(updatedIds),
+            layers: this._serializeByIds(updatedIds, false),
             removedIds
         });
     }
@@ -1282,7 +1284,7 @@ export class Style extends Evented {
         if (!this._loaded) return;
 
         const sources = mapObject(this.sourceCaches, (source) => source.serialize());
-        const layers = this._serializeByIds(this._order);
+        const layers = this._serializeByIds(this._order, true);
         const terrain = this.map.getTerrain() || undefined;
         const myStyleSheet = this.stylesheet;
 

src/ui/map_tests/map_style.test.ts

@@ -359,6 +359,30 @@ describe('#getStyle', () => {
         });
     });
 
+    test('returns the previous style even if modified', async () => {
+        const style = {
+            version: 8 as const,
+            sources: {},
+            layers: [
+                {
+                    id: 'background',
+                    type: 'background' as const,
+                    paint: {'background-color': 'blue'}
+                },
+            ]
+        };
+
+        const map = createMap({style});
+
+        await map.once('load');
+        const newStyle = map.getStyle();
+        newStyle.layers[0].paint = {'background-color': 'red'};
+
+        // map.getStyle() should still equal the original style since
+        // we have not yet called map.setStyle(...).
+        expect(map.getStyle()).toEqual(style);
+    });
+
     test('returns the style with added sources', done => {
         const style = createStyle();
         const map = createMap({style});