Maps SDK for Web
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
Maps.Map default:None |
Returns
container
onRemove( ): Void
Removes plugin from the map.
Returns