useLeafletRemoveControl

Remove control when component is unmounted, set ref to null or manually.

Demo

Usage

<script setup lang="ts">
import { ref } from 'vue';
import {
  useLeafletMap,
  useLeafletTileLayer,
  useLeafletDisplayLayer,
  useLeafletRemoveControl,
  useLeafletScaleControl,
  useLeafletDisplayControl
} from 'vue-use-leaflet';

const el = ref<HTMLElement | null>(null);
const map = useLeafletMap(el);
const tileLayer = useLeafletTileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
);
useLeafletDisplayLayer(map, tileLayer);

const scaleControl = useLeafletScaleControl();
useLeafletDisplayControl(map, scaleControl);

const remove = useLeafletRemoveControl(scaleControl);
// remove() // OR
// scaleControl.value = null // OR
// component is unmounted
</script>

<template>
  <div ref="el" style="height: 250px"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  useLeafletMap,
  useLeafletTileLayer,
  useLeafletDisplayLayer,
  useLeafletRemoveControl,
  useLeafletScaleControl,
  useLeafletDisplayControl
} from 'vue-use-leaflet';

const el = ref<HTMLElement | null>(null);
const map = useLeafletMap(el);
const tileLayer = useLeafletTileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
);
useLeafletDisplayLayer(map, tileLayer);

const scaleControl = useLeafletScaleControl();
useLeafletDisplayControl(map, scaleControl);

const remove = useLeafletRemoveControl(scaleControl);
// remove() // OR
// scaleControl.value = null // OR
// component is unmounted
</script>

<template>
  <div ref="el" style="height: 250px"></div>
</template>

Type Declarations

export interface LeafletRemovableControl {
  remove(): this;
}
export declare function useLeafletRemoveControl<
  T extends LeafletRemovableControl = LeafletRemovableControl
>(
  source: MaybeRefOrGetter<T | null | undefined>,
  options?: UseLeafletRemoveObjectOptions<T>
): UseLeafletRemoveObjectReturn;

export interface LeafletRemovableControl {
  remove(): this;
}
export declare function useLeafletRemoveControl<
  T extends LeafletRemovableControl = LeafletRemovableControl
>(
  source: MaybeRefOrGetter<T | null | undefined>,
  options?: UseLeafletRemoveObjectOptions<T>
): UseLeafletRemoveObjectReturn;

Source

Source • Demo • Docs