Maps SDK for Web

Class L.ControlPanel

extends L.Foldable

It creates a foldable settings control panel over the map.

Constructor

L.ControlPanel([options])

Parameters
Name Description Required Type/Values Default
options No Object None
options.className No String "tomtom-control-panel"
options.title Title of the container. If it's null the title will be hidden. No String null
options.close No Object None
options.close.text Text displayed in the Close button No String None
options.close.image Image of the Close button No String "sdk/images/icon-cog.svg"
options.show No Object None
options.show.text Text displayed in the Show button No String None
options.show.image Image of the Show button No String "sdk/images/icon-cog.svg"
options.collapsed Initial state of the foldable widget No Boolean true
Example
var results = [1, 2, 3];
var widget = new L.ControlPanel();
widget.addTo(map);
widget.setContent('Length: ');
widget.addContent(results.length);

Methods

addContent(content): L.Foldable Chainable

It appends content into the results list.

Parameters
Name Description Required Type/Values Default
content content to append Yes String | HTMLElement None
Returns

Example
var results = [1, 2, 3];
var widget = new L.Foldable();
widget.addTo(map);
widget.setContent('Length: ');
widget.addContent(results.length);

addContentHeader(content): L.Foldable Chainable

It appends content into the results list header.

Parameters
Name Description Required Type/Values Default
content content to append Yes String | HTMLElement None
Returns

Example
var widget = new L.Foldable();
widget.addTo(map);
widget.addContentHeader('This is a header');

clear( ): L.Foldable Chainable

Clears all the widget's content.

Returns

Example
var widget = new L.Foldable();
widget.addTo(map);
// some time later
widget.clear();

fold( ): L.Foldable Chainable

Folds the content and shows the show button (to unfold it again later). This method is executed automatically when the widget loose focus (e.g. the user starts interacting with another widget or the map).

Returns

Example
var widget = new L.Foldable({collapsed: false});
widget.addTo(map);
widget.setContent('No data');
widget.fold();

onAdd(map): HTMLElement

Binds handlers to events and creates HTML elements used by the component. Called when added control to a map.

Parameters
Name Description Required Type/Values Default
map Leaflet map to add control to. Yes Object None
Returns

Example
var widget = new L.Foldable();
widget.addTo(map);

onRemove(map)

Removes event listeners added by onAdd method. Called on foldable.remove()

Parameters
Name Description Required Type/Values Default
map Leaflet map to remove control from. Yes Object None
Example
var widget = new L.Foldable();
widget.addTo(map);
// some code here...
widget.remove();

setContent(content): L.Foldable Chainable

Sets (and replaces) all the content of the results list.

Parameters
Name Description Required Type/Values Default
content new content Yes String | HTMLElement None
Returns

Example
var widget = new L.Foldable();
widget.addTo(map);
widget.setContent('Initial content');
widget.setContent('New content');

unfold( ): L.Foldable Chainable

Unfolds component's content. This method is executed when the user presses the show button.

Returns

Example
var widget = new L.Foldable();
widget.addTo(map);
widget.unfold();