Link Search Menu Expand Document

Constructor

It all starts with

new LithoSphere(containerId, options)

Contents

Arguments

Parameter Type Required Default Description
containerId string true N/A The id of the HTML element LithoSphere will draw in.
options object false See ‘options’ below Top level configurations for LithoSphere

Options

Parameter Type Default Description
initialView object See initialView below Sets the initial longitude, latitude, zoom coordinate view of the scene
initialCamera object See initialCamera below Sets the initial world-space camera coordinates and look-at
majorRadius integer 6371000 Major planetary radius in meters
minorRadius integer majorRadius Minor planetary radius in meters
loadingScreen boolean true If true, shows a loading screen until all lithosphere content first loads
customParsers object See Parsers Allows the use of custom elevation tile parsers
demFallback object See demFallback below A DEM to fallback to if any layer’s DEM fails
tileMapResource object See tileMapResource below Configures projections
radiusOfTiles integer 4 How many tiles outward from the center to use for the base tiles
wireframeMode boolean false If true, all tiles are rendered with a wireframe material
exaggeration number 1 A multiplier to scale terrain heights by
showAxes boolean false If true, XYZ axes are rendered
useLOD boolean true If true, Level of Detail (LOD) tiles are rendered in the background
LOD object[] See LOD below Fine tune Level of Detail (LOD) layers
tileResolution number 32 Square tile pixel dimension
renderOnlyWhenOpen boolean true Only update and render the scene if the containerId element has an non-zero area
starsphere object See starsphere below Setup a skydome/skybox/skysphere
atmosphere object See atmosphere below Setup an atmosphere for your planet
canBecomeHighlighted boolean true Globally disable highlighting
highlightColor string ‘yellow’ What color should highlight things be? (If hovered)
canBecomeActive boolean true Globally disable coloring active features
activeColor string ‘red’ What color should active things be? (If clicked)

options.initialView

The latitude, longitude, and zoom LithoSphere first starts at.

Parameter Type Default Description
initialView.lng number 0 Sets the initial longitude of the scene
initialView.lat number 0 Sets the initial latitude of the scene
initialView.zoom number 0 Sets the initial zoom of the scene

Example 

{
    initialView: {
        lng: 137.4071927368641,
        lat: -4.626571631163808,
        zoom: 16,
    }
}

options.initialCamera

Sets the orbit camera’s initial position and target. Useful in deeplinks and when a non-top-down camera angle is desired. Note that the camera’s look-at target is always along the y-axis.

Parameter Type Default Description
initialCamera.position XYZ null Sets the initial camera position
initialCamera.target XYZ null Sets the initial camera target

Example 

{
    initialCamera: {
        position: {
            x: 1570.8134791640523,
            y: 3125.497317531146,
            z: 123.76226561404211,
        },
        target: {
            x: 0,
            y: 4412.141683964059,
            z: 0,
        },
    },
}

options.demFallback

If a tile layer has a demPath set and one of its tile dem request fails for whatever reason (such as a 404) or does not have a demPath set, it will try to get the corresponding DEM tile specified in demFallback.

Parameter Type Default Description
demPath string   Path for the fallback DEM tiles
format string ‘tms’ Tile format: ‘tms’, ‘wmts’, ‘wms’
parserType string ‘rgba’ Which parser to use for demPath

Example 

{
    demFallback: {
        demPath:
            'https://domain.com/Missions/MSL/Layers/Gale_HiRISE/MSL_Gale_DEM_Mosaic_1m_v3/{z}/{x}/{y}.png',
        parserType: 'rgba',
    },
}

options.tileMapResource

Representative of the tilemapresource.xml file outputted following tile generation. Note: proj is the only key currently in use.

Parameter Type Default Description
tileMapResource.bounds number[] [0,0,0,0] minx, miny, maxx, max
tileMapResource.origin number[] [0,0] x, y
tileMapResource.proj string null (wgs84) proj4 string describing the global tileset’s projection
tileMapResource.resunitsperpixel string 34 proj4 string describing the global tileset’s projection
tileMapResource.reszoomlevel string 0 proj4 string describing the global tileset’s projection

Example 

{
    tileMapResource: { // this is also the default
        bounds: [0, 0, 0, 0],
        origin: [0, 0],
        proj: null, // proj4 string describing the global tileset projection
        resunitsperpixel: 34,
        reszoomlevel: 0,
    },
}

options.LOD

Configure how the internal level of detail (LOD) works. LOD makes it so that terrain farther away from you is at increasingly lower resolutions. LOD is implemented in LithoSphere in a dead simple way. Instead of just grabbing the tiles from you zoom and viewport, it grabs tiles above your zoom level (lower resolution) and renders them below high resolution tiles. It picks which tiles to pull by first looking at the coordinate at the center of your screen and then working a radius number of tiles outwards. Note: This only works if useLOD is set to true.

Parameter Type Required Default Description
LOD[i].radiusOfTiles number true N/A How many tiles outward from the center to use for this LOD level
LOD[i].zoomsUp number true N/A How many zoom levels upward (closer to 0) to pull tiles from

Example 

{
    useLOD: true,
    LOD: [  // this is also the default
        { radiusOfTiles: 4, zoomsUp: 3 },
        { radiusOfTiles: 2, zoomsUp: 7 },
        { radiusOfTiles: 2, zoomsUp: 11 },
    ],
}

options.starsphere

A skydome but with its missing half and far up beyond the sky.

Parameter Type Required Default Description
starsphere.url string true N/A URL of an image to wrap around the inside of the skydome
starsphere.color string false ‘#AAAAAA’ What color light to shine upon our skydome image

Example 

{
    starsphere: {
        url:
            'https://awesomesite.nasa.gov/public/images/eso0932a.jpg',
        color: '#FF0000', // Tinge it all red
    },
}

options.atmosphere

Parameter Type Required Default Description
atmosphere.color string false ‘#FFFFFF’ What color should the atmosphere of the planet be?

Example 

{
    atmosphere: {
        color: '#111111',
    },
}

A Full Example 

const Litho = new LithoSphere.default('container', {
    initialView: {
        lng: 137.4071927368641,
        lat: -4.626571631163808,
        zoom: 16,
    },
    wireframeMode: true,
    exaggeration: 2,
    showAxes: true,
    useLOD: true,
    renderOnlyWhenOpen: true,
    starsphere: {
        url: 'https://awesomesite.nasa.gov/public/images/eso0932a.jpg',
        color: '#666666',
    },
    atmosphere: {
        color: '#111111',
    },
    highlightColor: 'yellow', //css color for vector hover highlights | default 'yellow'
    activeColor: 'red', //css color for active vector features | default 'red'
})

Moving Forward

Check out the Layers page next for more information about how you can add and configure layers.