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

CSS stylesheet

ZoomControls.css - CSS declarations for ZoomControls plugin. Without this stylesheet, dependant elements might appear in wrong place. It can be imported:

  • in the <head> of your HTML document:
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/plugins/ZoomControls/<version>/ZoomControls.css'>
  • or if you're using Webpack with css-loader:
    import '@tomtom-international/web-sdk-plugin-zoomcontrols/dist/ZoomControls.css';

To find current plugin's version, visit the Downloads page.

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'
});

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