fix(spacebox): add defaults for halo and cubemap layer

Author: Les Moffat

demos/07-spacebox.html

@@ -44,7 +44,7 @@
         color: "#111122",
         path: {
           baseUrl: "spacebox/transparent",
-          // format: "png", defaults to png
+          format: "png", //defaults to png
         },
         // OR
         // faces: {
@@ -60,11 +60,11 @@
       },
       halo: {
         scale: 1,
-        stops: [
-          [0.0, "transparent"],
-          [0.2, "skyblue"],
-          [0.3, "transparent"]
-        ],
+        // stops: [
+        //   [0.0, "transparent"],
+        //   [0.2, "skyblue"],
+        //   [0.3, "transparent"]
+        // ],
       }
     });
 

src/custom-layers/CubemapLayer/CubemapLayer.ts

@@ -18,6 +18,11 @@ const UNIFORMS_KEYS = ["projectionMatrix", "modelViewMatrix", "cubeSampler", "bg
 const GL_USE_TEXTURE_MACRO_MARKER = "%USE_TEXTURE_MACRO_MARKER%";
 const GL_USE_TEXTURE_MACRO = "#define USE_TEXTURE";
 
+const defaultConstructorOptions: CubemapLayerConstructorOptions = {
+  color: "black",
+  preset: "universe-dark",
+};
+
 class CubemapLayer implements CustomLayerInterface {
   public id: string = "Cubemap Layer";
   public type: CustomLayerInterface["type"] = "custom";
@@ -34,9 +39,17 @@ class CubemapLayer implements CustomLayerInterface {
   private cubemap?: Object3D<(typeof ATTRIBUTES_KEYS)[number], (typeof UNIFORMS_KEYS)[number]>;
   private texture?: WebGLTexture;
 
-  constructor(cubemapConfig: CubemapLayerConstructorOptions) {
-    this.bgColor = parseColorStringToVec4(cubemapConfig.color);
-    this.faces = getCubemapFaces(cubemapConfig);
+  constructor(cubemapConfig: CubemapLayerConstructorOptions | boolean) {
+    const options =
+      typeof cubemapConfig === "boolean"
+        ? defaultConstructorOptions
+        : {
+            ...defaultConstructorOptions,
+            ...cubemapConfig,
+          };
+
+    this.bgColor = parseColorStringToVec4(options.color);
+    this.faces = getCubemapFaces(options as CubemapDefinition);
     this.useCubemapTexture = this.faces !== null;
   }
 

src/custom-layers/RadialGradientLayer/RadialGradientLayer.ts

@@ -28,6 +28,18 @@ const VERTICES = [
   0,
 ];
 
+const defaultConstructorOptions: RadialGradientLayerOptions = {
+  scale: 1,
+  stops: [
+    [0.0, "rgba(176, 208, 240, 1)"],
+    [0.2, "rgba(98, 168, 229, 0.8)"],
+    [0.4, "rgba(32, 112, 208, 0.6)"],
+    [0.6, "rgba(16, 42, 85, 0.4)"],
+    [0.8, "rgba(10, 15, 37, 0.2)"],
+    [1.0, "rgba(0, 0, 0, 0)"],
+  ],
+}
+
 export class RadialGradientLayer implements CustomLayerInterface {
   public id: string = "Halo Layer";
   public type: CustomLayerInterface["type"] = "custom";
@@ -39,8 +51,16 @@ export class RadialGradientLayer implements CustomLayerInterface {
   private map!: MapSDK;
   private plane?: Object3D<(typeof ATTRIBUTES_KEYS)[number], (typeof UNIFORMS_KEYS)[number]>;
 
-  constructor(gradient: RadialGradientLayerOptions) {
-    this.gradient = gradient;
+  constructor(gradient: RadialGradientLayerOptions | boolean) {
+    if (typeof gradient === "boolean") {
+      this.gradient = defaultConstructorOptions;
+      return;
+    }
+
+    this.gradient = {
+      ...defaultConstructorOptions,
+      ...gradient,
+    };
   }
 
   public onAdd(map: MapSDK, gl: WebGLRenderingContext | WebGL2RenderingContext): void {