TomTom Maps for JavaScript
    Preparing search index...

    Class Buildings3D

    Draws the base map's buildings in 3D with Three.js, with windows on their facades, a sun or moon that casts shadows on the buildings and the ground, and a look for every standard style.

    Public Preview until the plugin's 1.0.0 release.

    • It extrudes the buildings of the vector tiles the map already loads, and makes no requests of its own.
    • While it shows, it takes the place of the style's own 3D buildings, which it filters out of the 3D - Building layer. It draws whether or not the buildings3D group of the BaseMapModule shows.
    • Its look is a set of knobs, listed in buildings3DKnobCatalogue. Each one you leave unset takes the preset's value, but the hover and click colours, which take the map's accent, else blue, and the light's direction and altitude, below. The auto preset follows the map style: the dark street and mono styles light windows from inside under a moon, the others get a sun and glass that mirrors the street and the sky.
    • Walls take the style's 3D building colour of each kind of building until you set walls.color, following the map colours that restyle them. walls.palette, an array of colours of your own, gives each building one of them, and walls.variation a shade of its own. Roofs follow the walls, palette included, until you set roofs.color or a roofs.palette of their own.
    • Its sun is the map's light once one is placed, such as through the styling module's view.light knobs: light.direction and light.altitude each follow it while unset. GLSurfaces follows the same light, so the shadows and the textured ground agree.
    • On a map with a Landmarks3D, it leaves out the buildings a landmark replaces and draws the landmarks among its buildings, under its sun and in its shadows, which they cast too. They take its wall colour, opacity, minZoom, palette knobs, walls.variation and hover and click looks for their unset knobs. Unless their texture knob says otherwise, their own textures show as facade detail, as strong as facade.intensity, and in their own colours over satellite imagery. They mirror a little of the street and the sky, as much as reflections.intensity sets.
    • On a 3D terrain, each building stands on the lowest ground under it, and the streets' shadows, which fall on a flat plane, are left out.
    • With roadLabels.occluded or pois.occluded, it moves those style layers under its own, so a building drawn over a label hides it. A hidden POI still keeps other labels off its place, and the moved labels give way to the labels above them where they collide.
    import { Buildings3D } from '@tomtom-org/maps-sdk-plugin-landmarks-3d';

    const buildings = new Buildings3D(map, { facade: { pattern: 'glass' } });
    buildings.updateConfig({ light: { direction: 260, altitude: 15 } }); // a low evening sun

    Hierarchy

    Index
    constructor
    config
    events layer
    applyConfig getBuildingColors getConfig isVisible lookValue resetConfig setBuildingColors setVisible updateConfig

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

      Parameters

      • map: TomTomMap

        The map to draw the buildings on.

      • Optionalconfig: Buildings3DConfig

        The knobs to start with.

      Returns Buildings3D

    config: CONFIG
    • get events(): UserEvents<BuildingHit, never>

      The user events of the buildings: a handler gets the building under the pointer, with its feature id and properties.

      Returns UserEvents<BuildingHit, never>

      • While a handler listens, the hovered building turns towards hover.color and the clicked one towards click.color, until the next click lands elsewhere.
      • A building takes the pointer only where no landmark stands in front of it, and the reverse.
      buildings.events.on('click', (building) => console.log(building.id, building.properties.height));

    • Replaces the whole configuration. An empty object has every knob take the auto preset's value.

      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 buildings3DKnobCatalogue and sets them by id, and its getKnob reads a knob's value in force, the preset's one when unset. light.direction and light.altitude read the map's light when unset, once one is placed.

      updateConfig merges one level deep: a part you pass, such as light, replaces that part's values.

      buildings.updateConfig({ preset: 'streetDark', litWindows: { fraction: 0.6 } });

    • The colours setBuildingColors gave, by feature id.

      Returns Record<string, string>

    • Returns the knobs set, as a plain serializable copy.

      Returns CONFIG

    • 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

    • Unsets every knob.

      Returns void

    • Gives the buildings with these feature ids a colour of their own, in place of their wall colour, and every other one its own colour back. An empty object clears them.

      Parameters

      • colors: Readonly<Record<string, string>>

      Returns void

      The ids are the ones events report, which stay the same across tiles and zoom levels, so you can colour a building before it loads. Its roof takes the colour too, and so does every part of a building the map data splits into parts, by the id of its whole outline.

      buildings.setBuildingColors({ 6183703601: '#e4572e', 6183703602: '#29335c' });

    • 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

      • partial: CONFIG

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods