📚 MeasurementControl

Usecase

• Measure distance/area for planning and reporting tasks.
• Offer ad-hoc measurement tools without leaving the map view.

The MeasurementControl component provides a user interface for measuring distances, areas, and angles on the map. It is highly configurable and supports custom actions, multiple units, and event hooks for integration with your application logic.

Props

Prop	Description	Type	Required	Default Value
mapId		string	false	--
dragId		string	false	--
btnWidth		number	false	40
position		'top-left', 'top-right', 'bottom-left', 'bottom-right'	false	'bottom-right'
controlVisible		boolean	false	true

and

Prop	Type	Default	Description
actions	MeasureActionItem[]	[]	Custom measurement actions

Types

interface MeasureActionItem {
  title: string;
  handle: (data: { handler: MeasurementHandleType; measurementType?: string; coordinates?: CoordinatesNumber[]; clear: () => void; reset: () => void; onFlyTo: () => void }) => void;
  icon: any;
  type: string;
  show?: (data: { handler: MeasurementHandleType; measurementType?: string; status: 'select' | 'handle' }) => boolean;
  isActive?: () => boolean;
  disabled?: (data: { coordinates?: CoordinatesNumber[] }) => boolean;
  index?: number;
}

Usage

<script setup lang="ts">
import { Map } from '@hungpvq/vue-map-core';
import { MeasurementControl } from '@hungpvq/vue-map-measurement';
import '@hungpvq/vue-map-core/style.css';
import '@hungpvq/vue-map-measurement/style.css';
</script>

<template>
  <Map>
    <MeasurementControl />
  </Map>
</template>