leaflet-sidebar-v2
A responsive sidebar for Leaflet. A fork of sidebar-v2 that only contains the necessary ingredients for use in Leaflet and provides enhanced functionality.
Hint: There's a Angular wrapper available at https://github.com/runette/ngx-leaflet-sidebar
Why the Fork?
- JS API for panel modification
- "autopan" feature, moving the map content next to the sidebar content
- only supports leaflet (0.x and 1.x) to maintain a smaller codebase and support more features
- compatibility with bootstrap (no generic
.sidebar
class) - provide a npm package
leaflet-sidebar-v2
withmain
andstyle
fields inpackage.json
Examples
in examples
folder, available live at https://noerw.github.io/leaflet-sidebar-v2/examples
Usage
API
leaflet-sidebar-v2 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 = Lcontrol;
modification
/* 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: someDomNodeinnerHTML // DOM elements can be passed, too title: 'Your Profile' // an optional pane header position: 'bottom' // optional vertical alignment, defaults to 'top';sidebar; /* add an external link */sidebar; /* add a button with click listener */sidebar; /* remove a panel */sidebar; /* en- / disable a panel */sidebar;sidebar;
open / close / show content
/* open a panel */sidebar; /* close the sidebar */sidebar;
remove sidebar
/* remove the sidebar (keeping the sidebar container) */sidebar;sidebar; // leaflet 0.x /* to clear the sidebar state, remove the container reference */sidebar_container = null
markup
If you use the sidebar with static content only, you can predefine content in HTML:
<!-- Nav tabs --> <!-- top aligned tabs --> <!-- bottom aligned tabs --> <!-- Tab panes --> sidebar-v2 A responsive sidebar for mapping libraries Messages Profile
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
License
leaflet-sidebar-v2 is free software, and may be redistributed under the MIT license.