Leaflet.SidePanel

Slide side panel plugin for Leaflet

This repository is a copy of maxwell-ilai/Leaflet.SidePanel

Demo

You can find a demo here

Prerequirements

• leaflet (v1.0.0 or higher) (Tested with 1.8.0)

Installation

# NPM
npm i leaflet.sidepanel

# yarn
yarn add leaflet.sidepanel

# pnpm
pnpm i leaflet.sidepanel

Or include the script and css in your html file

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/leaflet.sidepanel@1.2.0/dist/style.css"
/>
<script src="https://cdn.jsdelivr.net/npm/leaflet.sidepanel@1.2.0"></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]
  Shifts the map controls (like zoom) when the side panels open, to keep them visible and usabe
• defaultTab: 1 (default) [number | string]
• size: '400px' (dafault) [string] (everything that can be used for width/higth in css)
• onTabClick(tabLink: HTMLElement): void
  executed when a tab is clicked, passed the link as argument
• onToggle(opened: boolean): void
  executed when the sidebar opened or closed

Usage

Javascript

import L from 'leaflet';
import 'leaflet.sidepanel';
import 'leaflet.sidepanel/dist/style.css';

const panelRight = L.control
  .sidepanel('panelID', {
    panelPosition: 'right',
    hasTabs: false,
    tabsPosition: 'top',
    pushControls: true,
    darkMode: true,
    defaultTab: '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">
            <!-- [You can also use images / icons] -->
            Tab 1
          </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>

Vue

There is a Vue wrapper available on vue-leaflet-sidepanel
This wrapper was build for Vue 3, there were no tests with Vue 2

Credits

Special thanks to maxwell-ilai for the original project maxwell-ilai/Leaflet.SidePanel

Visitors