Location Picker elementi, kullanıcıların harita üzerinden konum seçmesini sağlayan etkileşimli bir input elementidir. Harita üzerinde gezinme, yakınlaştırma (zoom in) ve uzaklaştırma (zoom out) gibi temel harita etkileşimlerini destekleyerek kullanıcıların doğru konumu kolayca belirlemesine yardımcı olur.
Location Picker elementi; adres seçimi, teslimat noktası belirleme, etkinlik konumu işaretleme ve coğrafi veri gerektiren tüm senaryolarda kullanılır. Görsel ve sezgisel yapısı sayesinde manuel adres girişi ihtiyacını azaltır ve konum doğruluğunu artırır.
Location Picker elementi hem web hem de mobil uygulamalarda desteklenmektedir.
1.1. Sık Kullanım Senaryoları
Teslimat ve adres seçimi ekranları
Harita üzerinden konum işaretleme
Etkinlik, mağaza veya ofis lokasyonu belirleme
Konuma dayalı filtreleme ve arama senaryoları
Kullanıcı profilinde adres veya konum tanımlama
2. Temel Özellikler
Yakınlaştırma ve uzaklaştırma desteği: Harita üzerinde zoom in / zoom out işlemleri yapılarak konum hassasiyeti artırılabilir.
Anlık konum güncellemesi: Kullanıcı konumu değiştirdikçe seçilen koordinatlar eş zamanlı olarak güncellenir.
2.1. Location Picker Elementi Özellikleri
Latitude: Enlem bilgisini manuel olarak veya veritabanından girmenizi sağlar.
Longitude: Boylam bilgisini manuel olarak veya veritabanından girmenizi sağlar.
Latitude ve Longitude değerleri girilmediğinde, harita varsayılan olarak (0,0) konumunda başlatılır. Kullanıcıdan konum izni istenir ve izin verilirse mevcut konum seçilir.
2.2. Elemente Eklenebilen Aksiyonlar
Location Picker elementi, kullanıcıların harita üzerinde konum seçmesine bağlı olarak olay (event) bazlı aksiyonlar tetiklenmesini destekler. Aksiyonlar, elementin kendisine değil; kullanıcı harita üzerinde bir noktaya tıkladığında tetiklenen event’e bağlanır.
Location Picker elementi için aksiyonlar, Properties > Add Action alanı üzerinden aşağıdaki event aracılığıyla tanımlanabilir.
Desteklenen Aksiyon Tetikleyicisi
onClick: Kullanıcı harita üzerinde bir noktaya tıkladığında tetiklenir.
Kullanım amaçları:
Seçilen konumu (koordinat/adres) state veya değişkene kaydetmek
Konum seçiminden sonra bağlı alanları otomatik doldurmak (ör. il/ilçe, adres detayı, posta kodu vb.)
Seçilen konuma göre harita işaretçisini (marker) güncellemek
Konuma bağlı filtreleme veya listeleme işlemlerini tetiklemek
API veya workflow tetikleyerek konum bilgisini kaydetmek / doğrulamak
Örnek senaryo: Kullanıcı harita üzerinde teslimat adresini seçtiğinde, seçilen konum state’e kaydedilir ve adres bilgileri form alanlarına otomatik olarak yansıtılır.
Aksiyonlara İlişkin Temel Kurallar
Location Picker elementi aksiyonları event bazlı çalıştırır; onClick yalnızca harita üzerindeki tıklama gerçekleştiğinde tetiklenir.
Aynı onClick event’i için birden fazla aksiyon tanımlanabilir.
Konum seçimi sonrası doğrulama veya kayıt işlemlerinde performans için API çağrıları dikkatli planlanmalıdır.
Location Picker elementi, özellikle adres seçimi ve konuma bağlı süreçlerin başlatılması gereken senaryolarda aksiyonlarla birlikte kullanıldığında güçlü ve kullanıcı dostu bir deneyim sunar.
3. Location Picker Elementi Nasıl Kullanılır?
Bu bölümde Location Picker elementinin uçtan uca kullanımını örnek senaryo üzerinden ele alacağız.
Senaryo: Harita Üzerinden Konum Seçimi ve Koordinat Gösterimi
Kullanıcı, harita üzerinde bir konum seçerek o noktaya ait enlem (Latitude) ve boylam (Longitude) bilgilerini görüntülemek için Location Picker elementini kullanır. Kullanıcı harita üzerinde istediği noktayı seçtiğinde, seçilen konuma ait koordinat bilgileri otomatik olarak alınır ve ekranda gösterilir.
Senaryoda:
Ekranda bir Location Picker elementi bulunur ve kullanıcıya harita üzerinden konum seçme imkanı sunar. Kullanıcı harita üzerinde herhangi bir noktaya tıkladığında veya konum işaretleyicisini farklı bir noktaya taşıdığında, seçilen konuma ait koordinat bilgileri otomatik olarak güncellenir.
Seçilen konumun Latitude (Lat) ve Longitude (Lon) değerleri haritanın altında yer alan alanlarda anlık olarak görüntülenir. Kullanıcı harita üzerinde farklı bir nokta seçtiğinde ise koordinat bilgileri yeniden güncellenir.
Bu senaryo sayesinde kullanıcıların harita üzerinden seçtikleri konuma ait enlem ve boylam bilgilerini dinamik olarak nasıl elde edebilecekleri ve ekranda nasıl gösterebilecekleri basit ve anlaşılır bir şekilde gösterilmiş olur.
Adım 1 - Location Picker Elementini Ekleme ve Metin Çevirilerini Tanımlama
Başlangıçta anasayfada:
Sayfaya Elements > Select Input > LocationPicker elementini sürükleyip bırakın.
Ekran açılışında başlangıç koordinatlarını LocationPicker > Properties > Latitude > “37,75594515922721” ve LocationPicker > Properties > Longitude > “-122,69700643032144” olarak ayarlayın.
Dinamik veya statik olarak sabit değer olarak ayarlayabilirsiniz. Mevcut senaryoda sabit bir konum ayarlanmıştır.
Location Picker elementinin altına, Latitude bilgisini göstermek için Elements > Display > Label elementini sürükleyip bırakın.
Yazıyı Label1 > Properties > Value > “Lat:” olarak ayarlayın.
Label elementinin yanına, çevrilecek metni görüntülemek için Elements > Display > Label elementini sürükleyip bırakın.
Benzer şekilde Longitude içinde iki label ekleyin ve başlangıçtaki yazı içeriğini Label3 > Properties > Value > “Lon:” olarak tanımlayın.
Location Picker elementinde konum seçildiğinde Latitude bilgisinin gösterilmesi için LocationPicker > Properties > Add Action > onClick > UIControl > Set Value Of aksiyonunu ekleyin.
Set Value Of aksiyonu içerisinde Component to Change > Label2 ve value > Components > LocationPicker > Latitude > To String tanımlamalarını yapın.
Benzer şekilde Location Picker elementinde konum seçildiğinde Longitude bilgisinin gösterilmesi için LocationPicker > Properties > Add Action > onClick > UIControl > Set Value Of aksiyonunu ekleyin.
Set Value Of aksiyonu içerisinde Component to Change > Label4 ve value > Components > LocationPicker > Longitude > To String tanımlamalarını yapın.
Preview:
Bu örnekte Location Picker elementi kullanılarak harita üzerinde konum seçimi yapılması ve seçilen konuma ait enlem (Latitude) ile boylam (Longitude) bilgilerinin görüntülenmesi gösterilmektedir.
Harita ilk açıldığında, elemente başlangıç için verilen Lat ve Lon değerlerine göre belirlenen konum merkezde olacak şekilde görüntülenir. Kullanıcı harita üzerinde gezinebilir ve istediği noktaya tıklayarak yeni bir konum seçebilir.
Kullanıcı harita üzerinde bir noktayı seçtiğinde, seçilen konuma ait Latitude ve Longitude değerleri otomatik olarak güncellenir ve haritanın altında görüntülenir. Böylece kullanıcı harita üzerinde seçtiği konumun koordinat bilgilerini anlık olarak görebilir.
4. Ortak Özellikler (Properties)
Location Picker 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:
Harita başlangıç konumunu anlamlı belirleyin. Varsayılan harita konumu, kullanıcıların büyük çoğunluğunun bulunduğu bölgeye yakın olmalıdır.
Konum seçimini görsel olarak netleştirin. Seçilen noktanın marker ile açıkça gösterilmesi, kullanıcıların doğru konumu seçtiğinden emin olmasını sağlar.
Adres detaylarını otomatik doldurun. Konum seçimi sonrası il, ilçe veya adres alanlarının otomatik güncellenmesi kullanıcı deneyimini iyileştirir.
6. Kısıtlamalar
Location Picker elementi harita servislerine bağımlıdır; harita erişimi olmayan durumlarda çalışmayabilir.
Aksiyonlar yalnızca onClick Event’i üzerinden tetiklenebilir.
Harita görünümü ve etkileşimleri, kullanılan harita servisinin sunduğu imkanlarla sınırlıdır.
