Add a custom control programmatically

Adding a custom control programmatically allows developers to have more control is ideal for applications that require dynamic logic, event-driven behaviour, or a deeper integration with a framework like React.

Programmatic controls allow developers to register custom control elements manually by calling map.addControl() and providing a control implementation. Custom controls are instantiated using the MaptilerCustomControl class. The element that should be used can be provided either as the element itself, or as its CSS selector.

Learn more

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

Related examples

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

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.