useLeafletCreate

Lazy creation object with source watching.

Demo

Usage

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

// marker position
const position = ref<LatLngExpression | undefined>(undefined);

// lazy create
const marker = useLeafletCreate(() => new Marker(position.value!), {
  watch: position
});

// display marker when created
useLeafletDisplayLayer(map, marker);

// create and show marker
// position.value = [0, 0];
</script>

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

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

// marker position
const position = ref<LatLngExpression | undefined>(undefined);

// lazy create
const marker = useLeafletCreate(() => new Marker(position.value!), {
  watch: position
});

// display marker when created
useLeafletDisplayLayer(map, marker);

// create and show marker
// position.value = [0, 0];
</script>

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

Type Declarations

export interface UseLeafletCreateOptions {
  watch?: WatchSource<any>;
  flushSync?: boolean;
}
export type UseLeafletCreateReturn<T> = Ref<T | null>;
export declare function useLeafletCreate<T extends object>(
  fn: () => T,
  options?: UseLeafletCreateOptions
): UseLeafletCreateReturn<T>;

export interface UseLeafletCreateOptions {
  watch?: WatchSource<any>;
  flushSync?: boolean;
}
export type UseLeafletCreateReturn<T> = Ref<T | null>;
export declare function useLeafletCreate<T extends object>(
  fn: () => T,
  options?: UseLeafletCreateOptions
): UseLeafletCreateReturn<T>;

Source

Source • Demo • Docs