Zoom Controls

Overview
Modules
Enabling
Dispose
Appearance

Overview

Zoom Control Panel is an HTML object with three buttons: Zoom All (100%, or 1x Zoom), Zoom In and Zoom Out. To create a Zoom Control Panel use the zoom() method.

Modules

Zoom controls require the Common UI module:

<script src="https://cdn.anychart.com/releases/8.13.0/js/anychart-ui.min.js"></script>

Also, you should reference the anychart-ui.min.css and anychart-font.min.css files:

<link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.13.0/css/anychart-ui.min.css"/>

<link rel="stylesheet" type="text/css" href="https://cdn.anychart.com/releases/8.13.0/fonts/css/anychart-font.min.css"/>

Learn more: Modules.

Enabling

There is a new layer created for the Zoom Control Panel over the chart layer. The target() method is necessary to set the target map for the zooming panel, and the render() method provides the Zoom Controls Panel rendering.

var zoomController = anychart.ui.zoom();
zoomController.target(map);
zoomController.render();

Playground

Dispose

If it is necessary to get rid of the Zoom Control Panel, call the dispose() method.

// dispose the zoom controlling panel on click
map.listen("click", function() {
  zoomController.dispose();
});

Playground

Appearance

If necessary, it is possible to change the appearance and position of the Zoom Control Panel using css.