https://github.com/cyclingbyte/leaflet.sidepanel
Slide side panel plugin for Leaflet
https://github.com/cyclingbyte/leaflet.sidepanel
leaflet leaflet-plugin leaflet-sidebar leaflet-sidepanel leafletjs
Last synced: 10 months ago
JSON representation
Slide side panel plugin for Leaflet
- Host: GitHub
- URL: https://github.com/cyclingbyte/leaflet.sidepanel
- Owner: cyclingbyte
- License: mit
- Created: 2024-08-24T16:05:19.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-09T08:22:43.000Z (10 months ago)
- Last Synced: 2025-06-09T10:45:53.763Z (10 months ago)
- Topics: leaflet, leaflet-plugin, leaflet-sidebar, leaflet-sidepanel, leafletjs
- Language: TypeScript
- Homepage: https://cyclingbyte.github.io/Leaflet.SidePanel/
- Size: 428 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/leaflet.sidepanel)
[](https://www.npmjs.com/package/leaflet.sidepanel)
[](https://github.com/cyclingbyte/leaflet.sidepanel?tab=MIT-1-ov-file#readme)
[](https://www.npmjs.com/package/leaflet.sidepanel?activeTab=dependents)
# Leaflet.SidePanel
Slide side panel plugin for [Leaflet](https://leafletjs.com/ 'Leaflet Homepage')
This repository is a copy of [maxwell-ilai/Leaflet.SidePanel](https://github.com/maxwell-ilai/Leaflet.SidePanel 'Leaflet.SidePanel by maxwell-ilai')
## Demo
You can find a demo [here](https://cyclingbyte.github.io/Leaflet.SidePanel/ 'Demo for Leaflet.SidePanel')
## Prerequirements
- [leaflet](https://github.com/Leaflet/Leaflet) (v1.0.0 or higher)
(Tested with 1.8.0)
## Installation
```sh
# 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
```html
```
## 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
```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
```html
```
### Vue
There is a Vue wrapper available on [vue-leaflet-sidepanel](https://github.com/cyclingbyte/vue-leaflet-sidepanel)
This wrapper was build for Vue 3, there were no tests with Vue 2
## Credits
Special thanks to **[maxwell-ilai](https://github.com/maxwell-ilai 'Maxwell Ilai')** for the original project [maxwell-ilai/Leaflet.SidePanel](https://github.com/maxwell-ilai/Leaflet.SidePanel 'Leaflet.SidePanel by maxwell-ilai')
## Visitors
[](https://info.flagcounter.com/Qvel)