Zoom Plugin
A plugin that provides the ability to zoom a map(@tomtom-international/web-sdk-maps) using ui controls, including range slider.
Please note that from version 2.0.0 this plugin only works with @tomtom-international/web-sdk-maps@6.*.*, if you are using @tomtom-international/web-sdk-maps@5.*.* please use version 1.*.*
Instalation
Just do:
npm i @tomtom-international/web-sdk-plugin-zoomcontrols
You must also include the zoom control stylesheet in your project. It's located here:
node_modules/@tomtom-international/web-sdk-plugin-zoomcontrols/dist/ZoomControls.css
Usage
In this example we assume that you already have the TomTom Maps SDK for Web library included.
import tt from '@tomtom-international/web-sdk-maps';
import ZoomControls from '@tomtom-international/web-sdk-plugin-zoomcontrols';
const ttZoomControls = new ZoomControls({
className: 'my-class-name', // default = ''
animate: false // deafult = true
});
const ttMap = tt.map({
key: '<your-tomtom-maps-sdk-key>',
container: 'map',
center: [19.45773, 51.76217],
zoom: 12,
minZoom: 9,
maxZoom:12
});
ttMap.addControl(ttZoomControls, 'top-left');