Kuika’nın Location Picker elementi, kullanıcıların harita üzerinde konum seçmelerini sağlar. Yakınlaştırma, uzaklaştırma ve sürükleme özellikleriyle kullanıcılar haritada tam olarak istedikleri noktayı belirleyebilir. Teslimat adresi, randevu yeri veya etkinlik konumu gibi senaryolarda kullanılır.
Location Picker elementi hem web hem de mobil uygulamalarda kullanılabilir.
Kullanım Alanları
Teslimat adresi veya konum belirleme
Harita tabanlı arama ve filtreleme
Randevu veya etkinlik yeri seçimi
Navigasyon ve rota başlangıç noktası ayarlama
Kullanım Senaryosu – Harita Üzerinden Konum Seçimi
Bir seyahat planlama uygulamasında, kullanıcılar gidecekleri yeri harita üzerinde seçmek için Location Picker elementini kullanır.
Senaryoda:
Ekranda bir harita görünür.
Kullanıcı “Search on the map” alanına tıklayarak konum arayabilir.
Harita varsayılan olarak belirli bir koordinatta (örneğin Paris) başlatılır.
Kullanıcı dilerse harita üzerinde farklı bir noktaya dokunarak konumu değiştirebilir.
Konum seçildiğinde enlem (Latitude) ve boylam (Longitude) bilgileri otomatik olarak güncellenir.
UI Design Modülü İşlemleri
UI Design modülüne gidin.
Elements > Select Input kategorisinden Location Picker elementini sürükleyip bırakın.
Properties panelinden aşağıdaki ayarları yapın:
Latitude: 48.8566 (örnek Paris enlemi)
Longitude: 2.3522 (örnek Paris boylamı)
Placeholder: “Search on the map”
Zoom: Harita yakınlık seviyesi (ör. 14)
Elements > Button ekleyin.
Label: “Go to London”
Action:
OnClick → UI Control → Set Value Of → Location Picker
Latitude: 51.5072
Longitude: -0.1275
Özelliklerin Senaryo Bağlamında Kullanılması
Latitude: Harita başlangıç enlem değerini belirler.
Longitude: Harita başlangıç boylam değerini belirler.
Placeholder: Kullanıcının arama yapabileceği metin alanı için açıklama yazısıdır.
Zoom: Haritanın yakınlaştırma seviyesini kontrol eder.
OnClick Action: Farklı bir buton veya işlemle harita konumu dinamik olarak değiştirilebilir.
Senaryo Tamamlandığında
Kullanıcı ekrandaki haritayı görür.
“Search on the map” alanına tıklayıp adres arayabilir veya haritada manuel seçim yapabilir.
Seçilen konumun Latitude ve Longitude değerleri dinamik olarak güncellenir.
“Go to London” butonuna tıklandığında harita otomatik olarak Londra koordinatına kayar.
Kısıtlamalar
Location Picker öğesi hem web hem mobilde kullanılabilir, ancak konum izni (GPS) gerektirir.
Kullanıcı konum iznini reddederse harita varsayılan koordinatta başlatılır (0,0).
Dinamik aksiyonlar için Set Value Of işlemi doğru bağlanmalıdır.
İpuçları ve Best Practices
Harita başlangıç noktasını kullanıcı konumuna göre dinamikleştirin.
Placeholder metnini açık tutun (“Search or select location”).
Koordinat değişimlerini loglayarak kullanıcı seçim geçmişi oluşturabilirsiniz.
Mobil cihazlarda harita etkileşimlerinde zoom ve scroll davranışlarını optimize edin.
