TomTom Maps for JavaScript
    Preparing search index...

    Class GLSurfaces

    Textures the surfaces of the map's style with WebGL materials, and grows 3D trees on its green: water that ripples in the wind, mirrors the sky and rolls in onto open shores, glaciers, tree crowns lit by the sun over forests, lawns, meadows and scrub, field parcels over farmland, dunes, mud flats, shingle, bare rock, paving, built-up ground and asphalt.

    Public Preview until the plugin's 1.0.0 release.

    • It draws inside the style, right after the layers it textures, so labels, bridges, buildings and everything your app adds above them stay on top, untouched.
    • It textures the standard styles' land cover, land use, water, paved areas and road layers, each kind of surface listed in surfaceKinds, in the style's own colours, which every material varies rather than replaces. A restyle or a style switch carries over. Over satellite imagery, it textures the water and the roads and grows the trees, in the imagery's colours.
    • Each surface and the trees are coloured for a season, the season knob, from the style's colours. A colour knob set for one shade of a surface, such as the cereal fields, replaces it.
    • The trees are broadleaf, conifers, bushes, columnar and umbrella trees, in the mix each kind of ground and its latitude grow, which a trees.species.<kind>.shareFactor knob scales. They keep off the roads, paths, railways and streams through a wood, which show over the crowns in front of them.
    • Every texture is anchored to the ground and fades its details out before they shrink below a few pixels, so it stays still and calm while you pan and zoom.
    • Its look is a set of knobs, listed in glSurfacesKnobCatalogue. The sky the water mirrors is the map's own where the style sets one, else a day or a night sky by the style's theme, and a day sky over satellite imagery.
    • Its sun is the map's light once one is placed, such as through the styling module's view.light knobs, so it lights the crowns, the trees and the dunes from where the 3D buildings are lit. Until then, it is the style's theme's sun, 215°/30° by day and the moon at 135°/35° by night, and the day sun of the 3D buildings, 215°/35°, over satellite imagery.
    • While the water, the grass or the trees show and the wind blows, the map draws a frame every display frame. Set wind.speedFactor to 0 to hold them still and let the map rest.
    • Over a 3D terrain, the textures and the trees follow the ground the terrain raises.
    • It needs WebGL2.
    import { GLSurfaces } from '@tomtom-org/maps-sdk-plugin-landmarks-3d';

    const surfaces = new GLSurfaces(map);
    surfaces.updateConfig({ wind: { direction: 270, speedFactor: 2 } }); // a brisk westerly

    Hierarchy

    Index
    constructor
    config
    applyConfig getConfig isVisible lookValue remove resetConfig setVisible updateConfig

    • Creates the surfaces on a map, drawn as soon as the map is ready.

      Parameters

      • map: TomTomMap

        The map to texture.

      • Optionalconfig: GLSurfacesConfig

        The knobs to start with.

      Returns GLSurfaces

    config: GLSurfacesConfig

    • Replaces the whole configuration. An empty object has every knob take its default.

      Parameters

      Returns void

      Use it, and updateConfig, for a look your code writes: the type is the check, and the values are not checked again. For values held as data, the SDK's setKnobs checks each against glSurfacesKnobCatalogue and sets them by id, and its getKnob reads a knob's value in force, the map's own or the default when unset.

      updateConfig merges one level deep, and every surface sits in the one part surfaces, so passing surfaces replaces the knobs of every surface: updateConfig({ surfaces: { roads: { intensity: 0 } } }) also unsets those of the water, the forest and the others. To change some knobs and keep the others, use the SDK's setKnobs: setKnobs(surfaces, glSurfacesKnobCatalogue, { 'surfaces.roads.intensity': 0 }).

      surfaces.updateConfig({ light: { direction: 260, altitude: 12 } }); // a low evening sun

    • Whether the feature is set to be shown: the visible knob, true unless set.

      Returns boolean

    • A knob's value from a resolved look. The map's light turns with the bearing by fractions of a degree, which the features draw with; the knob reports whole degrees, a value setKnob takes back.

      Parameters

      • look: Record<string, unknown>
      • id: string

      Returns unknown

    • Takes the surfaces and the trees off the map: removes their layers, with the WebGL resources they hold, and stops following the map's style. Call it when your app drops the surfaces but keeps the map. A removed GLSurfaces can't be shown again; create a new one instead.

      Returns void

    • Unsets every knob.

      Returns void

    • Shows or hides the feature. Stored as visible in the configuration.

      Parameters

      • visible: boolean

      Returns void

    • Changes the given knobs and keeps the others, one level deep.

      Parameters

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Methods