Leaflet.SidePanel

Slide side panel plugin for Leaflet.

How to use

Include leaflet-sidepanel.css and leaflet-sidepanel.js in your page:

<link rel="stylesheet" href="./dist/leaflet-sidepanel.css" />
<script src="./dist/leaflet-sidepanel.min.js"></script>

Options

• panelPosition: 'left' (default) | 'right' [string]
• hasTabs: true (default) | false [boolean]
• tabsPosition: 'top' (default) | 'right' | 'bottom' | 'left' [string]
• darkMode: true | false (default) [boolean]
• pushControls: true | false (default) [boolean]
• startTab: 1 (default) [number | string]

Example

Javascript

const panelRight = L.control.sidepanel('panelID', {
  panelPosition: 'right',
  hasTabs: false,
  tabsPosition: 'top',
  pushControls: true,
  darkMode: true,
  startTab: 'tab-5'
}).addTo(map);

Html

<div id="panelID" class="sidepanel" aria-label="side panel" aria-hidden="false">
  <div class="sidepanel-inner-wrapper">
    <nav class="sidepanel-tabs-wrapper" aria-label="sidepanel tab navigation">
      <ul class="sidepanel-tabs">
        <li class="sidepanel-tab">
          <a href="#" class="sidebar-tab-link" role="tab" data-tab-link="tab-1">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"  fill="currentColor">
              <path fill-rule="evenodd" />
            </svg>
          </a>
        </li>
        <!-- [...] -->
      </ul>
    </nav>
    <div class="sidepanel-content-wrapper">
      <div class="sidepanel-content">
        <div class="sidepanel-tab-content" data-tab-content="tab-1">
          <p>Content 1.</p>
        </div>
        <!-- [...] -->
      </div>
    </div>
  </div>
  <div class="sidepanel-toggle-container">
    <button class="sidepanel-toggle-button" type="button" aria-label="toggle side panel"></button>
  </div>
</div>

Requirements

Tested in leaflet 1.8.0

Links

Example Page

Leaflet