The Web SDK v1 will be supported until March 31, 2026 only. Please migrate to v2 for new features and improvements, and continued support.
Adding Custom Overlays in map
This documentation provides methods for creating a custom canvas overlay on top of a map. This is useful for more dynamic overlays, like drawing on the map or creating custom animations.
Creating a Custom Overlay
To add a custom overlay, you can use the addLayer method with a type "custom" layer.
Initialization with `onAdd`
The onAdd function is called when the layer is added to the map. Use this to set up any resources your layer will need, like creating a canvas, initializing WebGL, or setting up a 3D scene. This takes two parameters:
- "map" : The map instance, providing access to the map's API.
- "gl" : The WebGL context, particularly important for 3D rendering.
Rendering with `render`
The render function is where the magic happens. It’s called every time to update the visual content of your custom layer. This takes two parameters:
- "gl" : The WebGL context, used if rendering with WebGL.
- "matrix" : The transformation matrix representing the map's current state (e.g., zoom, rotation).
In this function, you draw your custom content on the map, be it a simple 2D graphic or a complex 3D scene
Example