useLeafletTileLayer

Used to load and display tile layers on the map.

Demo

Usage

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

const el = ref<HTMLElement | null>(null);
const map = useLeafletMap(el);

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

// 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';

const el = ref<HTMLElement | null>(null);
const map = useLeafletMap(el);

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

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

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

Type Declarations

export interface UseLeafletTileLayerOptions extends TileLayerOptions {
  updateSources?: UpdateWatchSource<TileLayer>[];
  factory?: (...args: any[]) => TileLayer;
  dispose?: boolean;
}
export type UseLeafletTileLayerReturn = Ref<TileLayer | null>;
export declare function useLeafletTileLayer(
  url: MaybeRefOrGetter<string | null | undefined>,
  options?: UseLeafletTileLayerOptions
): UseLeafletTileLayerReturn;

export interface UseLeafletTileLayerOptions extends TileLayerOptions {
  updateSources?: UpdateWatchSource<TileLayer>[];
  factory?: (...args: any[]) => TileLayer;
  dispose?: boolean;
}
export type UseLeafletTileLayerReturn = Ref<TileLayer | null>;
export declare function useLeafletTileLayer(
  url: MaybeRefOrGetter<string | null | undefined>,
  options?: UseLeafletTileLayerOptions
): UseLeafletTileLayerReturn;

Source

Source • Demo • Docs