@openglobus/og 0.14.4 → 0.15.0

package/src/og/control/SimpleSkyBackground.js

@@ -6,6 +6,7 @@
 
 import { Control } from "./Control.js";
 import { Program } from '../webgl/Program.js';
+import { htmlColorToRgb } from "../utils/shared.js";
 
 /**
  * Frame per second(FPS) display control.
@@ -19,11 +20,28 @@ class SimpleSkyBackground extends Control {
             name: "SimpleSkyBackground",
             ...options
         });
+
+        this._colorOne = new Float32Array([1.0, 1.0, 1.0]);
+        this._colorTwo = new Float32Array([0.0, 153.0 / 255.0, 221.0 / 255.0]);
+    }
+
+    set colorOne(htmlColor) {
+        let rgb = htmlColorToRgb(htmlColor);
+        this._colorOne[0] = rgb.x;
+        this._colorOne[1] = rgb.y;
+        this._colorOne[2] = rgb.z;
+    }
+
+    set colorTwo(htmlColor) {
+        let rgb = htmlColorToRgb(htmlColor);
+        this._colorTwo[0] = rgb.x;
+        this._colorTwo[1] = rgb.y;
+        this._colorTwo[2] = rgb.z;
     }
 
     oninit() {
         this.renderer.handler.addProgram(simpleSkyBackgroundShader());
-        this.planet.events.on("draw", this._drawBackground, this);
+        this.activate();
     }
 
     onactivate() {
@@ -44,13 +62,15 @@ class SimpleSkyBackground extends Control {
         gl.disable(gl.DEPTH_TEST);
 
         sh.activate();
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.renderer._screenFrameCornersBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.renderer.screenFramePositionBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
 
         gl.uniform3fv(shu.camPos, [cam.eye.x, cam.eye.y, cam.eye.z]);
         gl.uniform2fv(shu.iResolution, [h.getWidth(), h.getHeight()]);
         gl.uniform1f(shu.fov, cam.getViewAngle());
         gl.uniform1f(shu.earthRadius, this.planet.ellipsoid.getPolarSize() + 1);
+        gl.uniform3fv(shu.colorOne, this._colorOne);
+        gl.uniform3fv(shu.colorTwo, this._colorTwo);
 
         gl.uniformMatrix4fv(shu.viewMatrix, false, cam._viewMatrix._m);
 
@@ -67,26 +87,29 @@ export function simpleSkyBackground(options) {
 function simpleSkyBackgroundShader() {
     return new Program("simpleSkyBackground", {
         uniforms: {
-            iResolution: "vec2", fov: "float", camPos: "vec3", earthRadius: "float", //projectionMatrix: "mat4",
-            viewMatrix: "mat4"
+            iResolution: "vec2", fov: "float",
+            camPos: "vec3",
+            earthRadius: "float",
+            viewMatrix: "mat4",
+            colorOne: "vec3",
+            colorTwo: "vec3"
         }, attributes: {
             corners: "vec3"
-        }, vertexShader: `attribute vec2 corners;
-            
+        }, vertexShader:
+            `attribute vec2 corners;
+                        
             varying vec2 tc;
             
             void main(void) {
                 gl_Position = vec4(corners, 0.0, 1.0);
                 tc = corners * 0.5 + 0.5;
-            }`, fragmentShader: `precision highp float;
+            }`, fragmentShader:
+            `precision highp float;
             
             #define MAX 10e10
             #define PI 3.14159265359
             #define rad(x) x * PI / 180.
-            #define ZERO vec3(0.0)
-           
-            const vec3 START_COLOR = vec3(1.0);
-            const vec3 END_COLOR = vec3(0.0, 153.0/255.0, 221.0/255.0);
+            #define ZERO vec3(0.0)          
            
             #define RED vec4(1.0, 0.0, 0.0, 1.0)
             #define GREEN vec4(0.0, 1.0, 0.0, 1.0)         
@@ -96,6 +119,9 @@ function simpleSkyBackgroundShader() {
             uniform float fov;
             uniform float earthRadius;
             uniform mat4 viewMatrix;
+            
+            uniform vec3 colorOne;
+            uniform vec3 colorTwo;
                          
             varying vec2 tc;
                         
@@ -176,7 +202,7 @@ function simpleSkyBackgroundShader() {
                 
                 float maxI = sqrt(bigRadius * bigRadius + bigRadius * bigRadius);
                                    
-                gl_FragColor = vec4(mix(START_COLOR, END_COLOR, Ix / maxI), 1.0);
+                gl_FragColor = vec4(mix(colorOne, colorTwo, Ix / maxI), 1.0);
             }`
     });
 }

package/src/og/control/Sun.js

@@ -123,8 +123,10 @@ class Sun extends Control {
                 var tr = Vec3.proj_b_to_plane(cam._r, n, cam._r)
                     .normalize()
                     .scale(this.offsetHorizontal); // right
+
                 var d = tu.add(tr);
                 var pos = cam.eye.add(d);
+
                 if (this._k > 0) {
                     this._k -= 0.01;
                     let rot = Quat.getRotationBetweenVectors(

package/src/og/control/ZoomControl.js

@@ -6,6 +6,17 @@
 
 import { Control } from "./Control.js";
 import { Key } from "../Lock.js";
+import { Button } from "../ui/Button.js";
+
+const ICON_PLUS_SVG = '<?xml version="1.0"?>' +
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
+    '    <path d="M 11 5 L 11 11 L 5 11 L 5 13 L 11 13 L 11 19 L 13 19 L 13 13 L 19 13 L 19 11 L 13 11 L 13 5 L 11 5 z"/>' +
+    '</svg>';
+
+const ICON_MINUS_SVG = '<?xml version="1.0"?>' +
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
+    '    <path d="M 5 11 L 5 13 L 19 13 L 19 11 L 5 11 z"/>' +
+    '</svg>';
 
 /**
  * Planet zoom buttons control.
@@ -19,57 +30,34 @@ class ZoomControl extends Control {
 
         this._keyLock = new Key();
 
-        this.planet = null;
-
         this._move = 0;
     }
 
     oninit() {
-        var zoomDiv = document.createElement("div"),
-            btnZoomIn = document.createElement("button"),
-            btnZoomOut = document.createElement("button");
-
-        zoomDiv.className = "ogZoomControl";
-        btnZoomIn.className = "ogZoomButton ogZoomIn";
-        btnZoomOut.className = "ogZoomButton ogZoomOut";
-
-        zoomDiv.appendChild(btnZoomIn);
-        zoomDiv.appendChild(btnZoomOut);
-
-        this.renderer.div.appendChild(zoomDiv);
-
-        btnZoomIn.addEventListener("mousedown", (e) => this.zoomIn());
-        btnZoomIn.addEventListener("mouseup", (e) => this.stopZoom());
 
-        btnZoomOut.addEventListener("mousedown", (e) => this.zoomOut());
-        btnZoomOut.addEventListener("mouseup", (e) => this.stopZoom());
-
-        btnZoomIn.addEventListener("touchstart", (e) => {
-            e.preventDefault();
-            this.zoomIn();
-        });
-        btnZoomIn.addEventListener("touchend", (e) => {
-            e.preventDefault();
-            this.stopZoom();
-        });
-        btnZoomIn.addEventListener("touchcancel", (e) => {
-            e.preventDefault();
-            this.stopZoom();
+        let zoomInBtn = new Button({
+            classList: ["og-map-button", "og-zoomin-button"],
+            icon: ICON_PLUS_SVG,
+            appendTo: this.renderer.div
         });
 
-        btnZoomOut.addEventListener("touchstart", (e) => {
-            e.preventDefault();
-            this.zoomOut();
-        });
-        btnZoomOut.addEventListener("touchend", (e) => {
-            e.preventDefault();
-            this.stopZoom();
-        });
-        btnZoomOut.addEventListener("touchcancel", (e) => {
-            e.preventDefault();
-            this.stopZoom();
+        let zoomOutBtn = new Button({
+            classList: ["og-map-button", "og-zoomout-button"],
+            icon: ICON_MINUS_SVG,
+            appendTo: this.renderer.div
         });
 
+        zoomInBtn.on("mousedown", (e) => this.zoomIn());
+        zoomInBtn.on("mouseup", (e) => this.stopZoom());
+        zoomOutBtn.on("mousedown", (e) => this.zoomOut());
+        zoomOutBtn.on("mouseup", (e) => this.stopZoom());
+        zoomInBtn.on("touchstart", (e) => this.zoomIn());
+        zoomInBtn.on("touchend", (e) => this.stopZoom());
+        zoomInBtn.on("touchcancel", (e) => this.stopZoom());
+        zoomOutBtn.on("touchstart", (e) => this.zoomOut());
+        zoomOutBtn.on("touchend", (e) => this.stopZoom());
+        zoomOutBtn.on("touchcancel", (e) => this.stopZoom());
+
         this.renderer.events.on("draw", this._draw, this);
     }
 

package/src/og/control/ruler/RulerScene.js

@@ -13,11 +13,6 @@ import { Object3d } from '../../Object3d.js';
 
 const OUTLINE_COUNT = 120;
 
-const MAX_SCALE = 0.005;
-const MIN_SCALE = 0.001;
-const MAX_SCALE_HEIGHT = 3000.0;
-const MIN_SCALE_HEIGHT = 19000000.0;
-
 function distanceFormat(v) {
     if (v > 1000) {
         return `${(v / 1000).toFixed(1)} km`;
@@ -83,9 +78,7 @@ class RulerScene extends RenderNode {
                     instanced: true,
                     tag: "ruler",
                     color: "rgb(0,305,0)",
-                    vertices: obj3d.vertices,
-                    indices: obj3d.indexes,
-                    normals: obj3d.normals
+                    object3d: obj3d
                 },
                 properties: {
                     name: "start"
@@ -97,14 +90,11 @@ class RulerScene extends RenderNode {
                     instanced: true,
                     tag: "ruler",
                     color: "rgb(455,0,0)",
-                    vertices: obj3d.vertices,
-                    indices: obj3d.indexes,
-                    normals: obj3d.normals
+                    object3d: obj3d
                 },
                 properties: {
                     name: "end"
                 }
-
             })
         ];
 
@@ -119,7 +109,9 @@ class RulerScene extends RenderNode {
         this._cornersLayer = new Vector("corners", {
             entities: [this._cornerEntity[0], this._cornerEntity[1]],
             pickingEnabled: true,
-            displayInLayerSwitcher: false
+            displayInLayerSwitcher: false,
+            scaleByDistance: [100, 4000000, 1.0],
+            pickingScale: 2
         });
     }
 
@@ -308,22 +300,12 @@ class RulerScene extends RenderNode {
         this._cornerEntity[1].geoObject.setVisibility(false);
     }
 
-    getScale(cart) {
-        let r = this.renderer;
-        let t = 1.0 - (r.activeCamera._lonLat.height - MAX_SCALE_HEIGHT) / (MIN_SCALE_HEIGHT - MAX_SCALE_HEIGHT);
-        let _distanceToCamera = cart.distance(r.activeCamera.eye);
-        return math.lerp(t < 0 ? 0 : t, MAX_SCALE, MIN_SCALE) * _distanceToCamera;
-    }
-
     frame() {
         let t = this._trackEntity.polyline.getPath3v()[0];
         if (t) {
             this._cornerEntity[0].setCartesian3v(t[0].clone());
             this._cornerEntity[1].setCartesian3v(t[t.length - 1].clone());
 
-            this._cornerEntity[0].geoObject.setScale(this.getScale(this._cornerEntity[0].getCartesian()));
-            this._cornerEntity[1].geoObject.setScale(this.getScale(this._cornerEntity[1].getCartesian()));
-
             if (!this._ignoreTerrain) {
                 let res = 0;
                 for (let i = 0, len = t.length - 1; i < len; i++) {

package/src/og/control/selection/Selection.js

@@ -5,25 +5,25 @@
 "use strict";
 
 import { Control } from "../Control.js";
-import { elementFactory, btnClickHandler } from "../UIhelpers.js";
 import { SelectionScene } from "./SelectionScene.js";
+import { ToggleButton } from "../../ui/ToggleButton.js";
 
+const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M2.1 0v1.914H0v6h3V3h5.1V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h6V0h-6zm9 0v3h1.8v1.2h3V0h-4.8zm1.8 7.2v6h3v-6h-3zM0 10.913v6h3v-6H0zM66.9 16.2v6h3v-6h-3zM0 19.914v6h3v-6H0zM66.9 25.2v6h3v-6h-3zM0 28.914v6h3v-6H0zM66.9 34.2v6h3v-6h-3zM0 37.914v6h3v-6H0zM66.9 43.2v6h3v-6h-3zM0 46.914v6h3v-6H0zM66.9 52.2v6h3v-6h-3zM0 55.914v5.191h3.809v-3H3v-2.19H0zm6.809 2.191v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9 0v3h6v-3h-6zm9.648 1.899a2.076 2.076 0 0 0-2.19 2.324l3.137 33.676c.2 1.635 2.135 2.399 3.397 1.34l6.623-5.371l2.969 5.142c1.707 2.958 4.417 3.684 7.375 1.977c2.957-1.708 3.684-4.417 1.976-7.375l-2.959-5.125l7.848-3.008c1.548-.564 1.855-2.62.539-3.611L71.576 60.416a2.073 2.073 0 0 0-1.119-.412z" fill="#000000"></path></svg>`;
 
 /**
  * Activate Selection
- * @class 
+ * @class
  * @extends {Control}
  * @param {Object} [options] - Control options.
- * @param {Array} [options.activationIconClasses] - array with a list of classes to change the button icons
  * @param {boolean} [options.ignoreTerrain=false].
  * @param {function} options.onSelect - callback (extent) => {} where extent is selected extent array [minLon,minLat,maxLon,maxLat]
  * @param {boolean} [options.autoSelectionHide=false] - clear selection rectangle  after passing extent to callback
  * @example:
- * to use bootstrap icons, include 
+ * to use bootstrap icons, include
  *  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
- *  
+ *
  * new Selection({
- *       activationIconClasses: ['bi', 'bi-bounding-box-circles'],
  *       ignoreTerrain: false,
  *       autoSelectionHide:true,
  *       onSelect: (extent) => {
@@ -54,17 +54,19 @@ import { SelectionScene } from "./SelectionScene.js";
 class Selection extends Control {
     constructor(options = {}) {
         super(options);
-        this._activationIconClasses = options.activationIconClasses || null;
-      
+
         this._selectorScene = new SelectionScene({
             name: `selectionScene:${this._id}`,
             ignoreTerrain: options.ignoreTerrain,
             onSelect: options.onSelect,
             autoSelectionHide: options.autoSelectionHide
         });
-        
-        
-        
+
+
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-selection_button"],
+            icon: ICON_BUTTON_SVG
+        });
     }
 
     set ignoreTerrain(v) {
@@ -72,20 +74,16 @@ class Selection extends Control {
     }
 
     oninit() {
-        this.createSelectorButton();
+        this._toggleBtn.appendTo(this.renderer.div);
 
+        this._toggleBtn.on("change", (isActive) => {
+            if (isActive) {
+                this.activate();
+            } else {
+                this.deactivate();
+            }
+        });
 
-        
-        btnClickHandler('og-selection-menu-btn', null, null, 
-            '#og-selection-menu-icon',
-            (off) => {
-                if (off){
-                    this.deactivate();
-                }  else {
-                    this.activate();
-                }
-            });
-        
         this._selectorScene.bindPlanet(this.planet);
     }
 
@@ -96,33 +94,6 @@ class Selection extends Control {
     ondeactivate() {
         this.renderer.removeNode(this._selectorScene);
     }
-
-    createSelectorButton() {
-        let btnIcon  = 
-                elementFactory('div',
-                    {id: 'og-selection-menu-icon', class: 'og-icon-holder'});
-                    
-       btnIcon.setAttribute("style", "font-size:24px; display: flex; justify-content: center; align-items: center; background: none !important");
-       
-        if (this._activationIconClasses){
-            btnIcon.classList.add(... this._activationIconClasses);
-        } else {
-            let defaultIcon = document.createElement("span");
-            defaultIcon.setAttribute("style", "width: 24px;height: 24px;border: 1px solid black;");
-            btnIcon.appendChild(defaultIcon);
-        }
-        
-        let btn = elementFactory('div', {
-            id: 'og-selection-menu-btn',
-            class: 'og-geo-image-dragger og-menu-btn og-OFF'
-        },btnIcon);
-        
-        btn.setAttribute("style", "top: 116px; right: 12px");
-      
-        
-        this.renderer.div.appendChild(btn);
-    }
-
 }
 
 export { Selection };

package/src/og/control/selection/SelectionScene.js

@@ -79,11 +79,9 @@ class SelectionScene extends RenderNode {
                 geoObject: {
                     scale: 1,
                     instanced: true,
-                    tag: "ruler",
+                    tag: "selection",
                     color: "rgb(0,305,0)",
-                    vertices: obj3d.vertices,
-                    indices: obj3d.indexes,
-                    normals: obj3d.normals
+                    object3d: obj3d
                 },
                 properties: {
                     name: "start"
@@ -93,16 +91,13 @@ class SelectionScene extends RenderNode {
                 geoObject: {
                     scale: 1,
                     instanced: true,
-                    tag: "ruler",
+                    tag: "selection",
                     color: "rgb(455,0,0)",
-                    vertices: obj3d.vertices,
-                    indices: obj3d.indexes,
-                    normals: obj3d.normals
+                    object3d: obj3d
                 },
                 properties: {
                     name: "end"
                 }
-
             })
         ];
 
@@ -117,7 +112,9 @@ class SelectionScene extends RenderNode {
         this._cornersLayer = new Vector("corners", {
             entities: [this._cornerEntity[0], this._cornerEntity[1]],
             pickingEnabled: true,
-            displayInLayerSwitcher: false
+            displayInLayerSwitcher: false,
+            scaleByDistance: [1.0, 4000000, 0.01],
+            pickingScale: 2
         });
     }
 
@@ -153,6 +150,7 @@ class SelectionScene extends RenderNode {
         this.renderer.events.on("lup", this._onMouseLup_, this);
 
         this._planet.addLayer(this._trackLayer);
+
         this._planet.addLayer(this._cornersLayer);
 
     }
@@ -182,19 +180,17 @@ class SelectionScene extends RenderNode {
         if (!this._startLonLat) {
 
 
-
             this._propsLabel.label.setVisibility(false);
 
             this._trackEntity.polyline.setPath3v([]);
 
 
-
             this._cornerEntity[0].geoObject.setVisibility(true);
             this._cornerEntity[1].geoObject.setVisibility(true);
 
             this.renderer.controls.mouseNavigation.deactivate();
             this._startLonLat = this._planet.getLonLatFromPixelTerrain(e);
-            
+
             let startPos = this._planet.ellipsoid.lonLatToCartesian(this._startLonLat);
             this._cornerEntity[0].setCartesian3v(startPos);
             this._cornerEntity[1].setCartesian3v(startPos);
@@ -207,6 +203,8 @@ class SelectionScene extends RenderNode {
             this._pickedCorner = null;
             this._anchorLonLat = null;
 
+            this._propsLabel.label.setVisibility(true);
+
             if (this._onSelect && typeof this._onSelect === 'function') {
                 let startLonLat = this._cornerEntity[0].getLonLat();
                 let endLonLat = this._cornerEntity[1].getLonLat();
@@ -278,8 +276,8 @@ class SelectionScene extends RenderNode {
         this._trackEntity.polyline.setPath3v([path]);
 
         if (this._ignoreTerrain) {
-//            this._propsLabel.setCartesian3v(path[Math.floor(path.length / 2)]);
-//            this._propsLabel.label.setText(`${distanceFormat(length)}, ${Math.round(this._heading)} deg`);
+            // this._propsLabel.setCartesian3v(path[Math.floor(path.length / 2)]);
+            // this._propsLabel.label.setText(`${distanceFormat(length)}, ${Math.round(this._heading)} deg`);
         }
     }
 
@@ -299,30 +297,18 @@ class SelectionScene extends RenderNode {
         this._cornerEntity[1].geoObject.setVisibility(false);
     }
 
-    getScale(cart) {
-        let r = this.renderer;
-        let t = 1.0 - (r.activeCamera._lonLat.height - MAX_SCALE_HEIGHT) / (MIN_SCALE_HEIGHT - MAX_SCALE_HEIGHT);
-        let _distanceToCamera = cart.distance(r.activeCamera.eye);
-        return math.lerp(t < 0 ? 0 : t, MAX_SCALE, MIN_SCALE) * _distanceToCamera;
-    }
-
     frame() {
         let t = this._trackEntity.polyline.getPath3v()[0];
         if (t) {
-            this._cornerEntity[0].geoObject.setScale(this.getScale(this._cornerEntity[0].getCartesian()));
-            this._cornerEntity[1].geoObject.setScale(this.getScale(this._cornerEntity[1].getCartesian()));
-
             if (!this._ignoreTerrain) {
                 let res = 0;
                 for (let i = 0, len = t.length - 1; i < len; i++) {
                     res += t[i + 1].distance(t[i]);
                 }
 
-//                this._propsLabel.setCartesian3v(t[Math.floor(t.length / 2)]);
-//                this._propsLabel.label.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
+                this._propsLabel.setCartesian3v(t[Math.floor(t.length / 2)]);
+                this._propsLabel.label.setText(`${distanceFormat(res)}, ${Math.round(this._heading)} deg`);
             }
-
-
         }
     }
 

package/src/og/control/timeline/TimelineControl.js

@@ -0,0 +1,99 @@
+'use strict';
+
+import { Control } from '../Control.js';
+import { TimelineView } from './TimelineView.js';
+import { Dialog } from "../../ui/Dialog.js";
+import { ToggleButton } from "../../ui/ToggleButton.js";
+import { UTCtoDate } from "../../astro/jd.js";
+
+function addHours(date, hours) {
+    const temp = new Date(date);
+    temp.setHours(temp.getHours() + hours);
+    return temp;
+}
+
+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">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+    <metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+    <g><path d="M500,10C229.4,10,10,229.4,10,500s219.4,490,490,490s490-219.4,490-490S770.6,10,500,10z M800.3,800.3c-39,39-84.5,69.7-135,91C613,913.5,557.4,924.7,500,924.7s-112.9-11.2-165.3-33.3c-50.5-21.3-95.9-52-135-91c-39-39-69.7-84.5-91-135C86.5,612.9,75.3,557.4,75.3,500s11.2-112.9,33.3-165.3c21.3-50.5,52-95.9,91-135c39-39,84.5-69.7,135-91C387.1,86.5,442.6,75.3,500,75.3s112.9,11.2,165.3,33.3c50.5,21.3,95.9,52,135,91c39,39,69.7,84.5,91,135c22.1,52.3,33.3,107.9,33.3,165.3s-11.2,112.9-33.3,165.3C869.9,715.8,839.3,761.2,800.3,800.3z"/><path d="M761.3,532.7H532.7V304c0-18.1-14.6-32.7-32.7-32.7s-32.7,14.6-32.7,32.7v261.3l0,0c0,18.1,14.6,32.7,32.7,32.7h261.3c18.1,0,32.7-14.6,32.7-32.7l0,0C794,547.3,779.4,532.7,761.3,532.7z"/></g>
+</svg>`;
+
+class TimelineControl extends Control {
+    constructor(options = {}) {
+        if (!options.name || options.name === "") {
+            options.name = "timeline";
+        }
+        super(options);
+
+        let currentDate = new Date();
+        let startDate = addHours(currentDate, -12), endDate = addHours(currentDate, 12);
+
+        this._timelineView = new TimelineView({
+            rangeStart: startDate,
+            rangeEnd: endDate
+        });
+
+        this._toggleBtn = new ToggleButton({
+            classList: ["og-map-button", "og-timeline_button"],
+            icon: ICON_BUTTON_SVG
+        });
+
+        this._dialog = new Dialog({
+            title: "Timeline",
+            visible: false,
+            resizable: true,
+            useHide: true,
+            top: 10,
+            left: 60,
+            width: 600,
+            height: 115,
+            minHeight: 115,
+            maxHeight: 110
+        });
+
+        this._dialog.on("visibility", (v) => {
+            this._toggleBtn.setActive(v);
+        });
+    }
+
+    oninit() {
+
+        let $container = this.renderer.div;
+
+        this._toggleBtn.appendTo($container);
+        this._dialog.appendTo($container);
+
+        this._toggleBtn.on("change", (isActive) => {
+            this._dialog.setVisibility(isActive);
+            if (isActive) {
+                this._timelineView.resize();
+            }
+        });
+
+        this._timelineView.appendTo(this._dialog.container);
+
+        this._timelineView.on("setcurrent", (d) => {
+            this.renderer.handler.defaultClock.setDate(d);
+        });
+
+        this._timelineView.on("startdrag", () => {
+            this.renderer.controls.mouseNavigation.deactivate();
+        });
+
+        this._timelineView.on("stopdrag", () => {
+            this.renderer.controls.mouseNavigation.activate();
+        });
+
+        this._timelineView.on("startdragcurrent", () => {
+            this.renderer.controls.mouseNavigation.deactivate();
+        });
+
+        this._timelineView.on("stopdragcurrent", () => {
+            this.renderer.controls.mouseNavigation.activate();
+        });
+    }
+}
+
+export { TimelineControl };