feat(radialgradient/spacebox): implement stylejson for styling of RadialGradientLayer and Spacebox

Author: Les Moffat

demos/07-spacebox.html

@@ -40,12 +40,17 @@
       zoom: 1,
       projection: "globe",
       center: [0, -20],
+      // space: {
+        // color: "red",
+      // },
+      halo: true,
+      // space: true,
       space: {
         color: "#111122",
-        path: {
-          baseUrl: "spacebox/transparent",
-          format: "png", //defaults to png
-        },
+      //   path: {
+      //     baseUrl: "spacebox/transparent",
+      //     format: "png", //defaults to png
+      //   },
         // OR
         // faces: {
           // pX: '/som-path-to-an-image/pX',
@@ -58,14 +63,14 @@
         // OR
         // preset?: "universe-dark";
       },
-      halo: {
-        scale: 1,
-        stops: [
-          [0.0, "transparent"],
-          [0.2, "skyblue"],
-          [0.3, "transparent"]
-        ],
-      }
+      // halo: {
+      //   scale: 1,
+      //   stops: [
+      //     [0.0, "transparent"],
+      //     [0.2, "skyblue"],
+      //     [0.3, "transparent"]
+      //   ],
+      // }
     });
 
     // Or alternatively, you can set the space and halo imperatively

package-lock.json

@@ -54,9 +54,9 @@
     "*.ts": "npm run lint:fix"
   },
   "devDependencies": {
+    "@eslint/js": "^9.21.0",
     "@types/color-convert": "^2.0.4",
     "@types/color-name": "^2.0.0",
-    "@eslint/js": "^9.21.0",
     "@types/uuid": "^10.0.0",
     "@types/xmldom": "^0.1.31",
     "@xmldom/xmldom": "^0.8.10",

package.json

@@ -41,6 +41,7 @@ import { MaptilerProjectionControl } from "./MaptilerProjectionControl";
 import { Telemetry } from "./Telemetry";
 import { CubemapDefinition, CubemapLayer, CubemapLayerConstructorOptions } from "./custom-layers/CubemapLayer";
 import { GradientDefinition, RadialGradientLayer, RadialGradientLayerOptions } from "./custom-layers/RadialGradientLayer";
+import extractCustomLayerStyle from "./custom-layers/extractCustomLayerStyle";
 
 export type LoadWithTerrainEvent = {
   type: "loadWithTerrain";
@@ -198,8 +199,8 @@ export type MapOptions = Omit<MapOptionsML, "style" | "maplibreLogo"> & {
    *
    * Default: { color: "#1D29F1" }
    */
-  space?: CubemapLayerConstructorOptions;
-  halo?: RadialGradientLayerOptions;
+  space?: CubemapLayerConstructorOptions | boolean;
+  halo?: RadialGradientLayerOptions | boolean;
 };
 
 /**
@@ -716,6 +717,7 @@ export class Map extends maplibregl.Map {
     }
 
     // Display a message if WebGL context is lost
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     this.once("load", () => {
       this.getCanvas().addEventListener("webglcontextlost", (event) => {
         if (this._removed === true) {
@@ -734,12 +736,14 @@ export class Map extends maplibregl.Map {
       const firstLayer = this.getLayersOrder()[0];
 
       if (options.space) {
-        this.space = new CubemapLayer(options.space);
+        const optionsFromStyleSpec = extractCustomLayerStyle({ map: this, property: "space" });
+        this.space = new CubemapLayer(options.space ?? optionsFromStyleSpec);
         this.addLayer(this.space, firstLayer);
       }
 
       if (options.halo) {
-        this.halo = new RadialGradientLayer(options.halo);
+        const optionsFromStyleSpec = extractCustomLayerStyle({ map: this, property: "halo" });
+        this.halo = new RadialGradientLayer(options.halo ?? optionsFromStyleSpec);
         this.addLayer(this.halo, firstLayer);
       }
     });
@@ -865,7 +869,6 @@ export class Map extends maplibregl.Map {
     this.once("idle", () => {
       this.forceLanguageUpdate = false;
     });
-
     const styleInfo = styleToStyle(style);
 
     if (styleInfo.requiresUrlMonitoring) {

src/Map.ts

@@ -29,14 +29,11 @@ const VERTICES = [
 ];
 
 const defaultConstructorOptions: RadialGradientLayerOptions = {
-  scale: 1,
+  scale: 0.9,
   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)"],
+    [0.1, "rgba(98, 168, 229, 0.3)"],
+    [0.2, "rgba(98, 168, 229, 0.0)"],
   ],
 };
 

src/custom-layers/RadialGradientLayer/RadialGradientLayer.ts

@@ -0,0 +1,42 @@
+import { Map as MapSDK } from "../Map";
+// import { CubemapLayerConstructorOptions } from "./CubemapLayer";
+// import { RadialGradientLayerOptions } from "./RadialGradientLayer";
+import { StyleSpecification } from "maplibre-gl";
+import type { CubemapLayerConstructorOptions, RadialGradientLayerOptions } from "custom-layers";
+
+export type StyleSpecificationWithMetaData = StyleSpecification & {
+  metadata?: {
+    "maptiler:copyright": string;
+    maptiler?: {
+      halo: RadialGradientLayerOptions;
+      space: CubemapLayerConstructorOptions;
+    };
+  };
+};
+
+export interface IExtractCustomLayerStyleOptions {
+  map: MapSDK;
+  property: "halo" | "space";
+}
+
+export type CustomLayerDefinitionType = CubemapLayerConstructorOptions | RadialGradientLayerOptions | null
+;
+
+export default function extractCustomLayerStyle(options: IExtractCustomLayerStyleOptions): CustomLayerDefinitionType {
+  const { map, property } = options;
+
+  const style = map.getStyle() as StyleSpecificationWithMetaData;
+
+  if (!style.metadata?.maptiler) {
+    console.warn(`No custom layer metadata found in the style for property ${property}. The property will use default values.`);
+    return null;
+  }
+
+  // Because this data is from an external source
+  // we ignore typescript and check anyway.
+  if (style.metadata.maptiler[property]) {
+    return style.metadata.maptiler[property];
+  }
+
+  return null;
+}