cyclingbyte
vue-leaflet-sidepanel
Slide side panel plugin for @vue-leaflet/vue-leaflet
This plugin is a wrapper for vue3 and based on cyclingbyte/Leaflet.SidePanel
Prerequirements
- leaflet (v1.0.0 or higher) (Tested with v1.8.0)
- @vue-leaflet/vue-leaflet (v0.10.1 or higher) (Tested with v0.10.1)
This packages targets Vue 3. There is no support for Vue 2 (it might work, but it might not)
Installation
# NPM
npm i vue-leaflet-sidepanel
# yarn
yarn add vue-leaflet-sidepanel
# pnpm
pnpm i vue-leaflet-sidepanelDemo
You can find a demo here
Usage
Until the complete documentation is ready, please check the playground/App.vue as example usage.
Feel free to ask questions in the discussion area if something is not clear
<template>
<div style="width: fit-content; margin: auto">
<l-map id="map" :zoom="15" :center="[53.0758, 8.8071]">
<l-tile-layer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
layer-type="base"
name="OpenStreetMap"
:attribution="attribution"
/>
<l-sidepanel id="leftPanel" :headings tabsPosition="left">
<template #[`heading.1`]>
<!-- Here you can custumize your tab if simple text is not enough. Follow the scheme #[`heading.<link>`] -->
1. Tab
</template>
<l-sidepanel-tab link="1">
<p>Content 1</p>
</l-sidepanel-tab>
<!-- [...] -->
</l-sidepanel>
<l-sidepanel id="rigthPanel" position="right" size="300px" dark-mode />
</l-map>
</div>
</template>
<script setup lang="ts">
import 'leaflet/dist/leaflet.css';
import 'vue-leaflet-sidepanel/dist/style.css';
import { LMap, LTileLayer } from '@vue-leaflet/vue-leaflet';
import { LSidepanel, LSidepanelTab } from 'vue-leaflet-sidepanel';
const attribution =
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors';
const headings = [
{
// This is the link to the tab
key: 1,
// This is the text displayed in the tab, can be overridden with <template #[`heading.<link>`>
value: 'Tab 1',
},
];
</script>Credits
Special thanks to maxwell-ilai for the original sidepanel maxwell-ilai/Leaflet.SidePanel