#298 TimeUI Pan and Zoom and Improvements

API/Backend/Utils/routes/utils.js

@@ -87,7 +87,8 @@ router.get("/queryTilesetTimes", function (req, res, next) {
               const split = name.split("Z-");
               let t = split.shift();
               const n = split.join("");
-              t = t.replace(/_/g, ":") + "Z";
+              t = t.replace(/_/g, ":");
+              if (t[t.length - 1] !== "Z") t += "Z";
               dirStore[relUrlSplit[0]].dirs.push({ t: t, n: n });
             });
 

run/init-db.js

@@ -39,6 +39,7 @@ async function initializeDatabase() {
           "connection"
         );
         keepGoing();
+        return null;
       })
       .catch((err) => {
         logger(
@@ -47,6 +48,7 @@ async function initializeDatabase() {
           "connection"
         );
         keepGoing();
+        return null;
       });
 
     async function keepGoing() {
@@ -76,6 +78,7 @@ async function initializeDatabase() {
             .then(() => {
               logger("info", `Created POSTGIS extension.`, "connection");
               resolve();
+              return null;
             })
             .catch((err) => {
               logger(
@@ -85,6 +88,7 @@ async function initializeDatabase() {
               );
 
               resolve();
+              return null;
             });
         })
         .catch((err) => {
@@ -96,7 +100,9 @@ async function initializeDatabase() {
             err
           );
           reject();
+          return null;
         });
     }
+    return null;
   });
 }

src/essence/Ancillary/Coordinates.js

@@ -765,6 +765,8 @@ function toggleTimeUI() {
     const newBottom = active ? 0 : 40
     const timeBottom = active ? -40 : 0
 
+    Map_.map._fadeAnimated = active
+
     $('#CoordinatesDiv').css({
         bottom: newBottom + (UserInterface.pxIsTools || 0) + 'px',
     })

src/essence/Ancillary/TimeControl.js

@@ -37,12 +37,9 @@ var TimeControl = {
             return
         }
 
-        TimeControl.timeUI = TimeUI.init(timeInputChange)
+        TimeControl.timeUI = TimeUI.init(timeInputChange, TimeControl.enabled)
 
         //updateTime()
-        if (L_.configData.time.visible == false) {
-            TimeControl.toggleTimeUI(false)
-        }
 
         initLayerTimes()
         initLayerDataTimes()
@@ -51,14 +48,6 @@ var TimeControl = {
         if ((TimeControl.enabled = true && TimeControl.timeUI != null))
             TimeControl.timeUI.fina()
     },
-    toggleTimeUI: function (isOn) {
-        d3.select('#timeUI').style('visibility', function () {
-            if (!isOn) $('#toggleTimeUI').click()
-
-            return isOn === true ? 'visible' : 'hidden'
-        })
-        return isOn
-    },
     setTime: function (
         startTime,
         endTime,
@@ -173,8 +162,7 @@ var TimeControl = {
             }
 
             if (L_.toggledArray[layer.name] || evenIfOff) {
-                L_.toggleLayer(layer)
-                L_.toggleLayer(layer)
+                L_.layersGroup[layer.name].refresh()
             }
         } else {
             var originalUrl = layer.url

src/essence/Ancillary/TimeUI.css

@@ -1,5 +1,5 @@
 #timeUI {
-    background: rgba(29, 31, 32, 0.65);
+    background: rgba(15, 16, 16, 0.6);
     height: 40px;
     width: 100%;
     position: absolute;
@@ -86,7 +86,7 @@
     font-size: 11px;
     text-transform: uppercase;
     pointer-events: none;
-    color: var(--color-a5);
+    color: var(--color-h);
 }
 
 #mmgisTimeUITimeline {
@@ -95,33 +95,20 @@
     position: relative;
     user-select: none;
 }
-#mmgisTimeUITimelineFixedStartSlider {
-    position: absolute;
-    left: 200px;
-    width: 4px;
-    height: 40px;
-    background: var(--color-h);
-    pointer-events: none;
-}
 #mmgisTimeUITimelineSlider {
     width: 100%;
 }
 #mmgisTimeUITimelineSlider .rangeBar {
     background: var(--color-h);
     height: 2px;
     opacity: 0.75;
+    pointer-events: none;
 }
 #mmgisTimeUITimelineSlider .rangeSlider {
     height: 2px;
     margin: 20px 0px 20px 4px;
     background: var(--color-a2);
 }
-#mmgisTimeUITimelineSlider .rangeHandle:first-child {
-    display: none;
-    pointer-events: none;
-    width: 0px;
-    padding: 0px;
-}
 #mmgisTimeUITimelineSlider .rangeHandle {
     top: 0px;
     width: 20px;
@@ -144,6 +131,11 @@
     margin: 0px 7px;
 }
 
+#mmgisTimeUITimelineInner {
+    height: 100%;
+    width: 100%;
+    position: absolute;
+}
 .mmgisTimeUITick {
     position: absolute;
     top: 0;
@@ -156,14 +148,13 @@
 }
 .mmgisTimeUITick .mmgisTimeUITickBig {
     height: 40px;
-    background: var(--color-a4);
+    background: var(--color-a3);
     width: 1px;
 }
 .mmgisTimeUITick .mmgisTimeUITickLabel {
     height: 40px;
     line-height: 20px;
     padding-left: 4px;
-    text-transform: uppercase;
     font-size: 13px;
     color: var(--color-a7);
 }
@@ -215,23 +206,40 @@
     pointer-events: none;
 }
 #mmgisTimeUITimelineHisto > div {
-    background: var(--color-c2);
-    opacity: 0.38;
+    background: #056e94;
     height: 100%;
     transition: margin-top 0.2s ease-in-out;
 }
 
+#mmgisTimeUIModeDropdown {
+    background: var(--color-a-5);
+    width: 80px;
+}
+#mmgisTimeUIStepDropdown {
+    width: 80px;
+}
 #mmgisTimeUIRateDropdown {
     width: 60px;
 }
+#mmgisTimeUIModeDropdown .dropy__title i,
+#mmgisTimeUIStepDropdown .dropy__title i,
 #mmgisTimeUIRateDropdown .dropy__title i {
     color: var(--color-a5);
 }
+#mmgisTimeUIModeDropdown .dropy__title span,
+#mmgisTimeUIStepDropdown .dropy__title span,
 #mmgisTimeUIRateDropdown .dropy__title span {
     font-size: 12px;
     padding: 14px 0px 14px 12px;
     color: var(--color-a5);
 }
+#mmgisTimeUIModeDropdown .dropy__title span {
+    color: var(--color-a5);
+    text-transform: uppercase;
+}
+
+#mmgisTimeUIModeDropdown li a,
+#mmgisTimeUIStepDropdown li a,
 #mmgisTimeUIRateDropdown li a {
     font-size: 13px;
     padding: 5px 8px;