Render Custom Symbols for Map Bubble Layers

Render Custom Symbols for Map Bubble Layers

Description

How can I add some custom symbols to the Bubble layer of the Map?

Solution

The Bubble Layer allows you to define the way symbols are rendered. This approach works by defining a symbol function that uses the Drawing API to define the shape. The symbol is typically a Group of shapes.

Use an arrow function instead of a regular method to be able to access the component instance as this.

The following example demonstrates how to render 200-kilometer lines in West-East direction as a symbol.

The lines get longer the farther you go North, which is due to that fact that the example uses the Mercator Projection.