#485 Rover Image Overlay Improvements (#486)

* #485 Rover Image Overlay Improvments

* #485 Prevent reload/updates to layers through the mmgisAPI if one is already taking place

* #485 Support initialOpacity for imageOverlays w/ docs

* Remove dev consolelog

* #485 Rover Improvement fixes

* #485 Image overlay chache works (but is offset badly now)

* #485 Fix image_overlay updateVectorLayer flickering

* #485 Fix layerObj ref

config/js/config.js

@@ -2935,6 +2935,7 @@ function layerPopulateVariable(modalId, layerType) {
           },
           image: {
             initialVisibility: true,
+            initialOpacity: 1,
             path: "url to top-down ortho image. ex. public/images/rovers/PerseveranceTopDown.png",
             pathProp: "path to image. take priority over path",
             widthMeters: 2.6924,

docs/pages/APIs/JavaScript/Main/Main.md

@@ -197,6 +197,8 @@ This function updates an existing vector layer with a specified name and valid G
 - `inputData` - valid GeoJSON data
 - `keepN` - number of features to keep. A value less than or equal to 0 keeps all previous features
 
+Returns `false` if the layer could not be updated (either some parameters are wrong or that layer is already is the midst of being loaded).
+
 The following is an example of how to call the `updateVectorLayer` function:
 
 ```javascript
@@ -377,6 +379,8 @@ This function will reload the given layer by re-fetching the data and re-drawing
 - `evenIfOff` - _boolean_ | If true, reloads the layer even if the layer is not active
 - `evenIfControlled` - _boolean_ | If true, reloads the layer even if it's a "Controlled" layer
 
+Returns `false` if the layer could not be updated (either some parameters are wrong or that layer is already is the midst of being loaded).
+
 The following is an example of how to call the `reloadLayer` function:
 
 ```javascript

docs/pages/Configure/Kinds/Kinds.md

@@ -29,6 +29,7 @@ The Waypoint Kind only applies to point features and uses the `markerAttachments
 markerAttachments: {
     image: {
         initialVisibility: true,
+        initialOpacity: 1,
         path: "url to top-down ortho image. ex. public/images/rovers/PerseveranceTopDown.png",
         pathProp: "path to image. take priority over path",
         widthMeters: 2.6924,

docs/pages/Configure/Layers/Vector/Vector.md

@@ -203,6 +203,7 @@ Example:
         },
         "image": {
           "initialVisibility": true,
+          "initialOpacity": 1,
           "path": "url to top-down ortho image. ex. public/images/rovers/PerseveranceTopDown.png",
           "pathProp": "path to image. take priority over path",
           "widthMeters": 2.6924,
@@ -311,6 +312,7 @@ Example:
     - `opacity3d`: 3d curtain ellipse opacity
   - `image`: Places a scaled and orientated image under each marker. A sublayer.
     - `initialVisibility`: Whether the image sublayer is initially on. Users can toggle sublayers on and off in the layer settings in the LayersTool.
+    - `initialOpacity`: The inital image opacity. Users canchange sublayer opacity n the layer settings in the LayersTool. From 0 to 1. Default 1
     - `path`: A url to a (preferably) top-down north-facing orthographic image.
     - `pathProp`: A prop path to an image url. Take priority over path. Useful if the path is feature specific.
     - `widthMeters`: Width of image in meters in order to calculate scale.

src/essence/Ancillary/TimeControl.js

@@ -174,7 +174,7 @@ var TimeControl = {
             layer = L_.layers.data[layer]
         }
 
-        if (L_.layers.layer[layer.name] === null) return
+        if (L_.layers.layer[layer.name] === null) return false
 
         let layerTimeFormat =
             layer.time?.format == null
@@ -233,7 +233,7 @@ var TimeControl = {
                 // refresh map
                 if (evenIfControlled === true || layer.controlled !== true)
                     if (L_.layers.on[layer.name] || evenIfOff) {
-                        await Map_.refreshLayer(layer)
+                        return await Map_.refreshLayer(layer)
                     }
             }
         }

src/essence/Basics/Layers_/LayerConstructors.js

@@ -967,6 +967,25 @@ const uncertaintyEllipses = (geojson, layerObj, leafletLayerObject) => {
     let leafletLayerObjectUncertaintyEllipse
 
     if (uncertaintyVar) {
+        let existingOn = null
+        let existingOpacity =
+            uncertaintyVar.initialOpacity != null
+                ? uncertaintyVar.initialOpacity
+                : 1
+        if (L_.layers.attachments[L_.asLayerUUID(layerObj.name)]) {
+            existingOn =
+                L_.layers.attachments[L_.asLayerUUID(layerObj.name)]
+                    .uncertainty_ellipses.on
+            existingOpacity = L_.layers.opacity[layerObj.name]
+        }
+
+        const isOn =
+            existingOn != null
+                ? existingOn
+                : uncertaintyVar.initialVisibility != null
+                ? uncertaintyVar.initialVisibility
+                : true
+
         uncertaintyStyle = {
             fillOpacity: uncertaintyVar.fillOpacity || 0.25,
             fillColor: uncertaintyVar.color || 'white',
@@ -1018,7 +1037,7 @@ const uncertaintyEllipses = (geojson, layerObj, leafletLayerObject) => {
 
         curtainUncertaintyOptions = {
             name: `markerAttachmentUncertainty_${layerObj.name}Curtain`,
-            on: true,
+            on: isOn,
             opacity: uncertaintyVar.opacity3d || 0.5,
             imageColor:
                 uncertaintyVar.color3d || uncertaintyVar.color || '#FFFF00',
@@ -1030,9 +1049,9 @@ const uncertaintyEllipses = (geojson, layerObj, leafletLayerObject) => {
         }
         clampedUncertaintyOptions = {
             name: `markerAttachmentUncertainty_${layerObj.name}Clamped`,
-            on: true,
+            on: isOn,
             order: -9999,
-            opacity: 1,
+            opacity: existingOpacity,
             minZoom: 0,
             maxZoom: 100,
             geojson: {
@@ -1087,22 +1106,23 @@ const uncertaintyEllipses = (geojson, layerObj, leafletLayerObject) => {
             },
         }
 
+        const layer = L.geoJson(geojson, leafletLayerObjectUncertaintyEllipse)
+        layer.customClearLayers = function (layerName, subName) {
+            const sublayer = L_.layers.attachments[layerName][subName]
+            L_.Globe_.litho.removeLayer(sublayer.curtainLayerId)
+            L_.Globe_.litho.removeLayer(sublayer.clampedLayerId)
+        }
+
         return curtainUncertaintyOptions
             ? {
-                  on:
-                      uncertaintyVar.initialVisibility != null
-                          ? uncertaintyVar.initialVisibility
-                          : true,
+                  on: isOn,
                   type: 'uncertainty_ellipses',
                   curtainLayerId: curtainUncertaintyOptions.name,
                   curtainOptions: curtainUncertaintyOptions,
                   clampedLayerId: clampedUncertaintyOptions.name,
                   clampedOptions: clampedUncertaintyOptions,
                   geojson: geojson,
-                  layer: L.geoJson(
-                      geojson,
-                      leafletLayerObjectUncertaintyEllipse
-                  ),
+                  layer: layer,
                   title: 'Renders elliptical buffers about point features based on X and Y uncertainty properties.',
               }
             : false
@@ -1121,6 +1141,25 @@ const imageOverlays = (geojson, layerObj, leafletLayerObject) => {
         )
         let leafletLayerObjectImageOverlay
 
+        let existingOn = null
+        let existingOpacity =
+            imageVar.initialOpacity != null ? imageVar.initialOpacity : 1
+        if (L_.layers.attachments[L_.asLayerUUID(layerObj.name)]) {
+            existingOn =
+                L_.layers.attachments[L_.asLayerUUID(layerObj.name)]
+                    .image_overlays.on
+            existingOpacity =
+                L_.layers.attachments[L_.asLayerUUID(layerObj.name)]
+                    .image_overlays.opacity
+        }
+
+        const isOn =
+            existingOn != null
+                ? existingOn
+                : imageVar.initialVisibility != null
+                ? imageVar.initialVisibility
+                : true
+
         if (imageVar && imageShow === 'always')
             leafletLayerObjectImageOverlay = {
                 pointToLayer: (feature, latlong) => {
@@ -1239,30 +1278,20 @@ const imageOverlays = (geojson, layerObj, leafletLayerObject) => {
 
                     return L.layerGroup([
                         L.imageTransform(imageSettings.image, anchors, {
-                            opacity: 1,
+                            opacity: existingOpacity,
                             clip: anchors,
-                            id: `${layerObj.name}${
-                                imageSettings.image
-                            }${angle}${JSON.stringify(center)}`,
+                            id: `${layerObj.name}_${imageSettings.image}`,
+                            layerName: layerObj.name,
                         }),
                     ])
                 },
             }
-        let existingOn = null
-        if (L_.layers.attachments[L_.asLayerUUID(layerObj.name)])
-            existingOn =
-                L_.layers.attachments[L_.asLayerUUID(layerObj.name)]
-                    .image_overlays.on
 
-        const isOn =
-            existingOn != null
-                ? existingOn
-                : imageVar.initialVisibility != null
-                ? imageVar.initialVisibility
-                : true
         return imageShow === 'always'
             ? {
                   on: isOn,
+                  type: 'image_overlays',
+                  opacity: existingOpacity,
                   layer: L.geoJson(geojson, leafletLayerObjectImageOverlay),
                   title: 'Map rendered image overlays.',
               }