useLeafletEvent

A set of methods shared between event-powered classes (like Map and Marker).

Demo

Usage

<script setup lang="ts">
import { ref } from 'vue';
import type { LatLng, LeafletEvent, Map } from 'leaflet';
import {
  useLeafletMap,
  useLeafletEvent,
  useLeafletTileLayer,
  useLeafletDisplayLayer
} 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);

// subscribe to moveend map event
const cleanup = useLeafletEvent(map, 'moveend', (e: LeafletEvent) => {
  // called when the center of the map stops changing
});
// cleanup() // unregister the listener
</script>

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

<script setup lang="ts">
import { ref } from 'vue';
import type { LatLng, LeafletEvent, Map } from 'leaflet';
import {
  useLeafletMap,
  useLeafletEvent,
  useLeafletTileLayer,
  useLeafletDisplayLayer
} 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);

// subscribe to moveend map event
const cleanup = useLeafletEvent(map, 'moveend', (e: LeafletEvent) => {
  // called when the center of the map stops changing
});
// cleanup() // unregister the listener
</script>

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

Type Declarations

export declare function useLeafletEvent(
  target: MaybeRefOrGetter<Evented | null | undefined> | undefined,
  event: Arrayable<string>,
  listener: Arrayable<(ev: LeafletEvent) => any>
): import('@vueuse/shared').Fn;
export type UseLeafletEventReturn = ReturnType<typeof useLeafletEvent>;

export declare function useLeafletEvent(
  target: MaybeRefOrGetter<Evented | null | undefined> | undefined,
  event: Arrayable<string>,
  listener: Arrayable<(ev: LeafletEvent) => any>
): import('@vueuse/shared').Fn;
export type UseLeafletEventReturn = ReturnType<typeof useLeafletEvent>;

Source

Source • Demo • Docs