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-sidepanel

Demo

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 =
    '&copy; <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>