useLeafletRemoveObject

Manage the removal of a custom object.

Demo

Usage

<script setup lang="ts">
import { ref } from 'vue';
import {
  useLeafletMap,
  useLeafletTileLayer,
  useLeafletDisplayLayer,
  useLeafletRemoveObject
} 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 watchSource = ref(false);
const remove = useLeafletRemoveObject(map, {
  remove: map => map.off().remove(),
  isRemoved: map => !(map.getContainer() as any)._leaflet_id,
  cleanRef: true,
  watch: watchSource
});

// remove() // OR
// map.value = null // OR
// watchSource.value = true // 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,
  useLeafletRemoveObject
} 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 watchSource = ref(false);
const remove = useLeafletRemoveObject(map, {
  remove: map => map.off().remove(),
  isRemoved: map => !(map.getContainer() as any)._leaflet_id,
  cleanRef: true,
  watch: watchSource
});

// remove() // OR
// map.value = null // OR
// watchSource.value = true // OR
// component is unmounted
</script>

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

Type Declarations

export interface UseLeafletRemoveObjectOptions<T> {
  remove?: (source: T) => void;
  isRemoved?: (source: T) => boolean;
  watch?: WatchSource<any>;
  cleanRef?: boolean;
  cleanVal?: any;
  dispose?: boolean;
  flushSync?: boolean;
}
export type UseLeafletRemoveObjectReturn = () => void;
export declare function useLeafletRemoveObject<T = any>(
  source: MaybeRefOrGetter<T | null | undefined>,
  options?: UseLeafletRemoveObjectOptions<T>
): UseLeafletRemoveObjectReturn;

export interface UseLeafletRemoveObjectOptions<T> {
  remove?: (source: T) => void;
  isRemoved?: (source: T) => boolean;
  watch?: WatchSource<any>;
  cleanRef?: boolean;
  cleanVal?: any;
  dispose?: boolean;
  flushSync?: boolean;
}
export type UseLeafletRemoveObjectReturn = () => void;
export declare function useLeafletRemoveObject<T = any>(
  source: MaybeRefOrGetter<T | null | undefined>,
  options?: UseLeafletRemoveObjectOptions<T>
): UseLeafletRemoveObjectReturn;

Source

Source • Demo • Docs