New to Kendo UI for Angular? Start a free 30-day trial

Render Custom Symbols for Map Bubble Layers

Render Custom Symbols for Map Bubble Layers

ProductProgress® Kendo UI® for Angular Map


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


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.

View Source
Change Theme: