Maps SDK for Web

Class L.Foldable

extends L.Control

This widget allows to create a foldable widget over the map.

Constructor

L.Foldable([options])

Parameters
Name Description Required Type/Values Default
options Options to be passed to the foldable control No Object None
options.className Class prefix that will be added to container No String ""
options.title Title of the container. If it's null the title will be hidden. No String ""
options.close If is an object the Close button will be appear No Object null
options.close.text Text displayed in the Close button No String None
options.close.image Image of the Close button No String None
options.show If is an object the Show button will be appear No Object null
options.show.text Text displayed in the Show button No String None
options.show.image Image of the Show button No String None
options.closeOnClick Should component collapse when clicked No Boolean false
options.closeOnMapClick Should component collapse when map is clicked No Boolean true
options.position Position on a map No "topright" | "topleft" | "bottomright" | "bottomleft" "topright"
options.content Initial content of the widget. Should be a string with valid HTML syntax. No String null
options.collapsed Initial state of the foldable widget No Boolean false
options.responsive Listens to window resize events and adjusts the content height to fit the map, when the map size changes. No Boolean false
Example
var widget = new L.Foldable({
  title: 'Foldable widget',
  closeOnClick: true,
  show: {
    text: 'show'
  }
});
widget.addTo(map);

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();