Maps SDK for Web - ttPlugins.PanControls

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] (https://developer.tomtom.com/maps-sdk-web-js/functional-examples#examples,map,pan-and-zoom.html)

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',
  theme: {
      style: 'main',
      layer: 'basic',
      source: 'raster'
  }
}, {
  center: [19.45773, 51.76217],
  zoom: 12
});

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 Required Maps.Map default:None

Returns

HTMLElement container

onRemove( ): Void

Removes the plugin from the map.

Returns

Void