HTML5 Svg Türkiye Haritası
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Svg Türkiye Haritası

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(15059)
RAPOR ET
Bir projem için interaktif bir Türkiye haritası lazımdı.Biraz arayınca bir tane buldum.Plugini optimize ederek en sade ve hızlı haline getirdim.Başkalarının da işine yarar diye paylaşmak ve kullanımını anlatayım dedim.

İncele : http://ustaderslik.com/ornek/Turkiye/

İndir : http://ustaderslik.com/dosya/Turkey.rar

Kullanımına geçicek olursak, css ve js dosyalarını dahil ettikten sonra
<div id="map"></div> 

eklediğimiz yerde harita oluşur.

Boyutunu değiştirmek isterseniz,css'in transform özelliğinden scale uygulayarak boyutu ile oynamalar yapabiliriz. http://ustaderslik.com/konu/CSS3_2D_Transform_işlemleri_(Döndürm-Pozisyon-Bükme-Büyültme) buradan kullanımına bakabilirsiniz.

Renk ayarlarını ise js dosyasından turkiye.js girerek oradan değiştirmeler yapabilirsiniz.Ayrıca hover renk değişimlerini ve animasyonları da buradan ayarlayabilir veya kaldırabiliriz.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>İnteraktif Türkiye Haritası</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/jquery.qtip.min.css">

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/paths.js"></script>
<script type="text/javascript" src="js/turkiye.js?v=123"></script>
<script type="text/javascript" src="js/jquery.qtip.min.js"></script>
<script type="text/javascript">
$(function(){
$("#map svg path").hover(
function() {
var id=$(this).attr("id");
$("#sehir").text(id);
});
})
</script>
<style type="text/css">
body{background:#fff;}
#map{width:1050px;height:620px;position:relative;margin:auto;}
#map svg {position: absolute;top: -100px; left: 0px;}
svg > a {cursor: pointer;display:block;}

#sehir{font-size:30px;text-align:center;margin-top:25px;color:#666;}
</style>
</head>
<body>

<div id="sehir"></div>

<div id="map"></div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/asdsdf12dsf12s.png




seryener
seryener 2 Yıl Önce Cevaplandı
öncelikler saygılar...

bu harita benimde bir projemde kullanabilceğim güzel bir harita, ancak ben bir şey daha yapmak istiyorum, ama beceremedim. yardım ederseniz çok sevinirim...

şehirler üstüne gelince ve tıklayınca aynı sayfada aşağıda bir tablo açılmasın istiyorum ve bu tabloda veriler olacak, ifarame yada link nasıl verebilrim...

şimdiden yardımlarınız için teşekkürler...
cArleone
cArleone 2 Yıl Önce Cevaplandı
@seryener tabloya display:none vererek gizleyin.hover veya click olayıyla şu şekilde gösterebilirsin.
$("#map svg path").mouseover(function() {//üzerine geline
$("#istatislik").show(1000);
});

$("#map svg path").click(function() {//tıklayınca
$("#istatislik").show(1000);
});

tabi tabloya istatislik diye bir id ver.yada kendine göre yeni bir id.
said
said 2 Yıl Önce Cevaplandı
merhaba
harita çok güzel olmuş ellerinize sağlık. Arkadaşında dediği gibi mesela ankara tıklayınca ankara ile ilgili içerik gelicek. Bunu nasıl sağlarım.

$("#map svg path").click(function() {//tıklayınca

$("#istatislik").show(1000);

});

kodu ile tüm illerde aynı içerik gösteriliyor.
cArleone
cArleone 2 Yıl Önce Cevaplandı
@said Yukarıda ben sadece bir alanı göstermeyi gösterdim.Siz öncelikle tıklama olduğunda o şehri ajax ile veriyi yollayıp sonuç alacaksınız.O sonucu istatislik divine yerleştirip göstereceksiniz.

$("#map svg path").click(function() {
var sehir=$(this).attr("id");
$.post("sehir-veri.php",{"sehir-ismi":sehir},function(veriler){ $("#istatislik").html(veriler); })
$("#istatislik").show(1000);
});


şehir-veri.php de şehri alıp işleyin. html ile beraber çizdirin.bu şekilde şehre tıklandığı anda veriyi alıp o alana yerleştirip göstereceksiniz.
programcirg
programcirg 2 Yıl Önce Cevaplandı
Güzel bir uygulama olmuş eline sağlık.

İhtiyacı olanlar için türkiye'deki tüm il ve ilçeleri kapsayan bir uyglama. Ancak ücretli ama değer. kullanımı ve entegrasyonu kolay bi göz atın derim.

www.vtiihjs.com
mrbalkan
mrbalkan 2 Yıl Önce Cevaplandı
Merhaba,
Harita yüklendiğinde Ankara seçili gelsin ve kullanıcı tarafından değiştirilemesin istiyorum.
Bunu nasıl yaparım?
Teşekkürler
cArleone
cArleone 2 Yıl Önce Cevaplandı
@mrbalkan bunun için şehirlerin idlerini bilmen gerek.türkiye.js den obj.click içine alert(this.id) yazarak öğrenebilirsin.Ankaranın 12.türkiye.js yi açıp içine
if(obj.id==12){	obj.animate({fill: '#000'}, 200);	}

eklersen ankarayı siyah renk yaparak seçili gösterecektir.diğerlerinin seçilmemesi için hover ve click olaylarını silmelisin.Senin için editledim örneği.Buradan http://ustaderslik.com/dosya/Turkey.js.zip indirebilirsin.
gokhandmr
gokhandmr 2 Yıl Önce Cevaplandı
Merhaba öncelikle burada ziyaretçiler ile ilginiz ve konu anlatımlarınızla harika şeyler yapıyorsunuz bunun için teşekkür ederim. Benim sizden isteğim, ankara üzerine tıklandığında yukarıda Ankara yazısı görünmeye devam edebilir ancak bu sırada yani tıklandıgında aynı zamanda ankara.html'e gitmesini nasıl sağlarım. Hangi dosyanın hangi bölümüne hangi kodu yazarak? :) tekrar teşekkürler, herkese iyi çalışmalar.
cArleone
cArleone 2 Yıl Önce Cevaplandı
gokhandmr js kısmına şu şekilde kod ekleyerek yapabilirsin.else if kısmını istiğin kadar uzatabilirsin.
$("#map svg path").click(function() {
var sehir=$(this).attr("id");
if(sehir=="ankara"){ window.location.assign("ankara.html") }
else if(sehir=="isparta"){ window.location.assign("isparta.html") }
});
gokhandmr
gokhandmr 2 Yıl Önce Cevaplandı
Merhaba, vermiş oldugunuz kodu tüm js dosyalarının en üst ve en altına kopyalayarak sırayla denedim malesef hiçbirisinde çalışmadı.
cArleone
cArleone 2 Yıl Önce Cevaplandı
js dosyalarıda değil zaten.index.html de
$(function(){

})

içine yazın.
gokhandmr
gokhandmr 2 Yıl Önce Cevaplandı
Teşekkürler, yazdıktan sonra çözmüştüm ancak sizden cevap alamadan ikinci mesajımı atamıyorum sanırım. Belirli süre ile bu kuralı sınırlandırırsanız daha iyi olur mu sanki? Tabi yinede siz bilirsiniz :)

