Add custom zoom control

The custom zoom control in this example shows the exact current zoom level on a map. It helps set up zoom-based style rules or understand data resolution.

Adding custom controls can make your application stand out. Before you start making your controls, check out the premade MapTiler SDK controls (Geolocate, Scale, terrain, …).

Related examples

Geocoding control

Example

This tutorial shows how to search for places using the geocoding control.

Minimap control

Example

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

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.