leaflet-popup-sidebar

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.

!Demo

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

$3

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:

``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/nickpeihl/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
`

$3

If you use the sidebar with static content only, you can predefine content in HTML:

`html



`

You still need to initialize the sidebar (see API.creation)

$3

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
})
``

License

leaflet-sidebar-v2 is free software, and may be redistributed under the MIT license.