RD-1105 Fix bug where spacebox breaks when style.json changed

Author: Les Moffat

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@maptiler/sdk",
-  "version": "3.6.0",
+  "version": "3.6.1-rc1",
   "description": "The Javascript & TypeScript map SDK tailored for MapTiler Cloud",
   "author": "MapTiler",
   "module": "dist/maptiler-sdk.mjs",

package.json

@@ -1025,10 +1025,6 @@ export class Map extends maplibregl.Map {
     const oldStyle = this.getStyle() as StyleSpecificationWithMetaData;
     const newStyle = styleInfo.style as StyleSpecificationWithMetaData;
 
-    // the type returned from getStyle is incorrect,  it can be null
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    const spaceAndHaloMustAwaitTerrain = oldStyle?.terrain?.source !== newStyle?.terrain?.source || oldStyle?.terrain?.exaggeration !== newStyle?.terrain?.exaggeration;
-
     try {
       super.setStyle(styleInfo.style, options);
     } catch (e) {
@@ -1041,40 +1037,58 @@ export class Map extends maplibregl.Map {
       return this;
     }
 
-    const setSpaceAndHalo = () => {
+    const setSpaceAndHaloFromStyle = () => {
       this.setSpaceFromStyle({ style: styleInfo.style as StyleSpecificationWithMetaData });
       this.setHaloFromStyle({ style: styleInfo.style as StyleSpecificationWithMetaData });
     };
 
-    if (spaceAndHaloMustAwaitTerrain) {
-      void this.once("terrain", setSpaceAndHalo);
-    } else {
-      setSpaceAndHalo();
+    const handleStyleLoad = () => {
+      const targetBeforeLayer = this.getLayersOrder()[0];
+      const styleSpec = styleInfo.style as StyleSpecificationWithMetaData;
+      if (this.space) {
+        this.setSpaceFromStyle({ style: styleSpec });
+      } else {
+        this.initSpace({ before: targetBeforeLayer, spec: styleSpec.metadata?.maptiler?.space });
+      }
+
+      if (this.halo) {
+        this.setHaloFromStyle({ style: styleSpec });
+      } else {
+        this.initHalo({ before: targetBeforeLayer, spec: styleSpec.metadata?.maptiler?.halo });
+      }
+    };
+
+    if (this.styleInProcess && !this.spaceboxLoadingState.styleLoadCallbackSet) {
+      // this handles setting space and halo from style on load
+      void this.once("style.load", handleStyleLoad);
+      this.spaceboxLoadingState.styleLoadCallbackSet = true;
       return this;
     }
 
-    if (this.styleInProcess) {
-      // this handles setting space and halo from style on load
-      void this.once("style.load", () => {
-        const targetBeforeLayer = this.getLayersOrder()[0];
-        const styleSpec = styleInfo.style as StyleSpecificationWithMetaData;
-        if (this.space) {
-          this.setSpaceFromStyle({ style: styleSpec });
-        } else {
-          this.initSpace({ before: targetBeforeLayer, spec: styleSpec.metadata?.maptiler?.space });
-        }
+    // the type returned from getStyle is incorrect,  it can be null
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const spaceAndHaloMustAwaitTerrain = oldStyle?.terrain?.source !== newStyle?.terrain?.source || oldStyle?.terrain?.exaggeration !== newStyle?.terrain?.exaggeration;
 
-        if (this.halo) {
-          this.setHaloFromStyle({ style: styleSpec });
-        } else {
-          this.initHalo({ before: targetBeforeLayer, spec: styleSpec.metadata?.maptiler?.halo });
-        }
-      });
+    if (spaceAndHaloMustAwaitTerrain) {
+      void this.once("terrain", setSpaceAndHaloFromStyle);
+      return this;
+    }
+
+    const projectionFieldDeleted = !newStyle?.projection?.type;
+    if (projectionFieldDeleted) {
+      this.styleInProcess = true;
+      return this;
     }
 
+    handleStyleLoad();
+
     return this;
   }
 
+  private spaceboxLoadingState = {
+    styleLoadCallbackSet: false,
+  };
+
   /**
    * Adds a [MapLibre style layer](https://maplibre.org/maplibre-style-spec/layers)
    * to the map's style.

src/Map.ts

@@ -410,6 +410,10 @@ class CubemapLayer implements CustomLayerInterface {
    * @throws Error if the map, cubemap, or texture is undefined.
    */
   public render(gl: WebGLRenderingContext | WebGL2RenderingContext, _options: CustomRenderMethodInput): void {
+    if (!this.map.isGlobeProjection()) {
+      return;
+    }
+
     if (this.map === undefined) {
       throw new Error("[CubemapLayer]: Map is undefined");
     }

src/custom-layers/CubemapLayer/CubemapLayer.ts

@@ -233,6 +233,10 @@ export class RadialGradientLayer implements CustomLayerInterface {
       throw new Error("[RadialGradientLayer]: Map is undefined");
     }
 
+    if (!this.map.isGlobeProjection()) {
+      return;
+    }
+
     if (this.plane === undefined) {
       throw new Error("[RadialGradientLayer]: Plane is undefined");
     }

src/custom-layers/RadialGradientLayer/RadialGradientLayer.ts

@@ -37,7 +37,7 @@ export function loadShader({ gl, type, source }: { gl: WebGLContext; type: GLenu
  *
  * @returns WebGL program
  */
-export function createShadersSetProgram({ gl, vertexShaderSource, fragmentShaderSource }: { gl: WebGLContext; vertexShaderSource: string; fragmentShaderSource: string }) {
+export function createShaderProgram({ gl, vertexShaderSource, fragmentShaderSource }: { gl: WebGLContext; vertexShaderSource: string; fragmentShaderSource: string }) {
   const vertexShader = loadShader({
     gl,
     type: gl.VERTEX_SHADER,
@@ -101,7 +101,7 @@ export function createObject3D<Attribute extends string, Uniform extends string>
   vertices: Array<number>;
   indices?: Array<number>;
 }): Object3D<Attribute, Uniform> {
-  const shaderProgram = createShadersSetProgram({ gl, vertexShaderSource, fragmentShaderSource });
+  const shaderProgram = createShaderProgram({ gl, vertexShaderSource, fragmentShaderSource });
 
   const attributesLocations = attributesKeys.reduce<Record<string, number>>((acc, key) => {
     acc[key] = gl.getAttribLocation(shaderProgram, `a_${key}`);