İndex.html'deki .map in width:1050px olan kısımdan boyutu ufalttıgımda haritanın tamamını ufaltmıyor haritayı direk kesiyor. Konu başında bahsettiginiz transform özelligi ile olan anlatımınızı uyguluyorum ancak, bu haritayı başka bir sistemde html modül olarak ekliyorum ben. Ve css'de #body'de değerleri azaltarak deniyorum ancak tüm sitenin #body'sini etkiliyor sanırım bu sorunu nasıl çözebilirim sizce.
cArleone
cArleone 2 Yıl Önce Cevaplandı
örnekte css kısmındaki #map svg ye
transform:scale(.5,.5);
-webkit-transform:scale(.5,.5);
-moz-transform:scale(.5,.5);

ekleyip deneyin.daha fazla küçültmek için .5 azaltın.yada büyültmek için artırın.
msbeden
msbeden 2 Yıl Önce Cevaplandı
Merhaba bunu bulana kadar baya uğraştım :D

Sağolun ,baya iyi bir sistem. Benim istediğim şehrin üzerine gelince o şehirle alakalı veritabanında bulunan verileri çekip küçük kutucuk şeklinde yazması. Bunun için neler yapabilirim, çok uğraştıracak gibi, bir çözüm sunar mısınız??
cArleone
cArleone 2 Yıl Önce Cevaplandı
@msbeden Yukarıdaki yorumlarından birinde şehre tıklanınca ajax ile bir sayfa çalıştırıp veri çekmeyi gösterdim.O çalıştırdığımız sayfada post ile şehri alıp mysqlden verileri çekip kutucuk içinde çizdirirseniz,direk indexte o haliyle gözükecektir.
oflukahin
oflukahin 2 Yıl Önce Cevaplandı
merhabalar üstadım. 1. sorum bu haritayı reponsiveye nasıl uyarlayacağız.2 . resimdede gönderdiğim gibi aralarda boşluk olmadan yazı nasıl yazarız.. http://fs2.directupload.net/images/150210/v2ka8p5k.jpg
cArleone
cArleone 2 Yıl Önce Cevaplandı
@oflukahin Yukarıdaki yorumumda harita boyutunu küçültmeyi gösterdim.css media http://ustaderslik.com/konu/CSS3_@Media_Kullanımı_(responsive) özelliğini tablet ve mobil aralığı yapalayıp küçültme işlemini yapabilirsin.
oflukahin
oflukahin 2 Yıl Önce Cevaplandı
öncelikle ilginiz için teşekkür ederim. lakin yine başaramadım. şu şekilde anlatayım. responsive bir site var ve bu responsive siteye bayilerimiz diye bir alan ekledim. haritayıda bu sayfada göstermek için iframe kullandım. buraya kadar sorun yok. lakin telefonda veya masaüstünde yakınlaştırarak baktığımda bu resimde olduğu gibi kesiliyor. http://i.hizliresim.com/lkj7zQ.jpg ....sizin dediğiniz gibi yaptım. aynen şu şekil: http://i.hizliresim.com/8lZg9W.jpg burdan css den display block: none yaptım. burdan dediğiniz gibi kodları ekledim: http://i.hizliresim.com/M6pEX9.jpg . ve böyle görüntü aldım: http://i.hizliresim.com/nAM7kB.jpg . benim istediğim ilk gönderdiğim resimde ki gibi hem mobile hemde tablete uyacak şekilde daralması. buda responsivenin ana index sayfa kodları: http://i.hizliresim.com/oA3ggQ.jpg . şimdiden teşekkür ederim.
cArleone
cArleone 2 Yıl Önce Cevaplandı
Siz yanlış anlamışsınız.Küçültme kodunu her bir media tagına ayrı ayrı ekleyip oranlarını değiştireceksiniz.
Media ekran boyutunu yakalar.Sen ekran boyutu şuysa haritanın boyutu şu olsun diyeceksin.

@media screen and (min-device-width:900px) {
#map svg{transform:scale(1,1);-webkit-transform:scale(1,1);}
}

@media screen and (min-device-width:600px) and (max-device-width:900px) {
#map svg{transform:scale(.5,.5);-webkit-transform:scale(.5,.5);}
}

bu şekilde her ekran aralığına göre boyutu değiştireceksin.
oflukahin
oflukahin 2 Yıl Önce Cevaplandı
üstadım. ilgin için teşekkür ederim. lakin yine beceremedim. tekrar sorup kafa şişirmekte istemiyorum. bakalım ne yaparım. çözmeye çalışırım.
cArleone
cArleone 2 Yıl Önce Cevaplandı
Buradan http://ustaderslik.com/dosya/Responsive-Turkey.rar responsive halini indirebilirsin.
techmyb
techmyb 2 Yıl Önce Cevaplandı
merhaba çalışma için teşekkürler,ancak ben şehirlere tıklayınca yeni bir sayfa açarak içerik göstermek istiyorum bunu nasıl saglarım yardımcı olur musunuz?
cArleone
cArleone 2 Yıl Önce Cevaplandı
@techmyb
$("#map svg path").click(function() {
var sehir=$(this).attr("id");
window.location.assign("sehir.php?s="+sehir);
});

