Maps SDK for Web
tt.plugins.PanControls
Plugin that provides the ability to pan map using ui controls.
To see the plugin in action, visit: Pan and zoom controls example
CSS stylesheet
PanControls.css - CSS declarations for PanControls 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/PanControls/<version>/PanControls.css'>
- or if you're using Webpack with css-loader:
import '@tomtom-international/web-sdk-plugin-pancontrols/dist/PanControls.css';
To find current plugin's version, visit the Downloads page.
Constructor
tt.plugins.PanControls([panOffset=100], [className], [options.cssStyleCheck=true])
Example
const ttPanControls = new tt.plugins.PanControls({
className: 'my-class-name', // default = ''
panOffset: 150 // default = 100
});
const map = tt.map({
key: '<your-tomtom-maps-sdk-key>',
container: 'map'
});
map.addControl(ttPanControls, 'top-left');
Parameters
Name | Description |
---|---|
panOffset
Number default:100 |
Defines how many pixels each click will move the map. For example, a click on the top arrow will pan the map by a defined panOffset with each click. |
className
String default:None |
Allows the addition of a specified className to the pan ui element. |
options.cssStyleCheck
Boolean default:true |
If true, the plugin will check if required css styles are added. |
Methods
onAdd(map): HTMLElement
Binds the map with the plugin instance.
Parameters
Name | Description |
---|---|
map
Maps.Map default:None |
Returns
container
onRemove( ): Void
Removes the plugin from the map.
Returns