Slide side panel plugin for Leaflet.
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>- 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]
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>Tested in leaflet 1.8.0
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent