Prusa WiseCp Tema - Dokümantasyon - Vektör Harita Bileşeni

Vektör Harita Bileşeni Nedir?

FonPageBuilder Vektor Harita bileşeni ile web sayfalarınıza interaktif vektör harita ekleyebilirsiniz. Sunucu lokasyonlarınızı ve/veya şubelerinizi etkileyici bir şekilde göstermek için idealdir.

Vektör Harita Bileşenini sayfanıza ekledikten sonra Bileşen Düzenleme Araçlarındaki Bileşeni Düzenle ögesine tıkladığınızda açılan Bileşen Düzenleme Penceresindeki ögelerin detaylarına aşağıda erişebilirsiniz.

Genel Ayarlar

Bileşen Adı
: Sitenizdeki her bir dil için bileşeninize bir isim verin. Bu isim bileşene göre değişmekle birlikte genelde sadece Yönetici bilgilendirmesi içindir. Yönetim Paneli FonPageBuilder sayfa düzenleme ekranınızdaki satır ve sütunlarda bileşen bu isimle gösterilecektir. Böylece yerleşim düzeninizdeki bileşeni doğru ve kolayca teşhis edebilir ve seçebilirsiniz.

Bileşen Seçenekleri

Harita Tipi
: Vektör haritası olarak kullanmak istediğiniz harita tipini seçin.
Harita Yüksekliği
: Harita yüksekliğini responsive olarak her bir ekran çözünürlüğü için belirtebilirsiniz. Harita Yükseklği ile haritanın sayfanızda ne kadar alan kaplayacağını ayarlamış olursunuz.
Şeritleri Göster
: Şeritler, bir veya daha fazla işaretçiyi birbirine bağlar. Vektör harita içerisine ekleyeceğiniz işaretçi konumları arasında bağlantı şeritleri göstermek istiyorsanız bu seçeneği etkinleştirin.
Şerit Animasyonu
: Bağlantı şeritlerini animasyonlu olarak göstermek istiyorsanız bu seçeneği etkinleştirin. Bu alan, "Şirtleri Göster" seçeneği etkinleştirilmişse gösterilir.
Zoom Düğmeleri
: Vektör Harita bileşenin sol üst köşesinde kullanıcıların haritayı ölçeklendirebileceği (yakınlaştır/uzaklaştır) kontrol düğmelerinin gösterilmesini istiyorsanız, bu seçeneği etkinleştirin
İpuçlarını Göster
: Haritaya eklediğiniz işaretçilerin, bölge ve şehirlerin üzerine gelindiğinde isimlerini içeren ipucu balonunun götüntülenmesini istiyorsanız bu seçeneği etkinleştirin.

İçerik Ayarları

Vektör Harita Bileşeni İçerik Ayarları bölümündeki İşaretçiler başlığının karşısındaki Ekle düğmesine tıklayarak birden fazla İşaretçi ekleyebilirsiniz. İlk ögenin bir kopyası alınarak çoğaltılır. Eklediğiniz her bir ögenin başlığının karşısındaki simgeler aracılığıyla ögeyi; düzenleyebilir, sıralayabilir ve silebililirsiniz.

İşaretçi Düzenleme Penceresi:

Başlık
: İşaretçi Konumu için bir başlık / ad girin. Genellikle Ülke veya Şehir Adı kullanılır. Örn: Türkiye
Koordinatlar
: Eklemek istediğiniz işaretçi konumu için enlem ve boylamdan oluşan koordinat bilgisini girin. Enlem ve boylamı virgülle ayırarak tek seferde girin. Örn: 25.12445465, 27.2544655
KOORDİNATLARI NASIL ÖĞRENEBİLİRİM?

Belirli bir konumun koordinatlarını bir çok yöntemle öğrenebilirsiniz. Bunun için ücretsiz servisler olduğu gibi Google Haritalar'ı da kullanabilirsiniz.
- Google Haritalar web sitesini ziyaret edin ve eklemek istediğiniz konumu arayın Örn: "Ankara". Haritada konumun üzerine sağ tıklayın ve çıkan koordinat bilgisini kopyalayıp bu alana yapıştırın.
- GPS Coordinates web sitesini ziyaret edin ve "Address" alanında eklemek istediğiniz konumu arayın. Sonrasında "Lat,Long" alanındaki değeri kopyalayıp kopyalayıp bu alana yapıştırın.
- LatLong.net web sitesini ziyaret edin ve "Place Name" alanında eklemek istediğiniz konumu arayın. Sonrasında "Latitude" ve "Longitude" alanlarındeki değerleri virgül ile birleştirerek bu alana girin.
Şerit Çizilecek İşaretçi
: Şerit bağlantısı eklemek istediğiniz işaretçi konumunun adını girin. Bu daha önce daha önce eklediğiniz işaretçi konumlarından birisi olmalıdır ve önceki konumun "Başlık" alanında girdiğiniz değerle birebir aynı olmalıdır. Büyük küçük harfe duyarlıdır. Bu alan, "Bileşen Seçenekleri" bölümünde Şeritleri Göster seçeneği etkinleştirilmişse gösterilir.

