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

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)
        */
    }
)