Add a custom control declarative way

Declarative controls offer a simple way to add interactive UI elements to the map by using HTML attributes alone. Instead of instantiating controls through JavaScript, developers annotate DOM elements and allow the SDK to discover and wire them automatically.

To activate declarative control detection set the customControls option to true in the map initialization configuration. Alternatively, customControls may be set to a CSS selector string, restricting autodetection to:

• Elements matching the selector directly
• Or elements whose ancestor matches the selector

Learn more

Check out the MaptilerExternalControl API reference to learn all the options to add custom controls to your map interface.

Related examples

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

Add custom zoom control

Example

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

Hide map navigation controls

Example

This tutorial shows how to hide the navigation control (zoom and rotation controls to the map).

Scale control

Example

This tutorial shows how to add and display a scale control on the map.