Bileşen Stil Ayarları

Bölge / Şehir Stili
: Haritadaki Bölge ve/veya şehirlerin gösterim stilini ayarlayın.
- Arkaplan Rengi: Bölge/Şehir için arkaplan rengini seçin.
- Kenarlık Rengi: Bölge/Şehir için kenarlık rengini seçin.
- Kenarlık Genişliği: Bölge/Şehir için kenarlık genişliğini seçin.
İşaretçi Stili
: Haritaya eklediğiniz konum işaretçilerinin gösterim stilini ayarlayın.
- Arkaplan Rengi: İşaretçi için arkaplan rengini seçin.
- Kenarlık Rengi: İşaretçi için kenarlık rengini seçin.
- Kenarlık Genişliği: İşaretçi için kenarlık genişliğini seçin.
- İşaretçi Çapı: Daire olarak gösterilecek işaretçinin çağını (büyüklüğünü) ayarlayın.
- Etiket Boyutu: İşaretçi etiketi (konum adı) yazı boyutunu belirleyin.
Şerit Stili
: Haritada işaretçi konumları arasındaki bağlantı şeritlerinin gösterim stilini ayarlayın.
- Kenarlık Rengi: Şerit için kenarlık rengini seçin.
- Kenarlık Genişliği: Şerit için kenarlık genişliğini seçin.
İpucu Stili
: Bölge/Şehir ve/veya işaretçilerin üzerine gelindiğinde gösterilecek ipuçlarının gösterim stilini ayarlayın.
- Arkaplan Rengi: İpucu için arkaplan rengini seçin.
- Metin: İpucu için metin rengini seçin.
Bileşen Stili
: Vektör Harita Bileşeni için özel stilinizi ayarlayabilirsiniz.
- Sınıf: Bileşen için özel CSS sınıfı/sınıfları tanımlamak isterseniz burayı kullanabilrsiniz. Daha sonra CSS stil dosyanızdan ilgili sınıf ile ilgili biçimlendirmeleri buraya başvurarak gerçekleştirebilirsiniz. Örneğin:light-grey-rounded-box
- Dahili Stil: Bileşen için css biçimlendirmesini harici tema css dosyalarınız yerine doğrudan bu alana yazacağınız css kodu ile gerçekleştirebilirsiniz. Eklediğiniz css biçimlendirmesini sadece bu bileşen için aktif olmasını ve aynı css sınıfına sahip olan sayfadaki diğer ögeleri etkilememesini istiyorsanız stil kodunuz içerisinde @widgetId ibaresinden sonra stil kodunuzu ekleyebilirsiniz. @widgetId önyüzde, sistem tarafından otomatik oluşturulurulan id ile değiştirilir. Vektör Harita Bileşeni içerisinde biçimlendirebileceğiniz css sınıflarını, site önyüzünüzde bileşenin bulunduğu sayfadayken Tarayıcınızda F12 - Geliştirici araçlarından Code Inspection ile .fon-vector-map-widget css sınıfı altından inceleyebilirsiniz.
```
												
@widgetId .light-grey-rounded-box{
	background-color: #f8f9fa;
	border: 1px solid #e9ecef;
	border-radius: 5px;
}
												
											
```

Bileşen Penceresi Kayıt Düğmeleri

Sayfayı Kaydet
: Bileşende gerçekleştirdiğiniz değişiklikler ve sayfada gerçekleştirdiğiniz tüm değişiklikler veritabanına kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır.
Kaydet & Düzenle
: Bileşende gerçekleştirdiğiniz değişiklikler bileşen kodu içerisine kaydedilir ve aktif Bileşen Düzenleme Penceresi kapatılır. Sayfanızda yaptığınız değişikler henüz kaydedilmemiştir. Sayfanızı kaydetmek için mutlaka sayfanın sağ kenarında bulunan MENU çubuğu altından Kaydet düğmesine tıklamanız gerekir.