Skip to content
A responsive sidebar with tabs just for Leaflet
Branch: master
Clone or download
Pull request Compare This branch is 86 commits ahead, 36 commits behind Turbo87:master.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css support click listeners via markup Jan 19, 2018
doc new screenshots in readme, fix github badge Nov 12, 2017
examples refactor examples Nov 25, 2018
js v3.1.1 Mar 10, 2019
scss support click listeners via markup Jan 19, 2018
.gitignore
.npmignore update npmignore Jan 27, 2018
.travis.yml Travis: Disabled gh-pages deployment Oct 16, 2016
CHANGELOG.md v3.1.1 Mar 10, 2019
LICENSE
README.md
bower.json Release v1.0.0 Oct 31, 2016
gulpfile.js migrate gulpfile to gulp 4 Apr 4, 2019
index.d.ts correction in type definition, fixes #25 Dec 10, 2018
package.json chore(package): update gulp to version 4.0.0 Apr 4, 2019
yarn.lock chore(package): update lockfile yarn.lock Apr 4, 2019

README.md

leaflet-sidebar-v2

A responsive sidebar just for Leaflet. A fork of sidebar-v2 that only contains the necessary ingredients for use in Leaflet and provides enhanced functionality.

Demo

Why the Fork?

  • new features based on leaflet.js
    • 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 with main and style fields in package.json

Examples

in examples folder, available live at https://nickpeihl.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 = 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

/* 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
    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: '<i class="fa fa-github"></i>',
    button: 'https://github.com/nickpeihl/leaflet-sidebar-v2',
});

/* add a button with click listener */
sidebar.addPanel({
    id: 'click',
    tab: '<i class="fa fa-info"></i>',
    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

/* open a panel */
sidebar.open('userinfo');

/* close the sidebar */
sidebar.close();

remove sidebar

/* 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

markup

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

<div id="sidebar" class="leaflet-sidebar collapsed">
    <!-- Nav tabs -->
    <div class="leaflet-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="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) {
    // e.id contains the id of the opened panel
})

License

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

You can’t perform that action at this time.