Maps SDK for Web - ttPlugins.ZoomControls

tt.plugins.ZoomControls

A plugin that provides the ability to zoom map using ui controls (including range slider).

To see the plugin in action, visit: [Pan and zoom controls example] (https://developer.tomtom.com/maps-sdk-web-js/functional-examples#examples,map,pan-and-zoom.html)

Constructor

tt.plugins.ZoomControls([options.animate=true], [options.className=''], [options.cssStyleCheck=true])

Example

const ttZoomControls = new tt.plugins.ZoomControls({
   className: 'my-class-name', // default = ''
   animate: false // default = true
});

const map = tt.map({
   key: '<your-tomtom-maps-sdk-key>',
   container: 'map',
   theme: {
       style: 'main',
       layer: 'basic',
       source: 'raster'
   }
}, {
   center: [19.45773, 51.76217],
   zoom: 12,
   minZoom: 9,
   maxZoom:12
});

map.addControl(ttZoomControls, 'top-left');

Parameters

Name	Description
options.animate Boolean default:true	If set to true it uses the zoomTo method, which causes animation while zooming. Otherwise it will zoom without any animation.
options.className String default:''	Allows the addition of a specified className to the zoom controls ui element.
options.cssStyleCheck Boolean default:true	If true, the plugin will check if required css styles are added.

Methods

onAdd(map): HTMLElement

Binds map with plugin instance.

Parameters

Name	Description
map Required Maps.Map default:None

Returns

HTMLElement container

onRemove( ): Void

Removes plugin from the map.

Returns

Void