A responsive sidebar just for Leaflet. A fork of sidebar-v2, which is a fork of sidebar-v2 that only contains the necessary ingredients for use in Leaflet and provides enhanced functionality.
Why the Fork?
I needed a sidebar that works more like a popup and that is designed to be used only via a JS API, no HTML markup required.
Examples
In examples
folder. I only changed the index.html example.
Usage
API
leaflet-popup-sidebar provides a simple API to dynamically modify the sidebar. All functions may be chained.
creation
The parameters object is fully optional. The default values are shown:
var sidebar = L.control.sidebar({
autopan: false,
closeButton: true,
container: 'sidebar',
position: 'left',
}).addTo(map);
modification
var panelContent = {
id: 'userinfo',
tab: '<i class="fa fa-gear"></i>',
pane: someDomNode.innerHTML,
title: 'Your Profile',
position: 'bottom'
};
sidebar.addPanel(panelContent);
sidebar.addPanel({
id: 'ghlink',
tab: '<i class="fa fa-github"></i>',
button: 'https://github.com/nickpeihl/leaflet-sidebar-v2',
});
sidebar.addPanel({
id: 'click',
tab: '<i class="fa fa-info"></i>',
button: function (event) { console.log(event); }
});
sidebar.removePanel('userinfo');
sidebar.disablePanel('userinfo');
sidebar.enablePanel('userinfo');
open / close / show content
sidebar.open('userinfo');
sidebar.close();
sidebar.remove();
sidebar.removeFrom(map);
sidebar._container = null
markup
If you use the sidebar with static content only, you can predefine content in HTML:
<div id="sidebar" class="leaflet-sidebar collapsed">
<div class="leaflet-sidebar-tabs">
<ul role="tablist">
<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">
<li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li>
</ul>
</div>
<div class="leaflet-sidebar-content">
<div class="leaflet-sidebar-pane" id="home">
<h1 class="leaflet-sidebar-header">
sidebar-v2
<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div>
</h1>
<p>A responsive sidebar for mapping libraries</p>
</div>
<div class="leaflet-sidebar-pane" id="messages">
<h1 class="leaflet-sidebar-header">Messages<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
</div>
<div class="leaflet-sidebar-pane" id="profile">
<h1 class="leaflet-sidebar-header">Profile<div class="leaflet-sidebar-close"><i class="fa fa-caret-left"></i></div></h1>
</div>
</div>
</div>
You still need to initialize the sidebar (see API.creation)
Events
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) {
})
License
leaflet-sidebar-v2 is free software, and may be redistributed under the MIT license.