Components

Map

A keyless OpenStreetMap embed that drops a pin at any latitude / longitude.

php artisan blatui:add map

<x-ui.map
    class="max-w-2xl"
    :lat="50.8467"
    :lon="4.3499"
    label="Brussels, Belgium"
/>

No Marker

<x-ui.map
    class="max-w-2xl"
    :lat="51.5079"
    :lon="-0.0877"
    :zoom="13"
    :marker="false"
    label="City of London"
/>

<x-ui.map
    class="max-w-2xl"
    :lat="48.8584"
    :lon="2.2945"
    :zoom="16"
    :height="480"
    label="Eiffel Tower, Paris"
/>

Props, slots and exposed methods for <x-ui.map>.

Prop	Type	Default	Description
`lat`	`number`	—	Latitude of the point to centre the map on. Defaults to Brussels (50.8467) when unset.
`lon`	`number`	—	Longitude of the point to centre the map on. Defaults to Brussels (4.3499) when unset.
`zoom`	`int`	`14`	OpenStreetMap zoom level driving how tight the view is. Clamped to the 1-19 range; higher means closer.
`label`	`string`	`'Location'`	Human-readable name of the place. Used in the iframe title and the "View larger map" link.
`marker`	`bool`	`true`	Drop a pin at the lat/lon coordinates. Set false to show the area without a marker.
`height`	`int`	`320`	Fixed pixel height of the map frame. Ignored when ratio is set.
`ratio`	`string`	—	A CSS aspect-ratio value (e.g. "16 / 9") for the frame. Overrides height when set, making the map responsive.