How to display a minimap or overview map control to aid the map navigation

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

By following this guide, users will learn how to integrate and display a minimap within their map interface using MapTiler SDK JS. The minimap provides users with a compact overview of the entire map, allowing them to easily navigate and explore different areas. With the help of MapTiler SDK JS, developers can effortlessly incorporate a minimap control into their web-based mapping applications, making it easier for users to interact with and navigate through their maps.

Learn more

By default, the control uses the same style as the map but we can use a different style on the minimapControl. Example of the control using the Satellite Hybrid Map and changing the size of the map.

Visit the JavaScript Maps API reference to learn how to create your custom control.

Related examples

Scale control

Example

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

Elevation profile control

Example

The elevation profile control for MapTiler SDK is a super easy way to show the elevation profile of any GeoJSON trace, with elevation data fueled by MapTiler Cloud.

Measure distances

Example

To calculate distances on the map, simply click on different points to create lines that will measure the distances using turf.length.

Change attribution default position

Example

Place attribution in the top-left position when initializing a map.