Zoom Controls


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.


First of all, it is necessary to reference the following files for sample functioning correctly.

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

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();

JsFiddle Playground


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(){

JsFiddle Playground


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

You are looking at an outdated 8.0.0 version of this document. Switch to the 8.3.0 version to see the up to date information.