Location Search elementi, kullanıcıların uygulama içerisinde adres veya yer ismi yazarak konum araması yapmasını ve bu konumu seçmesini sağlayan metin tabanlı bir konum arama elementidir. Kullanıcı yazdıkça eşleşen konumlar listelenir ve istenen konum kolayca seçilebilir.
Location Search elementi; harita etkileşimi gerektirmeden konum bulmayı mümkün kılar. Özellikle adres, şehir, semt veya mekan ismiyle arama yapılması gereken senaryolarda hızlı ve kullanıcı dostu bir çözüm sunar.
Location Picker ile birlikte veya bağımsız olarak kullanılabilir; bu sayede hem arama hem de harita tabanlı seçim senaryoları desteklenir.
Location Search elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Adres veya yer ismi ile konum arama
Teslimat adresi veya servis bölgesi seçimi
Harita öncesi hızlı konum bulma
Şehir, ilçe veya mekan bazlı filtreleme
Kullanıcı profilinde adres tanımlama
2. Temel Özellikler
Metin tabanlı konum arama: Kullanıcılar adres, şehir, semt veya mekan ismi yazarak konum araması yapabilir.
Dinamik öneri listesi: Girilen metne göre eşleşen konumlar otomatik olarak listelenir.
Hızlı ve kullanıcı dostu seçim: Kullanıcılar arama sonuçları arasından tek tıklamayla konum seçebilir.
Konum doğruluğunu artıran yapı: Önceden tanımlı ve doğrulanmış yer isimleri sayesinde hatalı adres girişleri azalır.
Location Picker ile birlikte kullanılabilme: Arama sonrası seçilen konum, harita üzerinde gösterilerek detaylı düzenleme yapılabilir.
2.1. Location Search Elementi Özellikleri (Properties)
Value: Statik bir değer ekleyebilir veya Symbol Picker kullanarak başka bir elementin içeriğini ya da aksiyon sonucunu dinamik olarak gösterebilirsiniz.
Placeholder: Kullanıcının veri girmediğinde görünen yer tutucu metindir.
Allow Clear: Sağ kenarda bir Sil (X) simgesi ekleyerek girilen verinin tek tıklamayla silinmesini sağlar.
2.2. Elemente Eklenebilen Aksiyonlar
Location Search elementi, kullanıcıların arama sonuçlarından bir konumu seçmesine bağlı olarak olay (event) bazlı aksiyonlar tetiklenmesini destekler. Aksiyonlar, elementin kendisine değil; kullanıcı bir yer seçtiğinde tetiklenen event’e bağlanır.
Location Search elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Desteklenen Aksiyon Tetikleyicisi
onSelectPlace: Kullanıcı arama sonuçları listesinden bir konum (place) seçtiğinde tetiklenir.
Kullanım amaçları:
Seçilen konumu (adres / place bilgisi / koordinat) state veya değişkene kaydetmek
Seçime bağlı form alanlarını otomatik doldurmak (ör. adres, il/ilçe, posta kodu vb.)
Location Picker veya harita bileşenini seçilen konuma göre güncellemek
Konuma bağlı filtreleme veya listeleme işlemlerini tetiklemek
API veya workflow tetikleyerek adres bilgisini kaydetmek / doğrulamak
Örnek senaryo: Kullanıcı teslimat adresi aramasında “Karşıyaka, İzmir” seçtiğinde, seçilen yer bilgisi state’e kaydedilir ve adres alanları otomatik olarak doldurulur.
Aksiyonlara İlişkin Temel Kurallar
Location Search elementi aksiyonları event bazlı çalıştırır; onSelectPlace yalnızca kullanıcı bir yer seçtiğinde tetiklenir.
Aynı onSelectPlace event’i için birden fazla aksiyon tanımlanabilir.
Seçim sonrası API çağrıları veya doğrulama işlemleri kullanılıyorsa performans etkisi dikkate alınmalıdır.
Location Search elementi, özellikle adres seçimi, teslimat konumu belirleme ve konuma bağlı süreç başlatma senaryolarında aksiyonlarla birlikte kullanıldığında hızlı ve kullanıcı dostu bir deneyim sunar.
3. Location Search Elementi Nasıl Kullanılır?
Bu bölümde Location Search elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Senaryo: Konum Arama ve Harita Üzerinde Gösterme
Kullanıcı, belirli bir adresi veya konumu hızlı bir şekilde bulmak için Location Search elementini kullanır. Bu element sayesinde kullanıcı aramak istediği konumu metin olarak yazabilir ve sistem, girilen ifadeye uygun konum önerilerini liste halinde gösterir.
Senaryoda:
Ekranın üst bölümünde bir Location Search elementi bulunur. Kullanıcı arama alanına bir adres, şehir veya belirli bir lokasyon adı yazdığında sistem uygun konum önerilerini listeler. Kullanıcı listeden bir konum seçtiğinde, seçilen lokasyona ait adres bilgisi ekranda görüntülenir.
Ayrıca seçilen konumun harita üzerinde gösterilebilmesi için sayfada ek olarak bir Location Picker elementi yer alır. Location Search üzerinden seçilen adres bilgisi, Location Picker ile harita üzerinde ilgili noktaya yönlendirilir ve konum işaretleyici ile gösterilir. Location Picker kullanımı zorunlu değildir. İlgili lokasyon araması sonucunu haritada göstermek amacıyla kullanılmıştır.
Bu yapı sayesinde kullanıcılar hem metin tabanlı konum araması yapabilir hem de seçilen konumu harita üzerinde görsel olarak inceleyebilir. Böylece adres arama ve konum doğrulama işlemleri daha hızlı ve kullanıcı dostu bir şekilde gerçekleştirilebilir.
Adım 1 - Location Search Elementini Ekleme ve Metin Çevirilerini Tanımlama
Başlangıçta anasayfada:
Sayfaya Elements > Select Input > LocationSearch elementini sürükleyip bırakın.
Arama yapılan lokasyonu haritada görüntülemek için Elements > Select Input > LocationPicker elementini ekleyin.
Arama sonucunda seçilen lokasyonun haritada işaretlenmesi için LocationSearch > Properties > onSelectPlace > UIControl > Set Value Of aksiyonunu ekleyin.
Set Value Of aksiyonu içerisinde Component to Change > LocationPicker1, Prop name to set > latitude ve value > Components > LocationSearch > Latitude > To Decimal tanımlamalarını yapın.
Set Value Of aksiyonu içerisinde Component to Change > LocationPicker1, Prop name to set > longitude ve value > Components > LocationSearch > Longitude > To Decimal tanımlamalarını yapın.
Preview:
Sayfa açıldığında Location Search alanı boş durumda görüntülenir ve altında yer alan harita alanı varsayılan konuma göre başlatılır. Kullanıcı bu aşamada arama alanına bir adres, yer adı veya konum bilgisi yazabilir. Yazılan ifadeye göre sistem uygun konum önerilerini liste halinde gösterir.
Kullanıcı arama alanına bir konum yazdığında sistem ilgili lokasyonlara ait adres önerilerini listeler. Kullanıcı listeden bir konumu seçtiğinde, seçilen konuma ait adres bilgisi Location Search alanında görüntülenir ve arama işlemi tamamlanmış olur.
Konum seçimi yapıldıktan sonra seçilen adres bilgisine karşılık gelen lokasyon Location Picker elementi üzerindeki haritada işaretlenir. Harita otomatik olarak ilgili konuma odaklanır ve konum işaretleyici sayesinde kullanıcı seçilen lokasyonu harita üzerinde görsel olarak inceleyebilir.
4. Ortak Özellikler (Properties)
Location Search elementi üzerinde yer alan bazı alanlar tüm UI elementlerinde ortak olarak kullanılır. Bu nedenle, aşağıdaki özelliklerin detaylı açıklamaları ilgili genel kılavuz sayfalarında yer almaktadır:
Arama alanını yönlendirici placeholder ile destekleyin. Adres veya yer adı girin gibi ifadeler, kullanıcının ne yapması gerektiğini netleştirir.
onSelectPlace event’ini ana tetikleyici olarak kullanın. Konum seçimiyle ilgili aksiyonların bu event üzerinden çalıştırılması, daha kontrollü bir akış sağlar.
Location Picker ile birlikte kullanımı değerlendirin. Arama sonrası harita üzerinden konumun doğrulanması veya hassas ayar yapılması kullanıcı deneyimini iyileştirir.
Adres alanlarını otomatik doldurun. Seçilen konuma bağlı adres bileşenlerinin (il, ilçe, posta kodu vb.) otomatik güncellenmesi hata payını azaltır.
6. Kısıtlamalar
Location Search elementi harita ve adres servislerine bağımlıdır; servis erişimi olmayan durumlarda çalışmayabilir.
Aksiyonlar yalnızca onSelectPlace event’i üzerinden tetiklenebilir.
Manuel, serbest adres girişi için tek başına yeterli değildir; ek input alanları gerekebilir.
