@openglobus/og 0.18.5 → 0.19.1

package/lib/js/Globe.d.ts

@@ -29,6 +29,7 @@ interface IGlobeParams {
     quadTreeStrategyPrototype?: any;
     maxLoadingRequests?: number;
     atmosphereEnabled?: boolean;
+    transitionOpacityEnabled?: boolean;
     terrain?: EmptyTerrain;
     controls?: Control[];
     useEarthNavigation?: boolean;
@@ -92,6 +93,7 @@ interface IGlobeParams {
  * @param {number} [options.msaa=0] - MSAA antialiasing parameter: 2,4,8,16. Default is 0.
  * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
  * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
+ * @param {boolean} [options.transtitionOpacityEnabled] - Enables terrain smooth opacity transition effect.
  */
 declare class Globe {
     static __counter__: number;

package/lib/js/Globe.js

@@ -66,6 +66,7 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @param {number} [options.msaa=0] - MSAA antialiasing parameter: 2,4,8,16. Default is 0.
  * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
  * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
+ * @param {boolean} [options.transtitionOpacityEnabled] - Enables terrain smooth opacity transition effect.
  */
 class Globe {
     constructor(options) {
@@ -146,7 +147,8 @@ class Globe {
             minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
             quadTreeStrategyPrototype: options.quadTreeStrategyPrototype,
             maxLoadingRequests: options.maxLoadingRequests,
-            atmosphereEnabled: options.atmosphereEnabled
+            atmosphereEnabled: options.atmosphereEnabled,
+            transitionOpacityEnabled: options.transitionOpacityEnabled
         });
         // Attach terrain provider (can be one object or array)
         if (options.terrain) {

package/lib/js/control/DebugInfo.js

@@ -78,6 +78,7 @@ export class DebugInfo extends Control {
         this._canvasTiles = new CanvasTiles("Tile grid", {
             visibility: true,
             isBaseLayer: false,
+            hideInLayerSwitcher: true,
             drawTile: function (material, applyCanvas) {
                 //
                 // This is important create canvas here!
@@ -159,6 +160,10 @@ export class DebugInfo extends Control {
                     label: "Nodes count",
                     frame: () => p._renderedNodes.length
                 },
+                {
+                    label: "Planet._fadingNodes",
+                    frame: () => p._fadingNodes.size
+                },
                 {
                     label: "createdNodes",
                     frame: () => p._createdNodesCount

package/lib/js/control/LayerSwitcher.d.ts

@@ -2,18 +2,33 @@ import { Control, IControlParams } from "./Control";
 import { Dialog } from "../ui/Dialog";
 import { Layer } from "../layer/Layer";
 import { ToggleButton } from "../ui/ToggleButton";
+import { IViewParams, View } from "../ui/View";
 interface ILayerSwitcherParams extends IControlParams {
 }
+declare class LayerButtonView extends View<Layer> {
+    constructor(params: IViewParams);
+    render(params?: any): this;
+    protected _onVisibilityChange: (layer: Layer) => void;
+    protected _onClick: () => void;
+    protected _onDblClick: () => void;
+    remove(): void;
+}
 /**
  * Advanced :) layer switcher, includes base layers, overlays, geo images etc. groups.
  * Double click for zoom, drag-and-drop to change zIndex
  */
 export declare class LayerSwitcher extends Control {
-    dialog: Dialog<null>;
-    protected _menuBtn: ToggleButton;
+    protected _dialog: Dialog<null>;
+    protected _toggleBtn: ToggleButton;
+    protected _panel: View<null>;
+    $baseLayers: HTMLElement | null;
+    $overlays: HTMLElement | null;
+    _layerViews: LayerButtonView[];
     constructor(options?: ILayerSwitcherParams);
     oninit(): void;
-    addNewLayer: (layer: Layer) => void;
+    protected _initLayers(): void;
+    protected _createLayerButton(layer: Layer): LayerButtonView;
+    addLayer: (layer: Layer) => void;
     removeLayer: (layer: Layer) => void;
     onactivate(): void;
     ondeactivate(): void;

package/lib/js/control/LayerSwitcher.js

@@ -1,6 +1,8 @@
 import { Control } from "./Control";
 import { Dialog } from "../ui/Dialog";
 import { ToggleButton } from "../ui/ToggleButton";
+import { View } from "../ui/View";
+import { stringTemplate } from "../utils/shared";
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 <!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
@@ -8,6 +10,60 @@ const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?>
 <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
 <g><path d="M500,573.5c-3.2,0-6.5-0.6-9.5-1.9L25,375.6c-9.1-3.8-15-12.7-15-22.6s5.9-18.8,15-22.6l465.5-196c6.1-2.5,12.9-2.5,19,0l465.5,196c9.1,3.8,15,12.7,15,22.6s-5.9,18.8-15,22.6l-465.5,196C506.5,572.9,503.2,573.5,500,573.5L500,573.5z M97.6,353L500,522.4L902.4,353L500,183.6L97.6,353L97.6,353z"/><path d="M500,720.5c-3.2,0-6.5-0.6-9.5-1.9L25,522.6c-12.4-5.2-18.3-19.6-13.1-32.1c5.2-12.5,19.6-18.3,32.1-13.1l456,192l456-192c12.4-5.2,26.9,0.6,32.1,13.1s-0.6,26.9-13.1,32.1l-465.5,196C506.5,719.9,503.2,720.5,500,720.5L500,720.5z"/><path d="M500,867.5c-3.2,0-6.5-0.6-9.5-1.9L25,669.6c-12.4-5.2-18.3-19.6-13.1-32.1c5.2-12.5,19.6-18.3,32.1-13.1l456,192l456-192c12.4-5.2,26.9,0.6,32.1,13.1c5.2,12.5-0.6,26.8-13.1,32.1l-465.5,196C506.5,866.9,503.2,867.5,500,867.5L500,867.5z"/></g>
 </svg>`;
+const TEMPLATE = `<div class="og-layerSwitcher">
+      <div class="og-layerSwitcher__title">Base Layers</div>
+      <div class="og-layerSwitcher__list og-layerSwitcher__baseLayers"></div>        
+        
+      <div class="og-layerSwitcher__title">Overlays</div>
+      <div class="og-layerSwitcher__list og-layerSwitcher__overlays"></div>
+         
+    </div>`;
+const LAYER_BUTTON_TEMPLATE = `<button title={title} class="og-layerSwitcher__layerButton">{icon}<div class="og-layerSwitcher__name">{name}</div></button>`;
+class LayerButtonView extends View {
+    constructor(params) {
+        super({
+            template: stringTemplate(LAYER_BUTTON_TEMPLATE, {
+                title: params.model.name,
+                name: params.model.name,
+                icon: params.model.iconSrc ? `<img src="${params.model.iconSrc}" />` : ""
+            }),
+            ...params
+        });
+        this._onVisibilityChange = (layer) => {
+            if (this.el) {
+                if (this.model.getVisibility()) {
+                    this.el.classList.add("og-layerSwitcher__visible");
+                }
+                else {
+                    this.el.classList.remove("og-layerSwitcher__visible");
+                }
+            }
+        };
+        this._onClick = () => {
+            if (this.model.isBaseLayer()) {
+                this.model.setVisibility(true);
+            }
+            else {
+                this.model.setVisibility(!this.model.getVisibility());
+            }
+        };
+        this._onDblClick = () => {
+            this.model.flyExtent();
+        };
+    }
+    render(params) {
+        super.render(params);
+        this.model.events.on("visibilitychange", this._onVisibilityChange);
+        this._onVisibilityChange(this.model);
+        this.el.addEventListener("click", this._onClick);
+        this.el.addEventListener("dblclick", this._onDblClick);
+        return this;
+    }
+    remove() {
+        super.remove();
+        this.model.events.off("visibilitychange", this._onVisibilityChange);
+    }
+}
 /**
  * Advanced :) layer switcher, includes base layers, overlays, geo images etc. groups.
  * Double click for zoom, drag-and-drop to change zIndex
@@ -18,34 +74,78 @@ export class LayerSwitcher extends Control {
             name: "LayerSwitcher",
             ...options
         });
-        this.addNewLayer = (layer) => {
+        this.addLayer = (layer) => {
+            if (!layer.hideInLayerSwitcher) {
+                let layerView = this._createLayerButton(layer);
+                this._layerViews.push(layerView);
+                if (layer.isBaseLayer()) {
+                    layerView.appendTo(this.$baseLayers);
+                }
+                else {
+                    layerView.appendTo(this.$overlays);
+                }
+            }
         };
         this.removeLayer = (layer) => {
+            for (let i = 0; i < this._layerViews.length; i++) {
+                let li = this._layerViews[i];
+                if (li.model.isEqual(layer)) {
+                    li.remove();
+                    this._layerViews.splice(i, 1);
+                    break;
+                }
+            }
         };
-        this.dialog = new Dialog({
+        this._dialog = new Dialog({
             title: "Layer Switcher",
             top: 15,
             useHide: true,
             visible: false,
-            width: 200
+            width: 300,
+            maxHeight: 500
         });
-        this._menuBtn = new ToggleButton({
-            classList: ["og-map-button", "og-layerswitcher_button"],
+        this._panel = new View({
+            template: TEMPLATE
+        });
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-layerSwitcher_button"],
             icon: ICON_BUTTON_SVG
         });
+        this.$baseLayers = null;
+        this.$overlays = null;
+        this._layerViews = [];
     }
     oninit() {
-        this.dialog.appendTo(this.planet.renderer.div);
-        this.dialog.setPosition(this.planet.renderer.div.clientWidth - this.dialog.width - 67);
-        this.dialog.events.on("visibility", (v) => {
-            this._menuBtn.setActive(v);
+        this._toggleBtn.appendTo(this.renderer.div);
+        this._dialog.appendTo(this.planet.renderer.div);
+        this._panel.appendTo(this._dialog.container);
+        this.$baseLayers = this._panel.el.querySelector(".og-layerSwitcher__baseLayers");
+        this.$overlays = this._panel.el.querySelector(".og-layerSwitcher__overlays");
+        this._dialog.setPosition(this.planet.renderer.div.clientWidth - this._dialog.width - 67);
+        this._dialog.events.on("visibility", (v) => {
+            this._toggleBtn.setActive(v);
+        });
+        this._toggleBtn.events.on("change", (isActive) => {
+            this._dialog.setVisibility(isActive);
         });
-        this.planet.events.on("layeradd", this.addNewLayer, this);
+        this.planet.events.on("layeradd", this.addLayer, this);
         this.planet.events.on("layerremove", this.removeLayer, this);
+        this._initLayers();
+    }
+    _initLayers() {
+        let layers = this.planet.layers;
+        for (let i = 0; i < layers.length; i++) {
+            this.addLayer(layers[i]);
+        }
+    }
+    _createLayerButton(layer) {
+        return new LayerButtonView({
+            model: layer
+        });
     }
     onactivate() {
     }
     ondeactivate() {
-        this.dialog.hide();
+        this._dialog.hide();
     }
 }

package/lib/js/control/MouseNavigation.d.ts

@@ -58,5 +58,7 @@ export declare class MouseNavigation extends Control {
     onShiftFree(): void;
     protected onMouseMove(e: IMouseState): void;
     protected onDraw(): void;
+    lockPlanet(skipTerrain?: boolean): void;
+    freePlanet(): void;
 }
 export {};

package/lib/js/control/MouseNavigation.js

@@ -176,9 +176,7 @@ export class MouseNavigation extends Control {
         this.planet.stopFlying();
         this.stopRotation();
         this._deactivate = true;
-        this.planet.layerLock.lock(this._keyLock);
-        //this.planet!.terrainLock.lock(this._keyLock);
-        this.planet._normalMapCreator.lock(this._keyLock);
+        this.lockPlanet(true);
         this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(this.planet.camera, this.planet, this.stepsCount, this.distDiff, e.pos, e.wheelDelta > 0, e.direction) || null;
         this._wheelDirection = e.wheelDelta;
         if (this.stepsForward) {
@@ -227,9 +225,7 @@ export class MouseNavigation extends Control {
     }
     stopRotation() {
         this.qRot.clear();
-        this.planet.layerLock.free(this._keyLock);
-        this.planet.terrainLock.free(this._keyLock);
-        this.planet._normalMapCreator.free(this._keyLock);
+        this.freePlanet();
     }
     onMouseLeftButtonUp(e) {
         this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
@@ -322,9 +318,7 @@ export class MouseNavigation extends Control {
             else {
                 if (this._deactivate) {
                     this._deactivate = false;
-                    this.planet.layerLock.free(this._keyLock);
-                    this.planet.terrainLock.free(this._keyLock);
-                    this.planet._normalMapCreator.free(this._keyLock);
+                    this.freePlanet();
                 }
             }
             if (r.events.mouseState.leftButtonDown || !this.scaleRot) {
@@ -348,15 +342,21 @@ export class MouseNavigation extends Control {
                 cam._b = rot.mulVec3(cam._b);
             }
             if (cam.eye.distance(prevEye) / cam.getAltitude() > 0.01) {
-                this.planet.layerLock.lock(this._keyLock);
-                this.planet.terrainLock.lock(this._keyLock);
-                this.planet._normalMapCreator.lock(this._keyLock);
+                this.lockPlanet();
             }
             else {
-                this.planet.layerLock.free(this._keyLock);
-                this.planet.terrainLock.free(this._keyLock);
-                this.planet._normalMapCreator.free(this._keyLock);
+                this.freePlanet();
             }
         }
     }
+    lockPlanet(skipTerrain) {
+        this.planet.layerLock.lock(this._keyLock);
+        !skipTerrain && this.planet.terrainLock.lock(this._keyLock);
+        this.planet._normalMapCreator.lock(this._keyLock);
+    }
+    freePlanet() {
+        this.planet.layerLock.free(this._keyLock);
+        this.planet.terrainLock.free(this._keyLock);
+        this.planet._normalMapCreator.free(this._keyLock);
+    }
 }

package/lib/js/control/elevationProfile/ElevationProfile.js

@@ -187,8 +187,10 @@ export class ElevationProfile {
             def.reject();
         this._pointsReady = false;
         this._isWarning = false;
-        if (!pointsLonLat || !pointsLonLat.length)
+        if (!pointsLonLat || !pointsLonLat.length) {
             def.reject();
+            return def.promise;
+        }
         this.events.dispatch(this.events.startcollecting, this);
         this._promiseCounter++;
         ((counter) => {

package/lib/js/control/elevationProfile/ElevationProfileScene.js

@@ -132,26 +132,26 @@ class ElevationProfileScene extends RenderNode {
             pickingEnabled: false,
             polygonOffsetUnits: -1.0,
             relativeToGround: true,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
         this._groundPointersLayer = new Vector("ground-pointers", {
             entities: [],
             pickingEnabled: true,
-            displayInLayerSwitcher: false,
+            hideInLayerSwitcher: true,
             scaleByDistance: [1, 5000, 0.02],
             pickingScale: 1.5
         });
         this._headPointersLayer = new Vector("head-pointers", {
             entities: [],
             pickingEnabled: true,
-            displayInLayerSwitcher: false,
+            hideInLayerSwitcher: true,
             scaleByDistance: [1, 10000, 0.02],
             pickingScale: 1
         });
         this._columnPointersLayer = new Vector("column-pointers", {
             entities: [],
             pickingEnabled: false,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
         this._trackEntity = new Entity({
             polyline: {
@@ -164,12 +164,12 @@ class ElevationProfileScene extends RenderNode {
         this._trackLayer = new Vector("column-pointers", {
             entities: [this._trackEntity],
             pickingEnabled: false,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
         this._heightsLayer = new Vector("heights-labels", {
             entities: [],
             pickingEnabled: false,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
         this._pointerHeadEntity = new Entity({
             cartesian: new Vec3(),
@@ -186,7 +186,7 @@ class ElevationProfileScene extends RenderNode {
         this._pointerLayer = new Vector("pointer", {
             entities: [this._pointerHeadEntity, this._pointerLabelEntity, this._pointerRayEntity],
             pickingEnabled: false,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
     }
     flyExtent() {

package/lib/js/control/heightRuler/HeightRulerScene.js

@@ -32,7 +32,7 @@ class HeightRulerScene extends RulerScene {
             pickingEnabled: false,
             polygonOffsetUnits: -2.0,
             relativeToGround: false,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
         this._rayV = new Entity({
             name: 'verticalRay',

package/lib/js/control/ruler/RulerScene.js

@@ -129,19 +129,19 @@ class RulerScene extends RenderNode {
             pickingEnabled: false,
             polygonOffsetUnits: -1.0,
             relativeToGround: true,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
         this._labelLayer = new Vector("ruler-label", {
             entities: [],
             pickingEnabled: false,
             polygonOffsetUnits: -100.0,
             relativeToGround: true,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: true
         });
         this._cornersLayer = new Vector("corners", {
             entities: [],
             pickingEnabled: true,
-            displayInLayerSwitcher: false,
+            hideInLayerSwitcher: true,
             scaleByDistance: [100, 4000000, 1.0],
             pickingScale: 2
         });

package/lib/js/control/selection/SelectionScene.js

@@ -85,12 +85,12 @@ class SelectionScene extends RenderNode {
             pickingEnabled: false,
             polygonOffsetUnits: -1.0,
             relativeToGround: true,
-            displayInLayerSwitcher: false
+            hideInLayerSwitcher: false
         });
         this._cornersLayer = new Vector("corners", {
             entities: [this._cornerEntity[0], this._cornerEntity[1]],
             pickingEnabled: true,
-            displayInLayerSwitcher: false,
+            hideInLayerSwitcher: true,
             scaleByDistance: [1.0, 4000000, 0.01],
             pickingScale: 2
         });

package/lib/js/entity/Entity.js

@@ -384,7 +384,11 @@ class Entity {
         this.geometry = geometry;
         this.geometry._entity = this;
         this.geometry.setVisibility(this._visibility);
-        this._layer && this._layer.add(this);
+        let layer = this._layer;
+        if (this._layer) {
+            this._layer.removeEntity(this);
+        }
+        layer && layer.add(this);
         return geometry;
     }
     /**

package/lib/js/layer/Layer.d.ts

@@ -10,7 +10,7 @@ import { IDefaultTextureParams } from "../webgl/Handler";
 export interface ILayerParams {
     properties?: any;
     labelMaxLetters?: number;
-    displayInLayerSwitcher?: boolean;
+    hideInLayerSwitcher?: boolean;
     opacity?: number;
     minZoom?: number;
     maxZoom?: number;
@@ -31,6 +31,7 @@ export interface ILayerParams {
     specular?: string | NumberArray3 | Vec3;
     shininess?: number;
     nightTextureCoefficient?: number;
+    iconSrc?: string | null;
 }
 /**
  * @class
@@ -45,11 +46,11 @@ export interface ILayerParams {
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - This is a base layer.
  * @param {boolean} [options.visibility=true] - Layer visibility.
- * @param {boolean} [options.displayInLayerSwitcher=true] - Presence of layer in dialog window of LayerSwitcher control.
+ * @param {boolean} [options.hideInLayerSwitcher=false] - Presence of layer in dialog window of LayerSwitcher control.
  * @param {boolean} [options.isSRGB=false] - Layer image webgl internal format.
  * @param {Extent} [options.extent=[[-180.0, -90.0], [180.0, 90.0]]] - Visible extent.
  * @param {string} [options.textureFilter="anisotropic"] - Image texture filter. Available values: "nearest", "linear", "mipmap" and "anisotropic".
- *
+ * @param {string} [options.icon] - Icon for LayerSwitcher
  * @fires EventsHandler<LayerEventsList>#visibilitychange
  * @fires EventsHandler<LayerEventsList>#add
  * @fires EventsHandler<LayerEventsList>#remove
@@ -98,7 +99,7 @@ declare class Layer {
      */
     name: string;
     properties: any;
-    displayInLayerSwitcher: boolean;
+    hideInLayerSwitcher: boolean;
     /**
      * Minimal zoom level when layer is visible.
      * @public
@@ -188,7 +189,10 @@ declare class Layer {
     _diffuse: Float32Array | null;
     _specular: Float32Array | null;
     isVector: boolean;
+    protected _iconSrc: string | null;
     constructor(name?: string | null, options?: ILayerParams);
+    get iconSrc(): string | null;
+    set iconSrc(src: string | null);
     set diffuse(rgb: string | NumberArray3 | Vec3 | null | undefined);
     set ambient(rgb: string | NumberArray3 | Vec3 | null | undefined);
     set specular(rgb: string | NumberArray3 | Vec3 | null | undefined);
@@ -354,6 +358,16 @@ declare class Layer {
      * @return {Extent} - Layer extent.
      */
     getExtentMerc(): Extent;
+    /**
+     * Fly extent.
+     * @public
+     */
+    flyExtent(): void;
+    /**
+     * View extent.
+     * @public
+     */
+    viewExtent(): void;
     /**
      * Special correction of the whole globe extent.
      * @protected

package/lib/js/layer/Layer.js

@@ -20,11 +20,11 @@ const FADING_RATIO = 15.8;
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - This is a base layer.
  * @param {boolean} [options.visibility=true] - Layer visibility.
- * @param {boolean} [options.displayInLayerSwitcher=true] - Presence of layer in dialog window of LayerSwitcher control.
+ * @param {boolean} [options.hideInLayerSwitcher=false] - Presence of layer in dialog window of LayerSwitcher control.
  * @param {boolean} [options.isSRGB=false] - Layer image webgl internal format.
  * @param {Extent} [options.extent=[[-180.0, -90.0], [180.0, 90.0]]] - Visible extent.
  * @param {string} [options.textureFilter="anisotropic"] - Image texture filter. Available values: "nearest", "linear", "mipmap" and "anisotropic".
- *
+ * @param {string} [options.icon] - Icon for LayerSwitcher
  * @fires EventsHandler<LayerEventsList>#visibilitychange
  * @fires EventsHandler<LayerEventsList>#add
  * @fires EventsHandler<LayerEventsList>#remove
@@ -56,11 +56,11 @@ class Layer {
     constructor(name, options = {}) {
         this.isVector = false;
         this.__id = Layer.__counter__++;
+        this._iconSrc = options.iconSrc || null;
         this.events = createEvents(LAYER_EVENTS, this);
         this.name = name || "noname";
         this.properties = options.properties || {};
-        this.displayInLayerSwitcher =
-            options.displayInLayerSwitcher !== undefined ? options.displayInLayerSwitcher : true;
+        this.hideInLayerSwitcher = options.hideInLayerSwitcher || false;
         this._hasImageryTiles = true;
         this._opacity = options.opacity || 1.0;
         this.minZoom = options.minZoom || 0;
@@ -116,6 +116,13 @@ class Layer {
         }
         this.nightTextureCoefficient = options.nightTextureCoefficient || 1.0;
     }
+    get iconSrc() {
+        return this._iconSrc;
+    }
+    set iconSrc(src) {
+        // @todo: add event
+        this._iconSrc = src;
+    }
     set diffuse(rgb) {
         if (rgb) {
             let vec = createColorRGB(rgb);
@@ -508,6 +515,20 @@ class Layer {
     getExtentMerc() {
         return this._extentMerc;
     }
+    /**
+     * Fly extent.
+     * @public
+     */
+    flyExtent() {
+        this._planet?.flyExtent(this.getExtent());
+    }
+    /**
+     * View extent.
+     * @public
+     */
+    viewExtent() {
+        this._planet?.viewExtent(this.getExtent());
+    }
     /**
      * Special correction of the whole globe extent.
      * @protected

package/lib/js/layer/XYZ.d.ts

@@ -73,7 +73,6 @@ export declare class XYZ extends Layer {
     /**
      * Rewrites imagery tile url query.
      * @private
-     * @callback og.layer.XYZ~_urlRewriteCallback
      * @param {Segment} segment - Segment to load.
      * @param {string} url - Created url.
      * @returns {string} - Url query string.

package/lib/js/quadTree/Node.d.ts

@@ -20,6 +20,7 @@ declare class Node {
     partId: number;
     nodeId: number;
     state: number | null;
+    prevState: number | null;
     appliedTerrainNodeId: number;
     sideSizeLog2: [number, number, number, number];
     ready: boolean;
@@ -29,6 +30,7 @@ declare class Node {
     segment: Segment;
     _cameraInside: boolean;
     inFrustum: number;
+    _fadingNodes: Node[];
     constructor(SegmentPrototype: typeof Segment, planet: Planet, partId: number, parent: Node | null, id: number, tileZoom: number, extent: Extent);
     createChildrenNodes(): void;
     createBounds(): void;
@@ -40,14 +42,30 @@ declare class Node {
      * @returns {Node} -
      */
     getEqualNeighbor(side: number): Node | undefined;
-    renderTree(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean): void;
-    traverseNodes(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean): void;
+    traverseNodes(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean, zoomPassNode?: Node): void;
+    renderTree(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean, zoomPassNode?: Node): void;
     renderNode(inFrustum: number, onlyTerrain?: boolean, terrainReadySegment?: Segment | null, stopLoading?: boolean): void;
+    childrenPrevStateEquals(state: number): boolean;
+    isFading(): boolean;
+    _collectFadingNodes(): void;
+    clearNeighbors(): void;
+    _refreshTransitionOpacity(): void;
     /**
-     * Searching for neighbours and picking up current node to render processing.
+     * Picking up current node to render processing.
      * @public
      */
     addToRender(inFrustum: number): void;
+    applyNeighbor(node: Node, side: number): void;
+    /**
+     * Searching current node for its neighbours.
+     * @public
+     */
+    getRenderedNodesNeighbors(nodes: Node[]): void;
+    /**
+     * Checking if current node has a common side with input node and return side index N, E, S or W. Otherwise returns -1.
+     * @param {Node} node - Input node
+     * @returns {number} - Node side index
+     */
     getCommonSide(node: Node): number;
     whileNormalMapCreating(): void;
     whileTerrainLoading(terrainReadySegment?: Segment | null): void;