Zoom Controls

Overview
Enable
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.

Enable

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

<link rel="stylesheet" href="https://cdn.anychart.com/css/latest/anychart-ui.min.css" />
<link rel="stylesheet" href="https://cdn.anychart.com/fonts/2.7.3/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();
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.