useLeafletLocateControl

A useful control to geolocate the user with many options. Read more in the @leaflet-extensions/locatecontrol documentation.

Install

$ npm install @leaflet-extensions/locatecontrol

$ npm install @leaflet-extensions/locatecontrol

import '@leaflet-extensions/locatecontrol';
import '@leaflet-extensions/locatecontrol/dist/leaflet-locatecontrol.css';

import '@leaflet-extensions/locatecontrol';
import '@leaflet-extensions/locatecontrol/dist/leaflet-locatecontrol.css';

Demo

Usage

<script setup lang="ts">
import { ref } from 'vue';
import {
  useLeafletMap,
  useLeafletTileLayer,
  useLeafletDisplayControl,
  useLeafletDisplayLayer,
  useLeafletLocateControl
} from 'vue-use-leaflet';
import '@leaflet-extensions/locatecontrol';
import '@leaflet-extensions/locatecontrol/dist/leaflet-locatecontrol.css';

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);

// create locate control
const locateControl = useLeafletLocateControl();

// display locate control
useLeafletDisplayControl(map, locateControl);
</script>

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

<script setup lang="ts">
import { ref } from 'vue';
import {
  useLeafletMap,
  useLeafletTileLayer,
  useLeafletDisplayControl,
  useLeafletDisplayLayer,
  useLeafletLocateControl
} from 'vue-use-leaflet';
import '@leaflet-extensions/locatecontrol';
import '@leaflet-extensions/locatecontrol/dist/leaflet-locatecontrol.css';

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);

// create locate control
const locateControl = useLeafletLocateControl();

// display locate control
useLeafletDisplayControl(map, locateControl);
</script>

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

Type Declarations

export * from './extension';
export interface UseLeafletLocateControlOptions
  extends LocateControlExtensionOptions {
  position?: ControlPosition | string | undefined;
  factory?: (...args: any[]) => LocateControlExtension;
  dispose?: boolean;
}
export type UseLeafletLocateControlReturn = Ref<LocateControlExtension | null>;
export declare function useLeafletLocateControl(
  options?: UseLeafletLocateControlOptions
): UseLeafletLocateControlReturn;

export * from './extension';
export interface UseLeafletLocateControlOptions
  extends LocateControlExtensionOptions {
  position?: ControlPosition | string | undefined;
  factory?: (...args: any[]) => LocateControlExtension;
  dispose?: boolean;
}
export type UseLeafletLocateControlReturn = Ref<LocateControlExtension | null>;
export declare function useLeafletLocateControl(
  options?: UseLeafletLocateControlOptions
): UseLeafletLocateControlReturn;

Source

Source • Demo • Docs