useLeafletMap

Create a leaflet map.

Demo

Usage

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

// map DOM element
const el = ref<HTMLElement | null>(null);

// create map
const map = useLeafletMap(el);

// create default tile layer
const tileLayer = useLeafletTileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
);

// display tile layer
useLeafletDisplayLayer(map, tileLayer);
</script>

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

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

// map DOM element
const el = ref<HTMLElement | null>(null);

// create map
const map = useLeafletMap(el);

// create default tile layer
const tileLayer = useLeafletTileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
);

// display tile layer
useLeafletDisplayLayer(map, tileLayer);
</script>

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

Type Declarations

export interface UseLeafletMapOptions
  extends Omit<MapOptions, 'center' | 'zoom'> {
  center?: MaybeRefOrGetter<LatLngExpression | undefined>;
  zoom?: MaybeRefOrGetter<number | undefined>;
  bounds?: MaybeRefOrGetter<LatLngBoundsExpression | undefined>;
  useFly?: MaybeRefOrGetter<boolean | undefined>;
  flushSync?: boolean;
  factory?: (...args: any[]) => Map;
  dispose?: boolean;
  onViewChanged?: (event: ViewChangedEvent) => void;
}
export type UseLeafletMapReturn = Ref<Map | null>;
export interface ViewChangedEvent extends LeafletEvent {
  center: LatLng;
  zoom: number;
  bounds: LatLngBounds;
}
export declare function useLeafletMap(
  element: MaybeComputedElementRef,
  options?: UseLeafletMapOptions
): UseLeafletMapReturn;

export interface UseLeafletMapOptions
  extends Omit<MapOptions, 'center' | 'zoom'> {
  center?: MaybeRefOrGetter<LatLngExpression | undefined>;
  zoom?: MaybeRefOrGetter<number | undefined>;
  bounds?: MaybeRefOrGetter<LatLngBoundsExpression | undefined>;
  useFly?: MaybeRefOrGetter<boolean | undefined>;
  flushSync?: boolean;
  factory?: (...args: any[]) => Map;
  dispose?: boolean;
  onViewChanged?: (event: ViewChangedEvent) => void;
}
export type UseLeafletMapReturn = Ref<Map | null>;
export interface ViewChangedEvent extends LeafletEvent {
  center: LatLng;
  zoom: number;
  bounds: LatLngBounds;
}
export declare function useLeafletMap(
  element: MaybeComputedElementRef,
  options?: UseLeafletMapOptions
): UseLeafletMapReturn;

Source

Source • Demo • Docs