Controls

Overview

The <x-map-controls> component adds standard interactive controls to the map such as zoom buttons, compass, geolocation, fullscreen toggle, and a scale bar. Nest it inside <x-map>.

Basic Usage

<x-map :center="[-0.09, 51.505]" :zoom="13">
    <x-map-controls
        :locate="true"
        :fullscreen="true"
        position="top-right"
    />
</x-map>

With Scale Bar

Enable the scale bar to show distance measurement on the map:

<x-map :center="[-74.006, 40.7128]" :zoom="10">
    <x-map-controls
        :scale="true"
        :fullscreen="true"
        :locate="false"
        position="top-right"
    />
</x-map>

Positioning

Controls can be placed in any of the four map corners using the position prop:

Props