RD-1001 Changes options so that presets are respected

Author: Les Moffat

src/Map.ts

@@ -263,7 +263,11 @@ export class Map extends maplibregl.Map {
   }
 
   private initSpace({ options = this.options, before }: { options?: MapOptions; before: string }) {
-    if (this.space && this.getLayer(this.space.id)) {
+    if (this.space) {
+      if (!this.getLayer(this.space.id)) {
+        // If the space layer is already initialized but not added to the map, we add it now
+        this.addLayer(this.space, before);
+      }
       return;
     }
 
@@ -993,10 +997,9 @@ export class Map extends maplibregl.Map {
     });
 
     try {
-      console.log("[Map.setStyle]: Setting style:", styleInfo.style);
       super.setStyle(styleInfo.style, options);
     } catch (e) {
-      this.styleInProcess = false;
+      // this.styleInProcess = false;
       console.error("[Map.setStyle]: Error while setting style:", e);
     }
 

src/custom-layers/CubemapLayer/CubemapLayer.ts

@@ -70,7 +70,10 @@ function configureOptions(inputOptions: CubemapLayerConstructorOptions | true, d
 
   // path / faces will not be defined at this point
   // so we don't need to delete them
-  return outputOptions as CubemapLayerConstructorOptions;
+  return {
+    ...outputOptions,
+    color: outputOptions.color ?? cubemapPresets[presetName].color ?? "hsl(233,100%,92%)",
+  } as CubemapLayerConstructorOptions;
 }
 
 class CubemapLayer implements CustomLayerInterface {
@@ -346,6 +349,7 @@ class CubemapLayer implements CustomLayerInterface {
       }
       this.imageIsAnimating = false;
       this.imageFadeInDelta = 0.0;
+      return;
     };
 
     requestAnimationFrame(animateIn);
@@ -362,7 +366,7 @@ class CubemapLayer implements CustomLayerInterface {
       return Promise.resolve(); // If already animating, just resolve
     }
     return new Promise((resolve) => {
-      const animateIn = () => {
+      const animateOut = () => {
         this.imageFadeInDelta = Math.min(this.imageFadeInDelta + 0.05, 1.0);
         this.currentFadeOpacity = lerp(1.0, 0.0, this.imageFadeInDelta);
         this.map.triggerRepaint();
@@ -373,10 +377,10 @@ class CubemapLayer implements CustomLayerInterface {
           resolve();
           return;
         }
-        requestAnimationFrame(animateIn);
+        requestAnimationFrame(animateOut);
       };
 
-      requestAnimationFrame(animateIn);
+      requestAnimationFrame(animateOut);
     });
   }
 
@@ -500,17 +504,20 @@ class CubemapLayer implements CustomLayerInterface {
    * Finally, it calls `updateCubemap` to apply the changes and trigger a repaint of the map.
    */
   public async setCubemap(cubemap: CubemapDefinition): Promise<void> {
-    const color = parseColorStringToVec4(cubemap.color);
-    if (cubemap.color && this.targetBgColor.toString() !== color.toString()) {
-      this.setBgColor(color);
-    }
-
     const facesKey = JSON.stringify(cubemap.faces ?? cubemap.preset ?? cubemap.path);
 
     if (facesKey && this.currentFacesDefinitionKey !== facesKey) {
       await this.setCubemapFaces(cubemap);
     }
 
+    const color = parseColorStringToVec4(cubemap.color);
+    if (cubemap.color && this.targetBgColor.toString() !== color.toString()) {
+      this.setBgColor(color);
+    } else if (cubemap.preset && cubemap.preset in cubemapPresets) {
+      const preset = cubemapPresets[cubemap.preset];
+      this.setBgColor(parseColorStringToVec4(preset.color));
+    }
+
     this.updateCubemap();
   }
 

src/custom-layers/CubemapLayer/types.ts

@@ -10,7 +10,7 @@ export type CubemapLayerConstructorOptions = CubemapDefinition & {};
 
 export const cubemapPresets: Record<string, CubemapDefinition> = {
   stars: {
-    color: "white",
+    color: "hsl(233,100%,92%)",
     preset: "stars",
   },
   space: {