Home

Leaflet.Toolbar makes it easy for developers to enable users to interact with Leaflet maps and layers.

Leaflet.Toolbar supplies two toolbar styles out of the box: popup-style toolbars fixed to a point on the map (L.Toolbar.Popup), and control-style toolbars fixed in relation to the map pane (L.Toolbar.Control).

L.Toolbar.Control

new L.Toolbar.Control({
    position: 'topleft',
    actions: [
        MyToolbarAction1,
        MyToolbarAction2
    ]
}).addTo(map);

Control toolbars are useful for actions which alter the state of the entire map and/or actions which should be exposed to the user regardless of which region of the map is visible.

Creation

Constructor	Description
L.Toolbar.Control(<ToolbarOptions> options)	Creates a control toolbar with the specified actions and options. The toolbar will appear when it is added to the map using map.addLayer or toolbar.addTo.

Methods

Method	Returns	Description
addTo(<Map> map, ...)	this	Opens the toolbar on the map. The map and any other arguments called with #addTo will be passed to the constructor for each action in the toolbar.

L.Toolbar.Popup

shape.on('click', function(event) {
    new L.Toolbar.Popup(event.latlng, {
        actions: [
            MyToolbarAction3,
            MyToolbarAction4
        ]
    }).addTo(map, shape);
});

Popup controls can be useful when you want to enable users to edit a feature on the map. In these cases, popup toolbars can be easier and more intuitive for users because they expose available actions directly above the target feature (rather than in the corner of a map).

Creation

Constructor	Description
L.Toolbar.Popup(<LatLng> latlng, <ToolbarOptions> options)	Creates a popup toolbar with the specified actions and options. Toolbar will appear at the specified latlng when added to the map.

Methods

Method	Returns	Description
addTo(<Map> map, ...)	this	Opens the toolbar on the map. The map and any other arguments called with #addTo will be passed to the constructor for each action in the toolbar.
setLatLng(<LatLng> latlng)	this	Sets the latlng of the popup toolbar. If the toolbar is on the map, it will be moved. If the toolbar is not on the map, it will appear at the new latlng the next time it is added.

ToolbarOptions

Option	Type	Default	Description
className	String	''	Class to be added to the <ul> element containing the toolbar's icons.
actions	ToolbarAction[]	[]	Array of actions to be exposed to the user in the toolbar.
position	String	topright	Where in the map pane to display the control toolbar. Only applies to instances of L.Toolbar.Control. See control positions for permissible values.

L.ToolbarAction

L.ToolbarAction is a lot like L.Handler, except that, behind the scenes, it takes care of all the grunt work of creating an icon for your action and attaching and detaching click handlers. All actions to be exposed to the user via a Leaflet.Toolbar toolbar must extend L.ToolbarAction. No exceptions.

Creation

Constructor	Description
L.ToolbarAction(<ToolbarActionOptions> options)	Creates a toolbar action.

Methods

Method	Returns	Description
enable	-	Trigger the action.
disable	-	Stop the action.
enabled	Boolean	Returns true if the action is currently running.

ToolbarActionOptions

Option	Type	Default	Description
toolbarIcon	<ToolbarIconOptions>	See below.	Default settings for the icon to accompany the toolbar action.
subToolbar	L.Toolbar	new L.Toolbar()	A toolbar with additional actions to be shown when the ToolbarAction is enabled and hidden when it is disabled.

ToolbarIconOptions

Option	Type	Default	Description
html	String	''	HTML string to be placed inside <a> element representing the toolbar action.
className	String	''	Class name to be applied to the <a> element representing the toolbar action.
tooltip	String	''	Tooltip to be shown when the cursor hovers over the icon.