Map

80 · Map

A map built with Leaflet and OpenStreetMap. It can show a list of markers and write the clicked location to a Livewire property.

PRO acun:map

In production, OpenStreetMap's free tile server does not allow heavy use; set your own tile provider with registerMap(Alpine, L, { tileUrl }).

Basic usage

The map center is given with center ([latitude, longitude]) and the zoom with zoom; the default center is Istanbul and the default zoom is 12. Change the height in pixels with height.

LIVE EXAMPLE

<acun:map :center="[41.0082, 28.9784]" :zoom="14" :height="280" />

Prop	Values
`center`	[latitude, longitude]
`zoom`	1–19 (higher zooms in)
`height`	Pixels (default 360)

Markers

markers is an array whose items each have lat, lng and an optional title; title is shown as plain text in the popup that opens when the marker is clicked. With more than one marker, the map is fitted to show them all; with a single marker, center and zoom still apply.

LIVE EXAMPLE

<acun:map :markers="[
    ['lat' => 40.9909, 'lng' => 29.0286, 'title' => 'Kadıköy warehouse'],
    ['lat' => 41.0430, 'lng' => 29.0094, 'title' => 'Beşiktaş store'],
    ['lat' => 41.0256, 'lng' => 29.0963, 'title' => 'Ümraniye warehouse'],
    ['lat' => 40.9819, 'lng' => 28.8772, 'title' => 'Bakırköy store'],
]" />

Prop	Values
`markers`	Array of ['lat', 'lng', 'title']

Picking a location

When pick is given, clicking the map places a marker there and dispatches the map-picked event with { lat, lng }. In the example below, the event is handled with Alpine and the picked location is printed; try it by clicking the map.

LIVE EXAMPLE

<div x-data="{ location: null }" x-on:map-picked="location = $event.detail">
    <acun:map pick="location" :height="280" />
    <p class="mt-3 text-sm text-gray-600 dark:text-zinc-400" x-text="location ? 'Selected location: ' + location.lat.toFixed(5) + ', ' + location.lng.toFixed(5) : 'Click a point on the map.'"></p>
</div>

Prop	Values
`pick`	Livewire property the location is written to
`map-picked`	Event dispatched on click: { lat, lng }

With Livewire

On a Livewire page, the clicked location is written to the property you give to pick as a ['lat' => …, 'lng' => …] array. Because the map is drawn inside wire:ignore, it is not recreated on later updates.

BLADE

{{-- In the component: public ?array $location = null; --}}
<acun:map pick="location" :center="[$warehouse->lat, $warehouse->lng]" :zoom="16" :markers="[['lat' => $warehouse->lat, 'lng' => $warehouse->lng, 'title' => $warehouse->name]]" />

@if ($location)
    <p class="mt-2 text-sm">New location: {{ $location['lat'] }}, {{ $location['lng'] }}</p>
@endif

Prop	Values
`pick`	Name of the Livewire property

Installation

Leaflet is not included in the package; install it in your application and pass it, together with its stylesheet, to registerMap through the PRO JS entry @acunsoft/acun-ui-pro (the Vite alias from the CSS, JavaScript and build guide). Set your own tile provider with tileUrl and the attribution text with attribution.

import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import { registerMap } from '@acunsoft/acun-ui-pro';

document.addEventListener('livewire:init', () => registerMap(Alpine, L, {
    tileUrl: 'https://{s}.your-tile-provider.com/{z}/{x}/{y}.png?key=…',
    attribution: '© Provider · © OpenStreetMap',
}));

Prop	Values
`tileUrl`	Tile URL template
`attribution`	Attribution text in the corner of the map

API

Props and slots

The values the component accepts.

Prop	Default	Description
`center`	`[41.0082, 28.9784]`	[latitude, longitude]
`zoom`	`12`	Zoom level (up to 19)
`markers`	`[]`	Array of ['lat', 'lng', 'title']; with more than one, the map is fitted to all of them
`height`	`360`	Map height (pixels)
`pick`	`null`	Livewire property the clicked location is written to as ['lat', 'lng']
`registerMap: tileUrl`	`OpenStreetMap`	Tile URL template
`registerMap: attribution`	`© OpenStreetMap`	Attribution text