#151 Upgrade lithosphere, more uncertainty ellipse options, docs

NASA-AMMOS · Feb 24, 2022 · 0fc6d17 · 0fc6d17
1 parent 609178b
commit 0fc6d17
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 75 deletions.
diff --git a/docs/pages/markdowns/Vector.md b/docs/pages/markdowns/Vector.md
@@ -211,9 +211,14 @@ Example:
     - `axisUnit`: "meters || kilometers",
     - `angleProp`: Prop path to the rotation of the ellipse.
     - `angleUnit`: "deg || rad"
-    - `color`: A css fill color. Will be made more transparent than set.
-    - `color3d`: 3d analogy for `color`.
-    - `depth3d`: Depth in meters for 3d ellipse curve.
+    - `color`: A css fill color. Will be made more transparent than set. Default 'white'
+    - `fillOpacity`: Map and clamped ellipse fill opacity. 0 to 1. Default 0.25
+    - `strokeColor`: Map and clamped ellipse stroke/border color. Default 'black'
+    - `weight`: Map and clamped ellipse stroke/border weight/thickness. Default 1
+    - `opacity`: Overall Map and clamped ellipse opacity. Default 0.8
+    - `color3d`: 3d curtain ellipse color. Can be an array for a vertical gradient: ["rgba(0,0,0,0)", "#26A8FF"]
+    - `depth3d`: Depth in meters for 3d ellipse curve. Default 2
+    - `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.
     - `path`: A url to a (preferably) top-down north-facing orthographic image.

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -95,7 +95,7 @@
     "jest-resolve": "24.9.0",
     "jest-watch-typeahead": "0.4.2",
     "jquery": "^3.5.1",
-    "lithosphere": "file:../../npm-local/lithosphere-1.2.1.tgz",
+    "lithosphere": "^1.3.0",
     "mark.js": "^8.11.1",
     "memorystore": "^1.6.2",
     "mini-css-extract-plugin": "0.9.0",

diff --git a/src/essence/Basics/Layers_/LayerConstructors.js b/src/essence/Basics/Layers_/LayerConstructors.js
@@ -329,74 +329,84 @@ export const constructSublayers = (geojson, layerObj) => {
         layerObj,
         'variables.markerAttachments.uncertainty'
     )
-    const uncertaintyStyle = {
-        fillOpacity: 0.25,
-        fillColor: uncertaintyVar.color || 'white',
-        color: 'black',
-        weight: 1,
-        opacity: 0.8,
-        className: 'noPointerEventsImportant',
-    }
-    // For Globe Curtains
-    const uncertaintyEllipseFeatures = []
-    const depth3d = uncertaintyVar.depth3d || 6
-    geojson.features.forEach((f) => {
-        let uncertaintyAngle = parseFloat(
-            F_.getIn(f.properties, uncertaintyVar.angleProp, 0)
-        )
-        if (uncertaintyVar.angleUnit === 'rad')
-            uncertaintyAngle = uncertaintyAngle * (180 / Math.PI)
+    let uncertaintyStyle
+    let curtainUncertaintyOptions
+    let clampedUncertaintyOptions
+    if (uncertaintyVar) {
+        uncertaintyStyle = {
+            fillOpacity: uncertaintyVar.fillOpacity || 0.25,
+            fillColor: uncertaintyVar.color || 'white',
+            color: uncertaintyVar.strokeColor || 'black',
+            weight: uncertaintyVar.weight || 1,
+            opacity: uncertaintyVar.opacity || 0.8,
+            className: 'noPointerEventsImportant',
+        }
+        // For Globe Curtains
+        const uncertaintyEllipseFeatures = []
+        const depth3d = uncertaintyVar.depth3d || 2
+        geojson.features.forEach((f) => {
+            let uncertaintyAngle = parseFloat(
+                F_.getIn(f.properties, uncertaintyVar.angleProp, 0)
+            )
+            if (uncertaintyVar.angleUnit === 'rad')
+                uncertaintyAngle = uncertaintyAngle * (180 / Math.PI)
 
-        if (f.geometry.type === 'Point') {
-            const feature = F_.toEllipse(
-                {
-                    lat: f.geometry.coordinates[1],
-                    lng: f.geometry.coordinates[0],
-                },
-                {
-                    x: F_.getIn(f.properties, uncertaintyVar.xAxisProp, 1),
-                    y: F_.getIn(f.properties, uncertaintyVar.yAxisProp, 1),
-                },
-                window.mmgisglobal.customCRS,
-                {
-                    units: uncertaintyVar.axisUnits || 'meters',
-                    steps: 32,
-                    angle: uncertaintyAngle,
+            if (f.geometry.type === 'Point') {
+                const feature = F_.toEllipse(
+                    {
+                        lat: f.geometry.coordinates[1],
+                        lng: f.geometry.coordinates[0],
+                    },
+                    {
+                        x: F_.getIn(f.properties, uncertaintyVar.xAxisProp, 1),
+                        y: F_.getIn(f.properties, uncertaintyVar.yAxisProp, 1),
+                    },
+                    window.mmgisglobal.customCRS,
+                    {
+                        units: uncertaintyVar.axisUnits || 'meters',
+                        steps: 32,
+                        angle: uncertaintyAngle,
+                    }
+                )
+                for (
+                    let i = 0;
+                    i < feature.geometry.coordinates[0].length;
+                    i++
+                ) {
+                    feature.geometry.coordinates[0][i][2] =
+                        f.geometry.coordinates[2] + depth3d
                 }
-            )
-            for (let i = 0; i < feature.geometry.coordinates[0].length; i++) {
-                feature.geometry.coordinates[0][i][2] =
-                    f.geometry.coordinates[2] + depth3d
+                uncertaintyEllipseFeatures.push(feature)
             }
-            uncertaintyEllipseFeatures.push(feature)
-        }
-    })
+        })
 
-    let curtainUncertaintyOptions = {
-        name: `markerAttachmentUncertainty_${layerObj.name}Curtain`,
-        on: true,
-        opacity: uncertaintyVar.opacity3d || 0.5,
-        imageColor: uncertaintyVar.color3d || uncertaintyVar.color || '#FFFF00',
-        depth: depth3d + 1,
-        geojson: {
-            type: 'FeatureCollection',
-            features: uncertaintyEllipseFeatures,
-        },
-    }
-    let clampedUncertaintyOptions = {
-        name: `markerAttachmentUncertainty_${layerObj.name}Clamped`,
-        on: true,
-        order: -9999,
-        opacity: 1,
-        minZoom: 0,
-        maxZoom: 100,
-        geojson: {
-            type: 'FeatureCollection',
-            features: uncertaintyEllipseFeatures,
-        },
-        style: {
-            default: uncertaintyStyle,
-        },
+        curtainUncertaintyOptions = {
+            name: `markerAttachmentUncertainty_${layerObj.name}Curtain`,
+            on: true,
+            opacity: uncertaintyVar.opacity3d || 0.5,
+            imageColor:
+                uncertaintyVar.color3d || uncertaintyVar.color || '#FFFF00',
+            depth: depth3d + 1,
+            geojson: {
+                type: 'FeatureCollection',
+                features: uncertaintyEllipseFeatures,
+            },
+        }
+        clampedUncertaintyOptions = {
+            name: `markerAttachmentUncertainty_${layerObj.name}Clamped`,
+            on: true,
+            order: -9999,
+            opacity: 1,
+            minZoom: 0,
+            maxZoom: 100,
+            geojson: {
+                type: 'FeatureCollection',
+                features: uncertaintyEllipseFeatures,
+            },
+            style: {
+                default: uncertaintyStyle,
+            },
+        }
     }
 
     // For Leaflet