A responsive sidebar just for Leaflet
npm install leaflet-sidebar-v2A responsive sidebar for Leaflet. A fork of sidebar-v2 that only contains the necessary ingredients for use in Leaflet and provides enhanced functionality.
!Demo
> Hint: There's a Angular wrapper available at https://github.com/runette/ngx-leaflet-sidebar
.sidebar class)leaflet-sidebar-v2 with main and style fields in package.jsonexamples folder, available live at #### creation
The parameters object is fully optional. The default values are shown:
``js`
var sidebar = L.control.sidebar({
autopan: false, // whether to maintain the centered map point when opening the sidebar
closeButton: true, // whether t add a close button to the panes
container: 'sidebar', // the DOM container or #ID of a predefined sidebar container that should be used
position: 'left', // left or right
}).addTo(map);
#### modification
`js
/ add a new panel /
var panelContent = {
id: 'userinfo', // UID, used to access the panel
tab: '', // content can be passed as HTML string,
pane: someDomNode.innerHTML, // DOM elements can be passed, too
title: 'Your Profile', // an optional pane header
position: 'bottom' // optional vertical alignment, defaults to 'top'
};
sidebar.addPanel(panelContent);
/ add an external link /
sidebar.addPanel({
id: 'ghlink',
tab: '',
button: 'https://github.com/noerw/leaflet-sidebar-v2',
});
/ add a button with click listener /
sidebar.addPanel({
id: 'click',
tab: '',
button: function (event) { console.log(event); }
});
/ remove a panel /
sidebar.removePanel('userinfo');
/ en- / disable a panel /
sidebar.disablePanel('userinfo');
sidebar.enablePanel('userinfo');
`
#### open / close / show content
`js
/ open a panel /
sidebar.open('userinfo');
/ close the sidebar /
sidebar.close();
`
#### remove sidebar
`js
/ remove the sidebar (keeping the sidebar container) /
sidebar.remove();
sidebar.removeFrom(map); // leaflet 0.x
/ to clear the sidebar state, remove the container reference /
sidebar._container = null
`
`html`
You still need to initialize the sidebar (see API.creation)
The sidebar fires 3 types of events:
opening, closing, and content.
The latter has a payload including the id of the activated content div.
You can listen for them like this:
`js``
sidebar.on('content', function(e) {
// e.id contains the id of the opened panel
})
leaflet-sidebar-v2 is free software, and may be redistributed under the MIT license.