Harita

80 · Harita

Leaflet ve OpenStreetMap ile harita. İşaretçi listesi gösterebilir ve tıklanan konumu bir Livewire özelliğine yazabilir.

PRO acun:map

Canlı ortamda OpenStreetMap'in ücretsiz karo sunucusu yoğun kullanıma izin vermez; registerMap(Alpine, L, { tileUrl }) ile kendi karo sağlayıcınızı verin.

Temel kullanım

Haritanın ortası center ([enlem, boylam]), yakınlığı zoom ile verilir; varsayılan merkez İstanbul, varsayılan yakınlık 12'dir. Yüksekliği height ile piksel olarak değiştirin.

CANLI ÖRNEK

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

Prop	Değerler
`center`	[enlem, boylam]
`zoom`	1–19 (büyüdükçe yakınlaşır)
`height`	Piksel (varsayılan 360)

İşaretçiler

markers her biri lat, lng ve isteğe bağlı title taşıyan bir dizidir; title işaretçiye tıklanınca açılan balonda düz metin olarak gösterilir. Birden fazla işaretçi varsa harita hepsini gösterecek şekilde sığdırılır; tek işaretçide center ve zoom geçerli kalır.

CANLI ÖRNEK

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

Prop	Değerler
`markers`	['lat', 'lng', 'title'] dizisi

Konum seçme

pick verildiğinde haritaya tıklamak oraya bir işaretçi koyar ve map-picked olayını { lat, lng } ile yayınlar. Aşağıdaki örnekte olay Alpine ile dinlenip seçilen konum yazdırılıyor; haritaya tıklayarak deneyin.

CANLI ÖRNEK

<div x-data="{ konum: null }" x-on:map-picked="konum = $event.detail">
    <acun:map pick="konum" :height="280" />
    <p class="mt-3 text-sm text-gray-600 dark:text-zinc-400" x-text="konum ? 'Seçilen konum: ' + konum.lat.toFixed(5) + ', ' + konum.lng.toFixed(5) : 'Haritada bir noktaya tıklayın.'"></p>
</div>

Prop	Değerler
`pick`	Konumun yazılacağı Livewire özelliği
`map-picked`	Tıklamada yayınlanan olay: { lat, lng }

Livewire ile

Livewire sayfasında pick'e verdiğiniz özelliğe tıklanan konum ['lat' => …, 'lng' => …] dizisi olarak yazılır. Harita wire:ignore içinde çizildiği için sonraki güncellemelerde yeniden oluşturulmaz.

BLADE

{{-- Bileşende: public ?array $konum = null; --}}
<acun:map pick="konum" :center="[$depo->enlem, $depo->boylam]" :zoom="16" :markers="[['lat' => $depo->enlem, 'lng' => $depo->boylam, 'title' => $depo->ad]]" />

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

Prop	Değerler
`pick`	Livewire özelliğinin adı

Kurulum

Leaflet pakete dahil değildir; uygulamanızda kurup, PRO JS girişi @acunsoft/acun-ui-pro (CSS, JavaScript ve derleme kılavuzundaki Vite takma adı) üzerinden stil dosyasıyla birlikte registerMap'e verin. Kendi karo sağlayıcınızı tileUrl, kaynak metnini attribution ile belirtin.

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}.karo-saglayiciniz.com/{z}/{x}/{y}.png?key=…',
    attribution: '© Sağlayıcı · © OpenStreetMap',
}));

Prop	Değerler
`tileUrl`	Karo adresi şablonu
`attribution`	Haritanın köşesindeki kaynak metni

API

Prop'lar ve slot'lar

Bileşenin kabul ettiği değerler.

Prop	Varsayılan	Açıklama
`center`	`[41.0082, 28.9784]`	[enlem, boylam]
`zoom`	`12`	Yakınlaştırma düzeyi (en çok 19)
`markers`	`[]`	['lat', 'lng', 'title'] dizisi; birden fazlaysa harita hepsine sığdırılır
`height`	`360`	Harita yüksekliği (piksel)
`pick`	`null`	Tıklanan konumun ['lat', 'lng'] olarak yazılacağı Livewire özelliği
`registerMap: tileUrl`	`OpenStreetMap`	Karo adresi şablonu
`registerMap: attribution`	`© OpenStreetMap`	Kaynak metni