three.js custom layer
Draw a three.js scene in metres around a place, among the map's 3D buildings, and click its objects
A ring of three.js columns on Dam Square lights up under the pointer and shows its height on a click.
localFrameMatrixturns the map’s projection into the camera matrix of a scene in metres east, north and up from the square.addCustomLayerwith'lowest3D'puts the layer under the 3D buildings it shares its depth with, and keeps it there through style switches.- Its
hitTestprojects the columns through the same matrix, so the layer’sevents, the hover cursor andsetStatetreat them as map features.
Related examples
Bring Your Own Data: Clusters and Polygons
20k clustered random points and random polygons around London, rendered with the CustomGeoJSONModule. Both layers are clickable.
Customization
Bring Your Own Data
User Interaction Events
Web
Bring Your Own Data: GeoJSON Heatmap with Custom Module
Render a custom GeoJSON heatmap and labeled symbol layer with the CustomGeoJSONModule, with style-change restore, hover and click events.
Customization
Bring Your Own Data
User Interaction Events
Web
Delivery zones of your own
Show your own GeoJSON polygons and respond to clicks on them
Customization
Bring Your Own Data
Geometry
User Interaction Events
Web
Globe and 3D terrain
Switch the map to a globe with an atmosphere with the styling foundations module's view knobs, or raise it in 3D with the terrain module
Customization
Map Style
Terrain and 3D
Web