Harita üzerine bilgi yazdırma

dnomak / svg-turkiye-haritasi

SVG Türkiye Haritası

MIT License

526 stars 157 forks source link

Harita üzerine bilgi yazdırma #29

Open hasansavun opened 3 years ago

hasansavun commented 3 years ago

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.

SarperMUTLUBAY commented 3 years ago

@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.

hasansavun commented 3 years ago

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

SarperMUTLUBAY commented 3 years ago

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 :)

abdullahoguk commented 2 years ago

İ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));

hasansavun commented 2 years ago

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