Compass rose control

Add a compass rose as a visual indicator of the map’s bearing (rotation) using Custom Controls.

This example demonstrates how to effectively use declarative custom controls to implement a control that follows the state of the map without requiring any JavaScript to create it.

Related examples

Add custom zoom control

Example

This example demonstrates how to add a custom control that shows the current zoom.

Custom control declarative

Example

How to add a custom control in a declarative way. A simple way to add interactive UI elements to the map by using HTML attributes alone

Custom control programmatically

Example

How to add a custom control programmatically. Ideal for applications that require dynamic logic, event-driven behaviour, or a deeper integration with a framework like React

Minimap control

Example

This tutorial shows how to display a minimap or overview map control in MapTiler SDK JS to aid the map navigation.