Maps SDK for Web
Class L.TomTomMinimap
The MiniMap allows you to show a smaller map with low zoom level at a corner of the main map.
It is based on Leaflet-MiniMap plugin.
The default plugin functionality is integrated with TomTom SDK.
If you want to use vector source in the MiniMap the basePath must be specified. Keep this in mind when you switch from raster to vector source, for example when opening our examples in CodePen, otherwise the MiniMap will not render properly.
Constructor
L.TomTomMinimap([options])
Parameters
Name | Description | Required | Type/Values | Default |
---|---|---|---|---|
options | Options to be passed to the MiniMap | No | Object | None |
options.position | The standard Leaflet.Control position parameter, used like all the other controls. Defaults to 'bottomright'. | No | String | "bottomright" |
options.width | The width of the minimap in pixels | No | Number | 150 |
options.height | The height of the minimap in pixels | No | Number | 150 |
options.collapsedWidth | The width in pixels of the toggle marker and the minimap when collapsed | No | Number | 19 |
options.collapsedHeight | The height in pixels of the toggle marker and the minimap when collapsed | No | Number | 19 |
options.zoomLevelOffset | The offset applied to the zoom in the minimap compared to the zoom of the main map. Can be positive or negative. | No | Number | -8 |
options.zoomLevelFixed | Overrides the offset to apply a fixed zoom level
to the minimap regardless of the main map zoom. Set it to any valid zoom level.
If unset zoomLevelOffset is used instead.
|
No | Number | null |
options.centerFixed | Applies a fixed position to the minimap regardless of the main map's view / position. Prevents panning the minimap, but does allow zooming (both in the minimap and the main map). If the minimap is zoomed, it will always zoom around the centerFixed point. You can pass in a LatLng-equivalent object. | No | Boolean | false |
options.zoomAnimation | Sets whether the minimap should have an animated zoom. (Will cause it to lag a bit after the movement of the main map.) | No | Boolean | false |
options.toggleDisplay | Sets whether the minimap should have a button to minimize it | No | Boolean | false |
options.autoToggleDisplay | Sets whether the minimap should hide automatically
if the parent map bounds does not fit within the minimap bounds.
Especially useful when zoomLevelFixed is set.
|
No | Boolean | false |
options.minimized | Sets whether the minimap should start in a minimized position | No | Boolean | false |
options.aimingRectOptions | Sets the style of the aiming rectangle by passing in
a Path.Options object.
(Clickable will always be overridden and set to false ).
|
No | Object | None |
options.shadowRectOptions | Sets the style of the aiming shadow rectangle by passing in a
Path.Options object.
(Clickable will always be overridden and set to false ).
|
No | Object | None |
options.strings | Overrides the default strings allowing for translation | No | Object | None |
options.mapOptions | Sets Leaflet options for the MiniMap. It does not override the MiniMap default map options but extends them. See regular map options for more details. | No | Object | None |
options.basePath | Base path for sdk. It will be used in relative paths - it is
especially important for maps with vector sources. For instance, if you set this option to "/myPath" ,
default urls for styles will be set to /myPath/styles/basic_main.json
|
No | String | '/sdk' |
Example
tomtom.key("<your-tomtom-API-key>");
var miniMapOptions = {height: 90, width: 120};
var map = new L.Map("map");
var miniMapControl = new L.TomTomMinimap(miniMapOptions);
miniMapControl.addTo(map);
var widget = new L.TomTomMinimap({
height: 90,
width: 120,
// zoom difference between the main map and minimaps (defaults to -8)
zoomLevelOffset: -8,
// below options have default values:
toggleDisplay: true, // show a button to hide/show mini-map
zoomAnimation: true, // animate zoom changes
autoToggleDisplay: true, // hide mini-map automatically if it's not needed
mapOptions: {
source: ["raster", "vector"],
minZoom: 2, // min zoom of mini-map
maxZoom: 4 // max zoom of mini-map
basePath: 'basePath/sdk' // used for vector maps
}
});
widget.addTo(map);
Methods
getZoom( ): Number
Returns current zoom level of the mini map.
Returns
on(eventName, eventHandler): Object
Add listeners for a particular event type. Event handlers for events with 'map-' prefix are added to minimap map instance directly.
Parameters
Returns
Returns reference to current instance of minimap widget
setMapSource(source)
Change a source data for the current mini map. It should be one of the sources provided at creation in a property options.mapOptions.source.