wc-location-field؛ انتخاب موقعیت با یک تگ
فرانتاند
جاوااسکریپتخلاصهٔ کامل‌تر
تو معرفی پروژه اومده که wc-location-field یه وب‌کامپوننت مستقله برای انتخاب موقعیت مکانی؛ یعنی به‌جای اینکه یه کتابخونه‌ی نقشه رو دستی به فرم وصل کنی، یه تگ سفارشی می‌ذاری و بقیه‌ش خودکار انجام میشه. جست‌وجوی آدرس رو از Nominatim (OpenStreetMap) یا Google Maps می‌گیره و هیچ وابستگی‌ای به فریمورک نداره.
<wc-location-field label="From" placeholder="e.g. Paddington Station"></wc-location-field>رفتار کامپوننت با اتریبیوت‌ها کنترل میشه: show-map یه نقشه‌ی تعاملی زیر باکس جست‌وجو می‌ذاره، center-lat و center-lng مرکز نقشه و سوگیری جست‌وجو رو تعیین می‌کنن، map-provider="google" همراه google-maps-key سرویس رو عوض می‌کنه، w3w-key جست‌وجوی آدرس‌های سه‌کلمه‌ای What3Words رو فعال می‌کنه و readonly رابط جست‌وجو رو برمی‌داره تا فقط یه نقشه‌ی پین‌شده بمونه.
از سمت جاوااسکریپت هم متد prefill() برای ست‌کردن موقعیت، clear() برای ریست و پراپرتی‌های value، lat، lng و address برای خوندن وضعیت در دسترسه. هر بار که موقعیتی نهایی میشه — از جست‌وجو، کلیک روی نقشه، درگ مارکر یا موقعیت‌یاب مرورگر — کامپوننت رویداد location-change رو منتشر می‌کنه:
field.addEventListener('location-change', e => {
const { lat, lng, address, w3w } = e.detail
})نویسنده روی دسترس‌پذیری هم حساب باز کرده: الگوی ARIA combobox، پیمایش کامل با کیبورد (ArrowDown/ArrowUp بین پیشنهادها، Enter برای انتخاب و Escape برای بستن) و اعلام مختصات و خطاهای موقعیت‌یابی با aria-live. استایل‌دهی عمداً مینیمال نگه داشته شده و فقط دو متغیر CSS به‌اسم --lf-map-height و --lf-w3w-color در اختیارت می‌ذاره. پروژه build step نداره و با لایسنس MIT منتشر شده.
نکات کلیدی:
- وب‌کامپوننت مستقل برای انتخاب موقعیت، بدون وابستگی به فریمورک
- جست‌وجوی آدرس با Nominatim یا Google Maps، به‌علاوه نقشه‌ی تعاملی اختیاری
- پشتیبانی از موقعیت‌یاب مرورگر و آدرس‌های سه‌کلمه‌ای What3Words
- حالت readonly برای نمایش یه نقطه‌ی پین‌شده بدون رابط جست‌وجو
- رویداد location-change برای گرفتن مختصات و آدرس
- الگوی ARIA combobox، پیمایش کیبوردی و لایسنس MIT