Bu şekilde sehir.php ye,şehiri get metodu ile yoluyoruz.sehir.php bunu php get methodu ile alarak işlemlerini yapabilirsin.

$sehir=$_GET["s"];
mewo95
mewo95 2 Yıl Önce Cevaplandı
Üstadım tam aradığım gibi harika olmuş ellerine sağlık :)
techmyb
techmyb 2 Yıl Önce Cevaplandı
merhaba, harita üzerine gelince altta şehir ismi yerine plakası gözüksün istiyorum nasıl yapabilirim bunu yardımcı olur musunuz
cArleone
cArleone 2 Yıl Önce Cevaplandı
@techmyb index.html de js kısmını şu şekilde değiştir.
<script type="text/javascript">
$(function(){
$("#map svg path").hover(
function() {
var id=$(this).attr("id");
$("#sehir").text(paths[id].county);
});
})
</script>

bu şekilde plaka no'suna erişebilirsin.
mrokp
mrokp 2 Yıl Önce Cevaplandı
Haritadaki illere tıklayınca lightbox gibi pop-up pencere açılması için yardımcı olabilir misiniz?
cArleone
cArleone 2 Yıl Önce Cevaplandı
@mrokp index.html de hover yerinbe click yazarsan tıklayınca işlem yapar.her hangi bir poup plugini kullanabilirsin.jquery modal plugin diye ararsan bir çok popup plugini çıkacaktır.
mrokp
mrokp 2 Yıl Önce Cevaplandı
popup plugin olarak araştırdım dediğiniz gibi çok örnek çıktı ama bunu haritanın içinde kullanamadım lütfen haritada örnek gösterirmisiniz? hangi ile tıklarsam ona göre bir popup pencere açılmasını istiyorum
Sephinroth
Sephinroth 2 Yıl Önce Cevaplandı
Merhaba, harita üzerinde il isimlerini yazmamız mümkün mü ?
resulaltntas
resulaltntas 2 Yıl Önce Cevaplandı
iyi günler ben ile tıklayınca aşagıda bilgi vermesini istiyorum bunu nasıl yapabılırım yardım ederseniz sevinirim
Eypio
Eypio 2 Yıl Önce Cevaplandı
İyi günler hocam. Her zamanki gibi sitede işte header content ve footer bölümleri olur. content bölümüne haritayı yerleştirdim scale ile boyutunu küçülttüm sorunsuz çalışıyor. Fakat map divi header bölümünde olan menümün üstüne çıkmış. Aynı şekilde footer bölümünede. Firebug ile baktığımda anlaşılıyor tabi görüntü olarak bi bozukluk yok. Altına clear both div attım ama yine footera taşıyor. Headerde ki menüme ulaşım sağlayamıyorum çünkü map divi üstüne çıkmış. Birde ayarını bulamadım. harita kendini sayfada ortalıyor. left top değerleriyle oynasamda ne fayda. Yardımcı olursanız sevinirim :)
cArleone
cArleone 2 Yıl Önce Cevaplandı
@mrokp bir önce yorumda zaten söyledim.hover click yapıp içine poup komutunu yazın.
@Sephinroth haritanın öyle bir özelliği yok.ama html5 svg komutlarıyla uğraşılırsa yazdıralabilir.
@resulaltntas yukarıdaki yorumlarda ajax ile veri çekmeyi gösterdim.ajaxla arkadan veri çekip göstertirebilirsin.
@Eypio haritayı position ile konumlandırdığım için öyle bir sorun oluyor.content divine
position:relative;

