نقشه Leaflet

از Bricks 2.1 می‌توانید از المان جدید Map (Leaflet) برای نمایش نقشه‌های کاملاً تعاملی مبتنی بر Leaflet.js استفاده کنید.

این المان امکان ترکیب چند لایه نقشه، افزودن نشانگر سفارشی و تنظیم دقیق رفتار نقشه را مستقیماً داخل Bricks می‌دهد.

نمای کلی

المان Map (Leaflet) به سه گروه تنظیمات اصلی تقسیم می‌شود:

Layers — منبع نقشه (OpenStreetMap، OpenTopoMap و غیره)
Markers — نقاط سفارشی با آیکون و پاپ‌آپ
Map — تنظیمات کلی (مرکز، زوم و غیره)

لایه‌ها (Layers)

لایه‌ها تعیین می‌کنند کدام tile نقشه نمایش داده شود.

هر لایه از طریق Repeater تعریف می‌شود؛ یعنی می‌توانید چند لایه (استایل نقشه) اضافه کنید و به بازدیدکننده اجازه جابه‌جایی بین آن‌ها را بدهید.

برای هر لایه این موارد را تنظیم می‌کنید:

Name — برچسب در سوییچر لایه (مثلاً «Street Map»، «Topographic»)
URL — آدرس provider (مثلاً https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png). فهرست برخی providerها اینجا است.
placeholderهای {s}، {z}، {x}، {y} باید وجود داشته باشند؛ Leaflet آن‌ها را پویا جایگزین می‌کند:
- {s} → subdomain (a, b, c, …)
- {z} → سطح زوم
- {x} / {y} → مختصات tile
Min/Max Zoom — محدوده زوم پشتیبانی‌شده
Error Tile URL — تصویر جایگزین در صورت خطای بارگذاری tile
Attribution — متن کپی‌رایت یا استفاده (اکثر providerها الزامی‌دارند)

مثال:

Street Map → tileهای OpenStreetMap
Topo Map → tileهای OpenTopoMap
Satellite → Esri یا provider دیگر

کاربران در فرانت‌اند می‌توانند بین این لایه‌ها جابه‌جا شوند.

نشانگرها (Markers)

نشانگرها نقاط مهم روی نقشه را برجسته می‌کنند.

می‌توانید تنظیم کنید:

Default Marker Icon — اگر آیکون سفارشی نباشد
Marker Repeater — چند نشانگر، هر کدام با:
Coordinates (Lat, Lng)
Label (شناسایی)
Custom Icon (اختیاری؛ جایگزین آیکون پیش‌فرض)
Popup Text (متن با کلیک روی نشانگر)

نقشه (Map)

گروه Map تنظیمات پایه را کنترل می‌کند. مهم‌ترین‌ها ارتفاع نقشه (پیش‌فرض ۳۰۰px)، مرکز نقشه (عرض و طول جغرافیایی) و سطح زوم اولیه هستند.

علاوه بر این، کنترل‌های رفتار زوم، تعاملات نقشه (مثل drag و click) و گزینه‌های نمایش (مثل attribution و resize) بر پایه Leaflet.js هستند. توضیحات کامل در مستندات Leaflet است.