three.js custom layer

Draw a three.js scene in metres around a place, among the map's 3D buildings, and click its objects

View on GitHub

A ring of three.js columns on Dam Square lights up under the pointer and shows its height on a click.

  • localFrameMatrix turns the map’s projection into the camera matrix of a scene in metres east, north and up from the square.
  • addCustomLayer with 'lowest3D' puts the layer under the 3D buildings it shares its depth with, and keeps it there through style switches.
  • Its hitTest projects the columns through the same matrix, so the layer’s events, the hover cursor and setState treat them as map features.

Related examples