verin.bu şekilde konumlandırmayı content baz alarak yapacaktır. #map svg deki left ve top değerleriyle oynayarak konumlandırma tam yapabilirsin.css kısmındaki #map deki
margin:auto;

yu silersen ortalanmayacaktır.
Eypio
Eypio 2 Yıl Önce Cevaplandı
Cevabınız için teşekkür ederim. Yanlız taşma sorununu hala çözemedim. Farkettiyseniz örnek olarak koyduğunuz linkte sehir divinin yazısını mouse ile seçemiyorsunuz. Firebug gibi bir araçla bakılınca svg objesi onun üstünde çıkıyor. top:-150 ibaresini kaldırırsak problem çözülüyor. ama arasında inanılmaz bir boşluk çıkıyor. Bunu nasıl halledebilirim?
cArleone
cArleone 2 Yıl Önce Cevaplandı
@Eypio onun tek çözümü şehir divinide position ile konumlandırıp,z-indexini artırmak.bu şekilde üste çıkacaktır yazı.scale ile küçültüğümüz için height yine aynı kalıyor.o yüzden boşluk çok oluyor.
superman1903
superman1903 2 Yıl Önce Cevaplandı
Hocam merhaba, paylaşımınız için teşekkürler güzel bir çalışma olmuş yalnız harita üzerinde şehir isimlerini belirtmemiz gerekiyor uğraştım ama yapamadım yardımcı olabilir misiniz ? İlginiz için teşekkürler.
lilahmiharbi
lilahmiharbi 2 Yıl Önce Cevaplandı
İllere tıklayınca ayrı bir sayfa açılmasını nasıl sağlayabilirim. Örneğin ankaraya tıklayınca sitem.com/ankara sayfası açılacak.

Bir projem için acil lazımda. Yardımcı olursanız sevinirim.

Saygılarımla
cArleone
cArleone 2 Yıl Önce Cevaplandı
@superman1903 Boş bir vaktimde yapmaya çalışırım.
@lilahmiharbi Yukarıdaki yorumlarda 2 farklı yol anlattım.onlara bakabilirsiniz.
nmsoylu
nmsoylu 2 Yıl Önce Cevaplandı
Merhabalar hocam, ben sizin bu makaleyi çok beğendim ve çalıştığım yer için üyelerimizi haritaladım. Fakat iki konuda tıkandım. birincisi tıklanmasını istemediğim kullanılmayan şehirler var bunları nasıl kapatabilirim. ikincisi ise kullanılan illerin renklerinin her birisinin farklı olmasını sağlamak. Raphael Js dökümanlarına baktım ama pek bulabildiğim birşey yok. Şimdiden teşekkür ederim.
cArleone
cArleone 2 Yıl Önce Cevaplandı
@nmsoylu 1- path.js de notSelected yazan parametreyi Selected yaparsanız o şehir şeçilmez.
2-manuel olarak atama yapabilirsin.aşağıda bir örnek gösterdim.şehirleri tek tek ayarlayarak değiştirebilirsin.

$("#map svg path").each(function() {
var id=$(this).attr("id");
if(id=="istanbul"){ $(this).attr("style","fill:red"); }
else if(id=="isparta"){ $(this).attr("style","fill:blue"); }
});
erdoganturkmen
erdoganturkmen 2 Yıl Önce Cevaplandı
Hocam emeğinize sağlık. Harika bir çalışma olmuş. Yani şu yazılan yorumlara karşılık verdiğiniz cevaplar bile anlatılamaz bir güzellik :) Şehir isimlerini haritada göstermek istiyorum. Boş vaktinizde yapıp güncellemenizi sabırsızlıkla bekliyorum :)
resulaltntas
resulaltntas 2 Yıl Önce Cevaplandı
$("#map svg path").click(function() {

var sehir=$(this).attr("id");

window.location.assign("sehir.php?s="+sehir);

});
Bu şekilde sehir.php ye,şehiri get metodu ile yoluyoruz.sehir.php bunu php get methodu ile alarak işlemlerini yapabilirsin.

