Controls

Overview

The <x-map-controls> component adds standard interactive controls to the map such as zoom buttons, compass, geolocation, fullscreen toggle, a scale bar and a 3D view toggle. For your own buttons and panels, use <x-map-control>. Nest both 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:

3D View

Add :three-d="true" to get a 3D toggle button. It eases the camera to a pitch of 60° and a bearing of -20° and back to flat (tune with :three-d-pitch, :three-d-bearing and :three-d-duration), and dispatches map:3d-toggled with { enabled }. Pair it with the openfreemap-liberty provider, which has 3D building extrusions:

<x-map
    :center="[-74.0066, 40.7115]"
    :zoom="15.2"
    :pitch="55"
    :bearing="-20"
    provider="openfreemap-liberty"
    theme="light"
>
    <x-map-controls
        :three-d="true"
        :locate="false"
        :fullscreen="true"
    />
</x-map>

Custom Controls

<x-map-control> pins any Blade or Alpine markup to the map, styled as a control group (buttons are stacked with dividers and pick up the map's light/dark theme). Inside it, the $map Alpine magic returns the MapLibre instance, so buttons can call any Map method directly:

<x-map :center="[2.2945, 48.8584]" :zoom="14">
    <x-map-controls :locate="false" />

    <x-map-control position="top-left">
        <button x-on:click="$map.easeTo({ pitch: 60, bearing: -20, duration: 1000 })">3D view</button>
        <button x-on:click="$map.easeTo({ pitch: 0, bearing: 0, duration: 1000 })">2D view</button>
        <button x-on:click="$map.flyTo({ center: [2.2945, 48.8584], zoom: 14 })">Reset</button>
    </x-map-control>
</x-map>

position accepts top-left (default), top-right, bottom-left, bottom-right, top and bottom (centered). Set :group="false" to drop the control-group styling and render your own panel, legend or search box. Buttons can also use wire:click to call your Livewire component.

Props