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