$sehir=$_GET["s"];
bunun bir örneğini yapsanız ben ypamadım yardımcı olursanız sevinirim
linwelin
linwelin 2 Yıl Önce Cevaplandı
Öncelikle çalışmanız için teşekkürler.

Ankara'yı seçtiğimizde çevre illeri farklı renkle gösterebilir miyiz? yada ankarayı seçince bir şehri farklı renklendirmeyi gösterirseniz gerisini ben hallederim.

Jsde yeniyim, yardımlarınız için teşekkürler.
cArleone
cArleone 2 Yıl Önce Cevaplandı
@linwelin son yorumumda renk değiştirmeyi gösterdim.if le ankara mı diye kontrol edip,çevre illerin rengini manul değiştirdire bilirsin.
ebakyt
ebakyt 2 Yıl Önce Cevaplandı
Emeğinize sağlık
En önemlisi paylaşımınız için çok teşekkürler
tehnosef
tehnosef 2 Yıl Önce Cevaplandı
öncelikle harita için teşekkür ederim.bana tokat il ve ilçelerini gösteren harita lazım.bunun için hangi adımları yapmam gerekiyor.
kilicarslan7
kilicarslan7 2 Yıl Önce Cevaplandı
peki şehirleri tooltip şeklinde göstermel istersek nasıl yaparız?
cArleone
cArleone 2 Yıl Önce Cevaplandı
@kilicarslan7 Zaten örnekte şehir ismini almayı gösterdim.Gerisi sizin js veya jquery bilginizi kalmış.İster plugin kullanın ,ister kendiniz kodlayın.Ama yinede bir örnek hazırladım.
http://ustaderslik.com/dosya/Turkey-tooltip.rar
sedatsert
sedatsert 2 Yıl Önce Cevaplandı
Çok teşekkürler bu güzel harita için..

Yalnız bir hata var, Elazığa basıldığında diğer şehirlere basılamıyor. Nasıl çözebiliriz? (sadece elazığda sorun var/test edilmiştir)
funda
funda 2 Yıl Önce Cevaplandı
Merhaba bu haritayı bir çok div içinde kullanmam lazım ama çalışmıyor. çok teşekkür ederim bu arada ..
cArleone
cArleone 2 Yıl Önce Cevaplandı
@sedatsert path.js de ufak bir hata var.elazig yerine elagiz yazılmış düzenlerseniz sorun kalmaz.Ana konudaki linki de güncelledim oradan indirebilirsiniz.

