#20 Curtain Layers (#22)

* #20 Curtain Layer Part 1, also support node v16+ * #20 Fix curtain jitter and vertical exag and offset options * #20 onMouseMove and touch ups * #20 Curtain Layer type
NASA-AMMOS · Feb 24, 2022 · 012ac87 · 012ac87
1 parent a2f366e
commit 012ac87
Show file tree

Hide file tree

Showing 62 changed files with 3,152 additions and 2,325 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,26 +1,42 @@
-# CHANGELOG
+# LithoSphere CHANGELOG
 
 [Official Releases](https://github.com/NASA-AMMOS/LithoSphere/releases)
 
-## v1.0.0
+## v1.3.0
 
-LithoSphere's first release!
+_Feb 23, 2022_
 
-## v1.0.1
+#### Added
 
-### Added
+-   Curtain layer type
+-   Full local data example
 
--   Support for WMS tiles of any projection
--   A .tif tile parser
+## v1.2.0
 
-## v1.0.2
+_Jan 27, 2022_
 
-### Changed
+#### Added
 
--   PNG.js and zlib.js are now modules instead of globals
+-   Apply filters and blend modes to tile layers with `setLayerFilterEffect()`
+
+---
+
+## v1.1.0
+
+_Dec 13, 2021_
+
+#### Added
+
+-   Model layer type (.dae, .gltf, .obj)
+-   Bearings (directional arrows) for clamped vector points
+-   Keyboard navigation controls (wasd = pan, qe = rotate, rf = dolly, tg: zoom)
+
+---
 
 ## v1.0.3
 
+_Sep 01, 2021_
+
 #### Added
 
 -   {constructor}.demFallback
@@ -29,10 +45,31 @@ LithoSphere's first release!
 
 -   {vector/clamped layer}.letPropertiesStyleOverride
 
-## v1.1.0
+---
 
-#### Added
+## v1.0.2
 
--   Model layer type (.dae, .gltf, .obj)
--   Bearings (directional arrows) for clamped vector points
--   Keyboard navigation controls (wasd = pan, qe = rotate, rf = dolly, tg: zoom)
+_Aug 19, 2021_
+
+### Changed
+
+-   PNG.js and zlib.js are now modules instead of globals
+
+---
+
+## v1.0.1
+
+_Jul 22, 2021_
+
+### Added
+
+-   Support for WMS tiles of any projection
+-   A .tif tile parser
+
+---
+
+## v1.0.0
+
+_Jun 15, 2021_
+
+LithoSphere's first release!
diff --git a/demo.server.js b/demo.server.js
@@ -0,0 +1,27 @@
+const http = require('http')
+const path = require('path')
+const express = require('express')
+
+const app = express()
+const port = process.env.PORT || 9000
+
+const options = { requestCert: false }
+
+app.set('view engine', 'html')
+
+app.use(express.static(path.join(__dirname, 'public')))
+
+app.get('/', (req, res) => {
+    res.setHeader('Cache-Control', 'no-cache')
+    res.render(path.join(__dirname, 'public/index.html'))
+})
+
+const server = http.createServer(options, app)
+
+server.listen(port, function () {
+    console.log(
+        `LithoSphere Demo server is listening on port: ${server.address().port}`
+    )
+})
+
+app.listen(server)
diff --git a/dist/src/core/projection.d.ts b/dist/src/core/projection.d.ts
@@ -42,8 +42,6 @@ export default class Projection {
     vector3ToLatLng: (xyz: XYZ) => LatLngH;
     lonLatToVector3: (lon: number, lat: number, height: number) => XYZ;
     rotatePoint3D: (pt: XYZ, angle: XYZ, center?: XYZ) => XYZ;
-    lon2tileUnfloored: (lon: number, zoom: number) => number;
-    lat2tileUnfloored: (lat: number, zoom: number) => number;
     lngLatDistBetween: (lon1: number, lat1: number, lon2: number, lat2: number) => number;
 }
 export {};
diff --git a/dist/src/layers/curtain.d.ts b/dist/src/layers/curtain.d.ts
@@ -0,0 +1,12 @@
+export default class CurtainLayerer {
+    p: any;
+    constructor(parent: any);
+    add: (layerObj: any, callback?: Function) => void;
+    toggle: (name: string, on?: boolean) => boolean;
+    setOpacity: (name: string, opacity: number) => boolean;
+    remove: (name: string) => boolean;
+    setLayerSpecificOptions: (name: string, options: any) => boolean;
+    private generateCurtain;
+    private getCurtainMesh;
+    private getCurtainVertices;
+}
diff --git a/dist/src/layers/index.d.ts b/dist/src/layers/index.d.ts
@@ -2,13 +2,15 @@ import Tile3dLayerer from './tile3d';
 import TileLayerer from './tile';
 import ClampedLayerer from './clamped';
 import VectorLayerer from './vector';
+import CurtainLayerer from './curtain';
 import ModelLayerer from './model';
 interface Private {
     layerers: {
         tile3d: Tile3dLayerer;
         tile: TileLayerer;
         clamped: ClampedLayerer;
         vector: VectorLayerer;
+        curtain: CurtainLayerer;
         model: ModelLayerer;
     };
 }
@@ -20,6 +22,7 @@ export default class Layers {
     tile: any;
     clamped: any;
     vector: any;
+    curtain: any;
     model: any;
     all: any;
     constructor(parent: any);
@@ -29,11 +32,13 @@ export default class Layers {
     toggleLayer: (name: string, on?: boolean) => boolean;
     setLayerOpacity: (name: string, opacity: number) => boolean;
     setLayerFilterEffect: (name: string, filter: string, value: number) => boolean;
+    setLayerSpecificOptions: (name: string, options: any) => boolean;
     findHighestMaxZoom: () => number;
     findLowestMinZoom: () => number;
     private getFeatureStyleProp;
     getLayerByName: (layerName: string) => any;
     hasLayer: (layerName: string) => boolean;
     getFeatureStyle: (layer: any, feature: any, isStrokeless?: boolean) => any;
+    _onMouseMove: (intersectedLL: any, e: MouseEvent, obj: any, intersectionRaw: any, intersectionPoint: any) => void;
 }
 export {};
diff --git a/dist/src/lithosphere.d.ts b/dist/src/lithosphere.d.ts
@@ -44,6 +44,7 @@ export default class LithoSphere {
     toggleLayer: Function;
     setLayerOpacity: Function;
     setLayerFilterEffect: Function;
+    setLayerSpecificOptions: Function;
     getLayerByName: Function;
     hasLayer: Function;
     addControl: Function;

diff --git a/dist/src/secondary/loadingScreen.d.ts b/dist/src/secondary/loadingScreen.d.ts
@@ -1,4 +1,4 @@
-import './loadingScreen.scss';
+import './loadingScreen.css';
 export default class Controls {
     p: any;
     loadingContainer: HTMLElement;

diff --git a/docs/pages/Functions/functions.markdown b/docs/pages/Functions/functions.markdown
@@ -53,6 +53,12 @@ _filter_ | _string_ | Filter name to apply | One of ['brightness', 'saturation',
 _value_ | _string_ | The value to set the filter to
 _returns_ | _boolean_ | `true` only if layer was found and filtered upon
 
+### setLayerSpecificOptions()
+
+Changes and applies a layers options object dynamically. The `options` parameter is merged with the existing layer's options object (it's not a full replacement). Not all layer types support options.
+
+`setLayerSpecificOptions = (name: string, options: object): boolean`
+
 ### getLayerByName()
 
 `getLayerByName = (layerName: string): any`

diff --git a/docs/pages/Getting-Started/getting_started.markdown b/docs/pages/Getting-Started/getting_started.markdown
@@ -33,13 +33,13 @@ LithoSphere is accessible via the Node.js package manager npm (recommended) as w
 
 If you're not using npm just yet, that's okay, we support you too.
 
-1. Within the LithoSphere GitHub repository, navigate to `/dist` and copy `lithosphere.js` into your project.
+1. Within the LithoSphere GitHub repository, navigate to `/public/dist` and copy `lithosphere.js` into your project.
 
 2. Add the following script tag to your HTML before you intend to invoke it:
     ```html
     <script src="your/path/to/lithosphere.js"></script>
     ```
-3. Using the `examples/example.html` file as a guide, use something like the following to initialize LithoSphere:
+3. Using the `/public/examples` files as a guide, use something like the following to initialize LithoSphere:
     ```html
     <div id="container"></div>
     <script>

diff --git a/docs/pages/Layers/Curtain/curtain.markdown b/docs/pages/Layers/Curtain/curtain.markdown
@@ -0,0 +1,84 @@
+---
+layout: page
+title: Curtain
+permalink: /layers/curtain
+parent: Layers
+---
+
+# Curtain
+
+The Curtains layer type renders 2D vertical imagery draped from a GeoJSON LineGeometry.
+
+## Options
+
+|    Parameter     |       Type        |           Default            |                                                           Description                                                           |
+| :--------------: | :---------------: | :--------------------------: | :-----------------------------------------------------------------------------------------------------------------------------: |
+|     **name**     |     _string_      |          _Required_          |                                               Layer's name and unique identifier                                                |
+|      **on**      |     _boolean_     |          _Required_          |                                                    Initial visibility state                                                     |
+|   **opacity**    |     _number_      |          _Required_          |                                         Initial opaqueness [0(transparent), 1(opaque)]                                          |
+|  **imagePath**   |     _string_      |             null             |                                           A URL to the image to display as a curtain                                            |
+|  **imageColor**  | _string/string[]_ |          '#FFFFFF'           |       If no `imagePath`, the solid color to use as a curtain (or an array of colors to form a vertical gradient) instead        |
+|    **depth**     |     _number_      |             100              |                                             Depth (height) in meters of the curtain                                             |
+|   **options**    |     _object_      | See options in example below |                                         Layer specific and dynamically settable options                                         |
+| **lineGeometry** | _geojsonFeature_  |         _Required\*_         |           A LineString geometry that serves as the path for the top of the curtain. Uses 3D coordinates for elevation           |
+|   **geojson**    |     _geojson_     |         _Required\*_         | A geojson with a Polygon, LineString, or MultiLineString features. Use this if you want to group curtains together as one layer |
+| **onMouseMove**  |    _Function_     |             null             |                                                    MouseMove event callback                                                     |
+
+### Example
+
+```javascript
+Litho.addLayer(
+    'curtain',
+    {
+        name: 'Radargram',
+        on: true,
+        opacity: 0.7,
+        imagePath:
+            '../sample_data/Missions/Test/Data/radargrams/radargram_test.jpg',
+        //imageColor: ['cyan', 'rgba(0,0,0,0)', '#FF0000'], //Alternatively provide a solid color (or an array for a vertical gradient)
+        // depth of image in meters
+        depth: 14,
+        // length of image in meters (Deprecated)
+        length: 62.35,
+        options: {
+            // optional
+            verticalExaggeration: 1, // default 1, (ex. 2 doubles the height)
+            verticalOffset: 0, // default 0, (ex. 1 raises the curtain up by one full height)
+        },
+        // GeoJSON feature geometry that corresponds to the top of the curtain/image
+        lineGeometry: {
+            type: 'LineString',
+            coordinates: [
+                [137.368229, -4.6659, -4453],
+                [137.369829, -4.665, -4444],
+                [137.36869, -4.66636, -4444],
+                [137.36959, -4.6666, -4437],
+            ],
+        },
+        onMouseMove: function (
+            e,
+            layer,
+            mesh,
+            intersection,
+            intersectedLngLat,
+            intersectionXYZ
+        ) {
+            // intersection.uv gives mouse's texture coords
+            // console.log(intersection.uv)
+        },
+    },
+    () => {
+        /*
+        console.log('Curtain loaded')
+        let exag = 1
+        setInterval(() => {
+            exag += 0.01
+            Litho.setLayerSpecificOptions('Radargram', {
+                verticalExaggeration: exag,
+                //verticalOffset: exag,
+            })
+        }, 100)
+        */
+    }
+)
+```
diff --git a/docs/pages/Layers/Model/model.markdown b/docs/pages/Layers/Model/model.markdown
@@ -11,7 +11,7 @@ Adds a model to the scene.
 
 Supports: .glb, .gltf, .dae, .obj
 
-Example
+### Example
 
 ```javascript
 Litho.addLayer(

diff --git a/docs/pages/Layers/Tile/tile.markdown b/docs/pages/Layers/Tile/tile.markdown
@@ -9,12 +9,30 @@ parent: Layers
 
 A tiled raster layer with height support.
 
-Example
+## Options
+
+|      Parameter       |     Type      |  Default   |                                               Description                                                |
+| :------------------: | :-----------: | :--------: | :------------------------------------------------------------------------------------------------------: |
+|       **name**       |   _string_    | _Required_ |                                    Layer's name and unique identifier                                    |
+|      **order**       |   _number_    | _Required_ |                                          Layer draw order state                                          |
+|        **on**        |   _boolean_   | _Required_ |                                            Initial visibility                                            |
+|       **path**       |   _string_    | _Required_ |                                   A URL to the raster tileset curtain                                    |
+|     **demPath**      |   _string_    |    null    |                            A URL to the DEM (Digital Elevation Model) tileset                            |
+|      **format**      | _string-enum_ |   'tms'    |                               Raster tileset format ('tms', 'wmts', 'wms )                               |
+|    **demFormat**     |   _string_    |   'tms'    |                                DEM tileset format ('tms', 'wmts', 'wms )                                 |
+| **demFormatOptions** |   _object_    |    null    |                                            See example below                                             |
+|     **opacity**      |   _number_    | _Required_ |                              Initial opaqueness [0(transparent), 1(opaque)]                              |
+|     **minZoom**      |   _integer_   | _Required_ |                      The minimum (smallest number) zoom level of the raster tileset                      |
+|     **maxZoom**      |   _integer_   | _Required_ |                      The maximum (biggest number) zoom level of the raster tileset                       |
+|     **filters**      |   _object_    |    null    |                                Filter and blend mode effect for the layer                                |
+|   **boundingBox**    |  _number[4]_  |    null    | The bounds of the tileset. Only queries for tiles that intersect this box. [lng, lat, lng, lat] (SW, NE) |
+
+### Example
 
 ```javascript
 Litho.addLayer('tile', {
     name: 'Aeolis',
-    order: 1, //Orders are ordered only within the layer type
+    order: 1, // Orders are ordered only within the layer type
     on: true,
     path:
         'https://miplmmgis.jpl.nasa.gov/Missions/MSL/Layers/Gale_Aeolis_Palus/Gale_Aeolis_Palus/{z}/{x}/{y}.png',
@@ -37,9 +55,9 @@ Litho.addLayer('tile', {
         contrast: 1,
         saturation: 1,
         blendCode: 0, //0 = none, 1 = overlay - caveat - tile zooms for all layers should line up,
-        blend: 0,
     },
     boundingBox: [
+        //lng, lat, lng, lat, southwest corner, northeast
         137.09995782300004,
         -5.10494553812677,
         137.69994902819656,

diff --git a/docs/pages/Layers/Tile3D/tile3d.markdown b/docs/pages/Layers/Tile3D/tile3d.markdown
@@ -9,7 +9,7 @@ parent: Layers
 
 3D tiles via [3DTilesRendererJS](https://github.com/NASA-AMMOS/3DTilesRendererJS).
 
-Example
+### Example
 
 ```javascript
 Litho.addLayer('tile3d', {

diff --git a/docs/pages/Layers/Vector/vector.markdown b/docs/pages/Layers/Vector/vector.markdown
@@ -9,7 +9,7 @@ parent: Layers
 
 An unclamped vector.
 
-Example
+### Example
 
 ```javascript
 Litho.addLayer('vector', {