added(display): The alpha blending has been revamped to enable the ma…

…p to display with a transparent background, allowing the remaining browser content to show through behind it. See [backgroundColor](https://heremaps.github.io/xyz-maps/docs/interfaces/display.mapoptions.html#backgroundcolor). (#90)

Signed-off-by: Tim Deubler <[email protected]>

packages/display/src/Map.ts

@@ -40,7 +40,7 @@ import {
     GeoPoint,
     GeoRect,
     utils,
-    GeoJSONFeatureCollection, GeoJSONFeature, GeoJSONBBox, FeatureProvider, Layer, CustomLayer
+    GeoJSONFeatureCollection, GeoJSONFeature, GeoJSONBBox, FeatureProvider, Layer, CustomLayer, Color
 } from '@here/xyz-maps-core';
 import {FlightAnimator} from './animation/FlightAnimator';
 import Copyright from './ui/copyright/Copyright';
@@ -278,6 +278,8 @@ export class Map {
 
         tigerMap._display = display;
 
+        this.setBackgroundColor(options.backgroundColor);
+
         this._search = new Search(tigerMap, display.dpr);
 
         const pointerEvents = this._evDispatcher = new EventDispatcher(mapEl, tigerMap, layers, options);
@@ -526,7 +528,7 @@ export class Map {
      *
      * @param color - the background color to set
      */
-    setBackgroundColor(color: string) {
+    setBackgroundColor(color: Color) {
         this._display.setBGColor(color);
         this.refresh();
     };

packages/display/src/MapOptions.ts

@@ -17,7 +17,7 @@
  * License-Filename: LICENSE
  */
 
-import {GeoPoint, TileLayer} from '@here/xyz-maps-core';
+import {Color, GeoPoint, TileLayer} from '@here/xyz-maps-core';
 
 /**
  *  Options to configure the map display.
@@ -26,60 +26,67 @@ export interface MapOptions {
     /**
      * Configure visibility and position of ui components
      */
-    ui?: {}
+    ui?: {};
     /**
      * zoomlevel of the map.
      *
      * @defaultValue 18
      */
-    zoomlevel?: number
+    zoomlevel?: number;
     /**
      * Center coordinate of the map.
      *
      * @defaultValue \{longitude: 8.534, latitude: 50.162\}
      */
-    center?: GeoPoint
+    center?: GeoPoint;
     /**
      * add layers to display.
      *
      */
-    layers?: TileLayer[]
+    layers?: TileLayer[];
     /**
      * the maximum zoom level the map can be zoomed in
      *
      * @defaultValue 20
      */
-    maxLevel?: number
+    maxLevel?: number;
     /**
      * the minimum zoom level the map can be zoomed out
      *
      * @defaultValue 2
      */
-    minLevel?: number
+    minLevel?: number;
+    /**
+     * The default background color of the map is white.
+     * To achieve a transparent map background, you can set it to "rgba(0, 0, 0, 0)" or simply use the keyword "transparent".
+     *
+     * @defaultValue "white"
+     */
+    backgroundColor?: Color;
     /**
      * enable or disable debug tile grid
      *
      * @defaultValue false
      */
-    debug?: boolean
+    debug?: boolean;
     /**
      * The minimum threshold in pixels to enable the pan map gesture.
      *
      * @defaultValue 4
      */
-    minPanMapThreshold?: number
+    minPanMapThreshold?: number;
     /**
      * The minimum threshold in pixels to enable the rotate map gesture.
      *
      * @defaultValue 4
      */
-    minRotateMapThreshold?: number
+    minRotateMapThreshold?: number;
     /**
      * The minimum threshold in pixels to enable the pitch map gesture.
      *
      * @defaultValue 4
      */
-    minPitchMapThreshold?: number
+    minPitchMapThreshold?: number;
     /**
      *  Behavior options of the map.
      *  Allow user to "drag" / "rotate" / "pitch" or "zoom" the map by mouse/touch interaction.
@@ -112,29 +119,29 @@ export interface MapOptions {
          * @defaultValue falses
          */
         rotate?: boolean;
-    }
+    };
     /**
      * initial rotation of the map in degree.
      *
      * @defaultValue 0
      */
-    rotate?: number
+    rotate?: number;
     /**
      * initial pitch (tilt) of the map in degree.
      *
      * @defaultValue 0
      */
-    pitch?: number
+    pitch?: number;
     /**
      * duration of a zoom level change animation in milliseconds.
      * @defaultValue 100
      */
-    zoomAnimationMs?: number
+    zoomAnimationMs?: number;
     /**
      * The maximum angle in degrees the map can be pitched
      * @defaultValue 50
      */
-    maxPitch?: number
+    maxPitch?: number;
 }
 
 export const defaultOptions: MapOptions = {

packages/display/src/displays/BasicDisplay.ts

@@ -18,7 +18,7 @@
  */
 
 import {global, TaskManager} from '@here/xyz-maps-common';
-import {Tile, TileLayer, CustomLayer} from '@here/xyz-maps-core';
+import {Tile, TileLayer, CustomLayer, Color} from '@here/xyz-maps-core';
 import {getElDimension, createCanvas} from '../DOMTools';
 import {Layers, Layer, ScreenTile} from './Layers';
 import FeatureModifier from './FeatureModifier';
@@ -61,7 +61,7 @@ abstract class Display {
     private centerWorld: number[]; // absolute world center xy0
 
     protected bgColor: RGBA;
-    globalBgc: boolean | string | [number, number, number, number?] = false;
+    globalBgc: boolean | Color = false;
 
     tileSize: number;
     layers: Layers;
@@ -560,26 +560,19 @@ abstract class Display {
         }
     }
 
-    setBGColor(color?: string) {
+    setBGColor(color: Color = '#ffffff') {
         const displ = this;
         const {render} = displ;
 
-        let bgColor = color ||
-            global.getComputedStyle(displ.canvas.parentElement, null)
-                .getPropertyValue('background-color');
-        if (
-            !bgColor ||
-            bgColor == 'rgba(0, 0, 0, 0)' || // webkit
-            bgColor == 'transparent' // firefox, ie
-        ) {
-            bgColor = '#ffffff';
+        if (color == 'transparent') {
+            color = 'rgba(0, 0, 0, 0)';
         }
 
-        bgColor = render.convertColor(bgColor);
+        color = render.convertColor(color);
 
-        displ.globalBgc = bgColor;
+        displ.globalBgc = color;
 
-        render.setBackgroundColor(bgColor);
+        render.setBackgroundColor(color);
     }
 
     showGrid(show: boolean | { [opt: string]: any }) {

packages/display/src/displays/BasicRender.ts

@@ -18,15 +18,15 @@
  */
 
 import BasicTile from './BasicTile';
-import {TileLayer, Tile} from '@here/xyz-maps-core';
+import {TileLayer, Tile, Color} from '@here/xyz-maps-core';
 
 interface BasicRender {
 
     init(canvas: HTMLCanvasElement, devicePixelRation: number): void;
 
-    convertColor(color: string | [number, number, number, number?]): any;
+    convertColor(color: number | string | [number, number, number, number?]): any;
 
-    setBackgroundColor(color: string | [number, number, number, number?]): void;
+    setBackgroundColor(color: Color): void;
 
     setScale(scale: number, sx: number, sy: number): void;
 

packages/display/src/displays/webgl/GLRender.ts

@@ -91,7 +91,7 @@ export type BufferCache = WeakMap<Attribute | IndexData, WebGLBuffer>;
 
 export class GLRender implements BasicRender {
     static DEFAULT_COLOR_MASK: ColorMask = {
-        r: true, g: true, b: true, a: false
+        r: true, g: true, b: true, a: true
     };
 
     static NO_COLOR_MASK: ColorMask = {
@@ -169,7 +169,7 @@ export class GLRender implements BasicRender {
             antialias: false,
             depth: true,
             stencil: true,
-            premultipliedAlpha: false,
+            premultipliedAlpha: true,
             preserveDrawingBuffer: false,
             ...renderOptions
         };
@@ -225,7 +225,7 @@ export class GLRender implements BasicRender {
     }
 
     setBackgroundColor(color: RGBA) {
-        this.gl?.clearColor(color[0], color[1], color[2], color[3] || 1.0);
+        this.gl?.clearColor(color[0], color[1], color[2], color[3] ?? 1.0);
     }
 
     setScale(scale: number, sx: number, sy: number) {