A responsive sidebar just for Leaflet. A fork of sidebar-v2 that only contains the necessary ingredients for use in Leaflet.
I wanted to npm install
sidebar-v2 for a Leaflet project which required the main
and style
fields in package.json
. This fork removes the Google Maps and OpenLayers files since I don't need them in the npm package.
leaflet-sidebar-v2 provides a simple API to dynamically modify the sidebar. All functions may be chained.
var sidebar = L.control.sidebar('sidebar').addTo(map);
/* add a new panel */
var panelContent = {
id: 'userinfo', // UID, used to access the panel
tab: '<i class="fa fa-gear"></i>', // content can be passed as HTML string,
pane: someDomNode.innerHTML, // DOM elements can be passed, too
position: 'bottom' // vertical alignment, 'top' or 'bottom'
};
sidebar.addPanel(panelContent);
/* remove a panel */
sidebar.removePanel('userinfo');
/* en- / disable a panel */
sidebar.disablePanel('userinfo');
sidebar.enablePanel('userinfo');
/* open a panel */
sidebar.open('userinfo');
/* close the sidebar */
sidebar.close();
If you use the sidebar with static content only, you can predefine content in HTML:
<div id="sidebar" class="sidebar collapsed">
<!-- Nav tabs -->
<div class="sidebar-tabs">
<ul role="tablist"> <!-- top aligned tabs -->
<li><a href="#home" role="tab"><i class="fa fa-bars"></i></a></li>
<li class="disabled"><a href="#messages" role="tab"><i class="fa fa-envelope"></i></a></li>
<li><a href="#profile" role="tab"><i class="fa fa-user"></i></a></li>
</ul>
<ul role="tablist"> <!-- bottom aligned tabs -->
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="sidebar-content">
<div class="sidebar-pane" id="home">
<h1 class="sidebar-header">
sidebar-v2
<div class="sidebar-close"><i class="fa fa-caret-left"></i></div>
</h1>
<p>A responsive sidebar for mapping libraries</p>
</div>
<div class="sidebar-pane" id="messages">
<h1 class="sidebar-header">Messages<div class="sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
</div>
<div class="sidebar-pane" id="profile">
<h1 class="sidebar-header">Profile<div class="sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
</div>
</div>
</div>
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:
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.