dnomak/svg-turkiye-haritasi

Harita üzerine bilgi yazdırma

hasansavun opened this issue · 5 comments

Merhaba,

Öncelikle böyle bir harita hazırlayıp sunduğunuz için teşekkürler.
Harita datalarını kendi db me ekledim ve çalışıtırıyorum.
harita üzerine her ilin içine bilgi yazırmak istiyorum.
o il ile ilgili bir bilgi yazdırmak isityorum.
biraz uğraştım ama yapamadım.
nasıl yapacağım konusunda yardımcı olur musunuz.

teşekkürler.

@hasansavun merhabalar,
En kısa yöntemi data-iladi içerisine yazmak olacaktır. Daha farklı bir şeyler isterseniz o zaman kendinizin müdahale etmesi gerekir.

merhaba,
verdiğiniz bilgi için teşekkürler.
iladı içindeki veri mouseover ile yazıyor.
benim istediğim mouse ile gezmeden tüm illerde görünmesi
örnek olarak resim yükledim.

teşekkürler.

resim

onun için svg path'lerine müdahele etmeniz gerekecek ancak üzerine gelince ayrı açılması küçük illerde oluşacak görsel sorunları gidermesi açısından daha düzenli olacaktır. Ekran görüntüsündeki örnekte batman iline herhangi bir şey yazmanız pek olası olmayacaktır. Kaldı ki kullansanız dahi şehir sınırlarında çizecektir. Farklı yöntem varsa onu da ben bilmiyorum ne yazık ki :)

image

İlin(<g>) ortasına text elemanı eklenebilir ama orta noktasını bulmak zor.
getBBox ile grubu kapsayan çerçevenin orta noktasını buluyorum ama görsel olarak iyi görünmüyor.
Dışarıdan müdahaleyi kolaylaştırmak için görsel orta noktalar tespit edilip data attribute olarak svgye eklenebilir.

var x = Math.round(il.getBBox().x+(il.getBBox().width/2));
var y = Math.round(il.getBBox().y+(il.getBBox().height/2));

image

Teşekkür ederim verdiğiniz bilgiler için