added(display): LayerStyles backgroundColor now supports dynamic colo…

…rs taking zoom level into account. updated docs Signed-off-by: Tim Deubler <[email protected]>
heremaps · Sep 13, 2023 · fcc850e · fcc850e
1 parent 7fcffa0
commit fcc850e
Show file tree

Hide file tree

Showing 13 changed files with 99 additions and 119 deletions.
diff --git a/packages/core/src/styles/BoxStyle.ts b/packages/core/src/styles/BoxStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 
 /**
@@ -49,22 +49,16 @@ export interface BoxStyle {
     /**
      * Sets the color to fill the Box.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    fill?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    fill?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the stroke color of the Box.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the width of the stroke.

diff --git a/packages/core/src/styles/CircleStyle.ts b/packages/core/src/styles/CircleStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 /**
  * Interface for configuring the visual appearance of Circles.
@@ -48,22 +48,16 @@ export interface CircleStyle {
     /**
      * Sets the color to fill the Circle.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    fill?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    fill?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the stroke color of the Circle.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the width of the stroke.

diff --git a/packages/core/src/styles/GenericStyle.ts b/packages/core/src/styles/GenericStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 import {LinearGradient} from '@here/xyz-maps-core';
 
 /**
@@ -95,23 +95,17 @@ export interface Style {
      * Sets the color to fill the shape.
      * This attribute is valid for Circle, Rect, Text and Polygon.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    fill?: string | StyleValueFunction<string> | StyleZoomRange<string> | LinearGradient;
+    fill?: Color | StyleValueFunction<Color> | StyleZoomRange<Color> | LinearGradient;
 
     /**
      * Sets the stroke color of the shape.
      * This attribute is valid for Circle, Rect, Line, Text and Polygon.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the width of the stroke.

diff --git a/packages/core/src/styles/LayerStyle.ts b/packages/core/src/styles/LayerStyle.ts
@@ -19,18 +19,6 @@
 
 import {Feature} from '../features/Feature';
 import {Style} from './GenericStyle';
-import {ModelStyle} from '@here/xyz-maps-core';
-import Model from '@here/xyz-maps-display/src/displays/webgl/program/Model';
-import {LineStyle} from './LineStyle';
-import {VerticalLineStyle} from './VerticalLineStyle';
-import {Line} from '@here/xyz-maps-editor';
-import {PolygonStyle} from './PolygonStyle';
-import {RectStyle} from './RectStyle';
-import {CircleStyle} from './CircleStyle';
-import {ImageStyle} from './ImageStyle';
-import {BoxStyle} from './BoxStyle';
-import {SphereStyle} from './SphereStyle';
-import {TextStyle} from './TextStyle';
 
 
 /**
@@ -89,6 +77,18 @@ export type StyleGroup = Array<Style>;
 
 // (<LineStyle>testStyle[0]).stroke;
 
+/**
+ * The Color is an RGBA color value representing RED, GREEN, and BLUE light sources with an optional alpha channel.
+ * Colors can be specified in the following ways:
+ * - CSS color names: "red"
+ * - RGB colors: "rgb(255,0,0)"
+ * - RGBA colors: "rgba(255,0,0,1.0)"
+ * - Hexadecimal colors: "#ff0000" | "#f00"
+ * - Hexadecimal colors with transparency: "#ff0000ff"
+ * - hexadecimal numbers: 0xff0000
+ * - RGBA Color Array: [1.0, 0.0, 0.0, 1.0]
+ */
+export type Color = string | number | [number, number, number, number];
 
 /**
  * This is an interface to describe how certain features should be rendered within a layer.
@@ -119,7 +119,7 @@ export interface LayerStyle {
     /**
      * the color for the background of the layer
      */
-    backgroundColor?: string;
+    backgroundColor?: Color | StyleZoomRange<Color> | ((zoomlevel: number) => Color);
 
     /**
      *  This object contains key/styleGroup pairs.

diff --git a/packages/core/src/styles/LineStyle.ts b/packages/core/src/styles/LineStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 /**
  * Interface for configuring the visual appearance of Lines.
@@ -50,12 +50,9 @@ export interface LineStyle {
     /**
      * Sets the stroke color of the Line.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the width of the line.

diff --git a/packages/core/src/styles/PolygonStyle.ts b/packages/core/src/styles/PolygonStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 /**
  * Interface for configuring the visual appearance of Polygons.
@@ -48,22 +48,16 @@ export interface PolygonStyle {
     /**
      * Sets the color to fill the polygon.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    fill?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    fill?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the stroke color of the polygon.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the width of the stroke of the polygon (outline).

diff --git a/packages/core/src/styles/RectStyle.ts b/packages/core/src/styles/RectStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 export interface RectStyle {
     /**
@@ -45,22 +45,16 @@ export interface RectStyle {
     /**
      * Sets the color to fill the Rectangle.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    fill?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    fill?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the stroke color of the Rectangle.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the width of the Rectangle.

diff --git a/packages/core/src/styles/SphereStyle.ts b/packages/core/src/styles/SphereStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 /**
  * Interface for configuring the visual appearance of Rectangles.
@@ -49,12 +49,9 @@ export interface SphereStyle {
      * Sets the color to fill the Sphere.
      * This attribute is valid for Circle, Rect, Text and Polygon.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    fill?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    fill?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Defines the opacity of the style.

diff --git a/packages/core/src/styles/TextStyle.ts b/packages/core/src/styles/TextStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 /**
  * Interface for configuring the visual appearance of Text.
@@ -48,22 +48,16 @@ export interface TextStyle {
     /**
      * Sets the color to fill the text.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    fill?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    fill?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the stroke color of the text (outline).
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Sets the width of the stroke (outline) to display the text with.

diff --git a/packages/core/src/styles/VerticalLineStyle.ts b/packages/core/src/styles/VerticalLineStyle.ts
@@ -16,7 +16,7 @@
  * SPDX-License-Identifier: Apache-2.0
  * License-Filename: LICENSE
  */
-import {StyleValueFunction, StyleZoomRange} from './LayerStyle';
+import {Color, StyleValueFunction, StyleZoomRange} from './LayerStyle';
 
 
 /**
@@ -49,12 +49,9 @@ export interface VerticalLineStyle {
     /**
      * Sets the stroke color of the shape.
      *
-     * The color can be specified in the following ways:
-     * - CSS color names: "red"
-     * - RGB(A) values: "rgba(255,0,0,1.0)"
-     * - hexadecimal values: "#ff0000"
+     * @see {@link Color} for a detailed list of possible supported formats.
      */
-    stroke?: string | StyleValueFunction<string> | StyleZoomRange<string>;
+    stroke?: Color | StyleValueFunction<Color> | StyleZoomRange<Color>;
 
     /**
      * Defines the opacity of the style.