Kuika’nın Maps elementi, uygulamanıza konum tabanlı etkileşimler eklemenizi sağlar. Kullanıcılar, harita üzerinde yer işaretlerini görebilir, yakınlaştırma/uzaklaştırma yapabilir ve belirli konumları seçebilir. Maps, mağaza konumları, araç paylaşım sistemleri veya teslimat takip uygulamaları gibi pek çok senaryoda kullanılabilir.

Hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Araç kiralama veya paylaşım uygulamaları
• Teslimat / lojistik konum takibi
• Şube veya mağaza konumlarının listelenmesi
• Rota planlama veya alan sınırlandırma
• Kullanıcıların mevcut konumuna göre hizmet sunma

Kullanım Senaryosu – Araç Kiralama Uygulaması

Bir araç kiralama uygulamasında kullanıcı, bulunduğu konuma en yakın araçları Maps elementi üzerinden görüntüler. Her araç, harita üzerinde bir pin (işaretçi) ile gösterilir. Kullanıcı bir pin’e tıkladığında aracın bilgileri (marka, model, fiyat, yakıt tipi, uzaklık) alt kısımda kart olarak görüntülenir. Kullanıcı, dilerse bu aracı hemen kiralayabilir.

Senaryoda:

1. Harita, kullanıcının mevcut konumuna odaklanır.
2. Uygulama açıldığında tüm araçlar veri kaynağından dinamik olarak haritaya yüklenir.
3. Kullanıcı bir konum pin’ine dokunduğunda ilgili araç bilgisi detay panelinde gösterilir.
4. Kullanıcı “Start Rent” butonuna bastığında kiralama işlemi başlatılır.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “VehicleLocation” ismini verin. 
• Aşağıdaki tabloyu oluşturun. 

• Ardından Actions > SQL Actions sekmesinde aşağıdaki aksiyonları oluşturun. 

GetVehicleLocationsAll: Tüm araçları haritada göstermek için kullanılır.

SELECT * FROM VehicleLocation;

GetVehicleById: Seçilen pin’e tıklandığında aracın detaylarını getirir.

SELECT * FROM VehicleLocation WHERE Id = @vehicleId;

UpdateVehicleStatus: Kiralamaya başlandığında aracın durumunu günceller.

UPDATE VehicleLocationSET IsAvailable = 0WHERE Id = @vehicleId;

‍

Özelliklerin Senaryo Bağlamında Kullanılması

Datasource:

• GetVehicleLocationsAll SQL aksiyonuna bağlanır.
• Bu sayede araç konumları dinamik olarak haritada gösterilir.

Latitude:

• Kullanıcının bulunduğu konuma göre atanır.
  
  • Örnek: CurrentUser.location.latitude

Longitude:

• Kullanıcının bulunduğu konuma göre atanır.
  
  • Örnek: CurrentUser.location.longitude

Circle Radius In Km:

• Kullanıcının çevresinde belirli bir kilometre yarıçapı içindeki araçları vurgular (örnek: 5 km).

Map Type:

• Hybrid seçilerek hem yol hem de bina detaylarıyla zengin bir görünüm sağlanır.

Selected Location Icon:

• Seçilen aracın bulunduğu konumu özel bir pin simgesiyle işaretler.

Events

• On Location Click: Kullanıcı bir pin’e dokunduğunda GetVehicleById aksiyonu çalışır. Araç bilgisi detay kartında (örneğin, alt panelde) görüntülenir.
• On Map Load: Harita açıldığında GetVehicleLocationsAll aksiyonu tetiklenir ve tüm araçlar yüklenir.
• On Zoom Change: Kullanıcı yakınlaştırma veya uzaklaştırma yaptığında harita yeniden merkezlenir ve görünüm güncellenir.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol panelden Elements > Special > Maps elementini seçin.
3. Ekrana sürükleyip bırakın.
4. Properties panelinde şu ayarları yapılandırın:

• Datasource: GetVehicleLocationsAll
• Latitude: CurrentUser.location.latitude
• Longitude: CurrentUser.location.longitude
• Circle Radius In Km: 5
• Map Type: Hybrid
• Current Location Icon: Aktif
• Group Picker Icon: Aktif
• Selected Location Icon: Özel araç pin ikonu
• Keep Center On Zoom: Aktif

Senaryo Akışı

1. Kullanıcı uygulamayı açar, harita yüklenir.
2. Harita, kullanıcının mevcut konumunu merkez alır.
3. Tüm araç konumları GetVehicleLocationsAll aksiyonuyla haritaya yüklenir.
4. Kullanıcı kırmızı pin işaretlerinden birine tıklar.
5. On Location Click olayı tetiklenir → GetVehicleById aksiyonu çalışır.
6. Seçilen araç kartı ekranda görüntülenir:
   
   • Peugeot 208
     
     1. Automatic
     2. Petrol
     3. 2.1 km uzaklıkta
     4. 120 ₺/saat
     5. [Start Rent] butonu
7. Kullanıcı “Start Rent” butonuna tıkladığında UpdateVehicleStatus aksiyonu çalışır ve araç kiralanmış olarak işaretlenir.

Kısıtlamalar

• Maps elementi yalnızca tek bir veri kaynağıyla çalışır.
• Gerçek zamanlı konum takibi için periyodik Refresh Action tanımlanmalıdır.
• Latitude ve Longitude değerleri boş (Null) olsa bile harita yüklenir, ancak merkez koordinatı gösterilmez.

İpuçları ve Best Practices

• Kullanıcının konumuna göre en yakın aracı bulmak için ORDER BY Distance ASC sorgusu kullanılabilir.
• Circle Radius ile “yakın araçlar” bölgesi tanımlanarak arayüz sadeleştirilebilir.
• Harita tipi kullanıcı tercihlerine göre değiştirilebilir (Satellite, Hybrid, Terrain).
• On Location Click olayı ile araç detay sayfasına yönlendirme yapılabilir.
• Kullanıcı konumu değiştiğinde haritanın otomatik merkezlenmesi için Auto Center aktif edilmelidir.

Senaryo Tamamlandığında

• Kullanıcı konumuna en yakın araçları haritada görür.
• Araç pin’ine dokunarak detay bilgilerine ulaşır.
• Araç kiralama işlemini başlatabilir.
• Harita dinamik olarak veri kaynağından güncellenir ve kullanıcı deneyimi kesintisiz hale gelir.