Maps
Maps elementinin özelliklerini öğrenin.
Web ve Mobil uygulamalarda haritanın gösterilmesi ve kullanılmasını sağlayabilirsiniz. Geliştirdiğiniz Web ve Andorid uygulamalarda Google Map, iOS uygulamalarda ise Apple Map üzerinde gösterim yapılır. Maps elementini uygulamanıza ekledikten sonra Google Maps API bağlantısını Configuration Manager aracılığıyla ayarlamalısınız.
Bu eğitim içeriğinde;
Maps elementini ekleme
Maps elementinde Properties
Maps Elementinde Styling
1. Maps Elementi Ekleme
Elements panelinden Maps elementini ekrana sürükle bırak ile ekleyin. Eğer ekranda boş bir alana sürüklerseniz Row elementi ile eklenir. Bir Column içine sürüklerseniz sadece Maps elementi eklemiş olursunuz.
Maps elementi, MapsMarker ve Maps MarkerPopUp bölümlerinden oluşur. İki yapı da Container olarak düşünülebilir. Eklemek istediğiniz elementi seçip MapsMarker veya MapsMarkerPopUp ‘ın içine sürükleyip bırakabilirsiniz. Özellikle Lokasyon pop-up da kompleks içerikler hazırlanabilir. Elemente role bağlı yetkilendirmeler verebileceğiniz gibi görünürlüğünü de göster/gizle/koşullu seçenekleriyle ayarlayabilirsiniz.
2. Maps Elementinde Properties(Özellikler) Paneli
Maps elementinin özelliklerini görüntülemek için çalışma alanına eklediğiniz Maps elementini seçin.
Sağ kenarda Properties panel ile;
Datasource
Show Circle Center
AutoCenter
Latitude
Longitude
Marker Detail Width
Circle Radius In Km
Group Picker Icon
Group Picker Color
Selected Location Icon
Current Location Icon
Keep Center On Zoom
Authorization
Visibility
Actions
Başlıklarından ihtiyacınız olan düzenlemeleri yapabilirisniz.
Haritayı çalışma alanına yerleştidikten sonra Maps elementine Datasource oluşturmak gerekmektedir.
Datasource
Harita içinde gösterilecek lokasyonların veri tablosunu seçmenizi sağlar.
Görünüm modlarından Datasource’u açın. Sol panel üst kenarında bulunan Add butonu (+) Rest API’yi seçin ve bir isim vererek oluşturun. Ardından kullanmak istediğiniz Service Base URL’sini girin. Son olarak API Hizmetinin nasıl sonlandırılmasını istiyorsanız o şekilde değerler girin. Harita üzerinde pinlerin görüntülenebilmesi için API Endpoint kısmına /pins ve getPins şeklinde ifadeleri girin.
Get, API Hizmetinde veri listelemek ve görüntülemek için kullanılır.
Datasource bağlantısı yapıldıktan sonra Backend/API için actions eklenmelidir. Properties panelinde Add Actions ile açılan listeden Custom > GoogleMaps > GetPinsFromGoogleMaps özel aksiyonunu seçin.
Aksiyonları ekledikten sonra Properties (özellikler) > Datasource’da son bir ayarlama ile aşağıdaki gibi ufak bir ayarlama yapılmalı.
Show Circle Center
Belirlenen Radius değerinin merkezini göstermeye yarar. Radius belirtilmediyse bu özellik kullanılamaz.
Auto Center
Haritada sabit olarak gösterilmek istenildiği lokasyonu belirlersiniz. Haritada nereye giderseniz gidin, haritada ne kadar yakınlaştırma ya da uzaklaştırma işlemleri yaparsanız yapın. Auto Center’e tıklandığında açılacak konumu bu parametre ile ayarlayabilirsiniz.
Latitude (Enlem)
Harita açılışındaki merkez enlem değerinin verildiği alandır. Statik olabileceği gibi Symbol Picker ile bir elementin değeri ve aksiyonun sonucu gibi dinamik değerlerde alabilir.
Longitude (Boylam)
Harita açılışındaki merkez boylam değerinin verildiği alandır. Statik olabileceği gibi Symbol Picker ile elementin değeri ve aksiyonun sonucu gibi dinamik değerlerde alabilir.
latitude (enlem) ve longitude (boylam) girerek kullanıcı haritanın ilk açılışta hangi koordinatı merkezleyerek açacağını belirtir.
Google Mapste Lantitude (Enlem) Longitude(Boylam) Değerlerini Alma
Öncelikle tarayıcınızdan google maps’e girin. Haritadan istediğiniz yeri veya alanı seçip sağ tıklayın. Açılır pencere açacaktır. Latitude (enlem) ve longitude (boylam) en üstte ondalık biçimde bulabilirsiniz. Koordinatları otomatik olarak kopyalamak için latitude (enlem) ve longitude (boylam) sol tıklayın. Değerler kopyalanmış olacaktır.
URL’den alınan latitude (enlem) ve longitude (boylamı) kullanılması pek önerilmemektedir. Değerler hatalı olabilmektedir.
Marker Detail Width
Marker Detail’in genişlik değerini ayarlayabilirisniz.
Marker Detail View
MarkerDetail’in çalışma alanında nasıl görüntüleneceğini belirlediğiniz alandır. PopUp, Drawer, SidePanel görüntülenme seçeneklerini birini seçebilirsiniz.
Circle Radius In Km:
Verisi görüntülenecek alanı dairesel çap değerinin girildiği bölümdür. Kilometre ölçü birimi ile arama alanının çapını belirtebilirsiniz.
Haritada verilen çap boyutunda bir çember oluşturulur.
Group Picker Icon:
Geliştirdiğiniz uygulama içerisinde zoom yapıldığında ikonların teker teker görüntülendiği, zoomout yapıldığında ise gruplanarak tek bir pin ikonuna dönüştüğü ikonu özelleştirebilirsiniz.
Current Location:
Kullanıcının o an bulunduğu lokasyonu belirtir. Bunun için cihaz üzerinde uygulama kullanıcısının konum verisine izin vermiş olması gerekmektedir.
Keep Center On Zoom
Kullanıcı, Map içinde scroll yaptıkça merkez değiştirir. Bu merkezi otomatik olarak seçilmiş gibi yapıp tekrar event çağırılması sağlanır.
Authorization (Yetkilendirme)
Maps elementi için yetkilendirme seçeneklerini kullanabilirsiniz. Maps elementi için Anonymous Access(Anonim Erişim), All Roles Access (Tüm Rollere Erişim), Hide (Gizlemek), Disable (Devre dışı bırakmak) gibi yetkilendirme seçeneklerini kullanabilirsiniz.
Visibility (Görünürlük)
Elemente role bağlı yetkilendirmeler verebileceğiniz gibi visibility'i (görünürlüğünü) de always visible (göster) / hidden (gizle) / sometimes visible (koşullu görünürlük) seçenekleriyle ayarlayabilirsiniz.
Maps elementine ekleyebileceğiniz fonksiyonları Add Actions ile ekleyebilirsiniz.
3. Maps Elementinde Styling
Maps elementine layout (düzen),text (metin), fill (dolgu), border (kenarlık) veya shadow (gölge) ekleyerek ek düzenlemeler yapabilirsiniz.
Çevresel iç boşluklar ve boyutlandırma gibi görsel düzenlemeleri yapabilirsiniz.
Maps'in dış kenarlarına çizgi ekleyebilir, radius (köşe eğimleri) verebilirsiniz.
Border'ın dış kenarlarına çizgi ekleyebilir, radius (köşe eğimleri) verebilirsiniz.
Web uygulamalarınız için Maps elementine gölge efekti ekleyebilirsiniz.
Last updated