@funda Tek sayfada en fazla 1 tane oluyor.Farklı farklı sayfalarda haritaları oluşturup,daha sonra istediğiniz bir sayfaya iframe ile diğer sayfaları çağırarak kullanabilirsiz.
lutfuyucel
lutfuyucel 2 Yıl Önce Cevaplandı
Merhabalar.. Hocam bende responsive sitemin anasayfanın alt kısmına hariyatı yerleştirdim ama sadece balıkesir gözükür gerisini bir türlü getiremedim.. hocam sizce nedeni ne olabilir . hala bir çözüm bulamadım.
yskartal
yskartal 2 Yıl Önce Cevaplandı
merhabalar, öncelikle böyle bir paylaşım için teşekkürler tam da ihtiyacım olan şeydi. benim sorum şu: bu türkiye haritası üzerinde mesela ankara tıkladığım zaman kenarda başka bir burdaki türkiye hariası benzeri yeni bir haritanın açılmasını istiyorum. teşekkürler
ugurkilic91
ugurkilic91 2 Yıl Önce Cevaplandı
Kardeşim süper çalışma eline sağlık.Ben scrool ile çalışan bir site yapıyorm. sayfaya girildiğinde tüm js,css ve resimleri yükletmem mantıklı değil çok zaman alıyo.ASP.NET ile yapıyorum user controllerle bu user controlleri ajax ile çekiyorum. yanlız haritayı böyle yükleyemiyorum.sayfa yüklerken yüklemem gerekiyo yardımcı olabilir misniz ? Şimdiden teşekkürler.
Meknun
Meknun 2 Yıl Önce Cevaplandı
kardeşim çok güzel bir çalışma eline ve emeğine sağlık . bir ricam var idi. tooltipli versiyonunda kıbrıs adasında eklemen mümkünmüdür ? şimdiden teşekkür eder Allah razı olsun .
ekimcn
ekimcn 76 Gün Önce Cevaplandı
Merhaba arkadaslar calismalariniz cok yardimci ve islevli,tesekkürler bunun icin.
Bu türkiye haritasini dünya haritasi üzerinde uyarlamak ve ülkelerin üzerine geldigimde toplu igne gibi olan ikonlarin cikmasini nasil saglayabilirim acaba bu konuda yardimci olabilecek birileri varsa cok makbule gecer.
simdiden tesekkurler.
cArleone
cArleone 75 Gün Önce Cevaplandı
@ekimcn Şu plugin işine yarayabilir.Biraz uğraşırsan istediğini elde edebilirsin. https://jqvmap.com
orhanhoca
orhanhoca 59 Gün Önce Cevaplandı
Yukardaki değerli bilgiler için öncelikle çok teşekkür ederim. İki konuda değerli fikirlerinize ihtiyacım var. Birincisi http://www.ugur.com.tr/yetkili-bayilerimiz.aspx?sehir=ankara burdaki gibi illerin adını haritada ilin üzerinde yazı olarak nasıl gösterebilirim ? İkincisi ise uygulamada il üzerine tıklayınca ayrı sayfada değilde burdaki gibi http://www.seneroto.com.tr/harita/# bir uygulama nasıl yapabilirim ? Teşekkür ederim.
cArleone
cArleone 58 Gün Önce Cevaplandı
@orhanhoca Yukarıdaki yorumlarda bir tane örnek hazırlayıp eklemiştim örneği.Buradan indirebilirsiniz. http://ustaderslik.com/dosya/Turkey-tooltip.rar
orhanhoca
orhanhoca 58 Gün Önce Cevaplandı
Hocam merhaba, öncelikle yanıt için teşekkür ederim. Haritada ilin üzerinde tooltip değilde ilin adının il üzerinde sabit yazılı olmasını nasıl sağlayabilirim ? Yukardaki linkteki örnek gibi .
cArleone
cArleone 57 Gün Önce Cevaplandı
#orhanbaba dediğinizi anladım.kısa yoldan şu şekilde yapabilirsiniz.jquery kısmında şunu yazın
$("#map svg path").each(function() {
var id=$(this).attr("id");
$(this).html(id)
if($("#"+id).length>0){
var k=$("#"+id).position();
var x=k.left-110,y=k.top;
$("#map").append(" <div style='font-size:12px;position:absolute;left:"+x+"px;top:"+y+"px;'>"+id+"</div> ");
}
});

ama ufak şehirlerde kaymalar olacaktır.en mantıklısı tek tek elle koordinat girerek yer belirtmeniz.öylesi daha iyi olacaktır.
orhanhoca
orhanhoca 44 Gün Önce Cevaplandı
Değerli yardımlarınız için çok teşekkür ederim.
ALTERHAN
ALTERHAN 4 Gün Önce Cevaplandı
Selamlar
eklentiniz mükemmel wordpress sitemiz için rica etsek zip formatında direk yükeleyebileceğimiz bir formatını ekler misiniz direk yükeleyelim eklenti olarak bu konularda bilgimiz yok emeğiniz için teşekkürler ;
Saygılar



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol