Jquery Dünya Haritası Plugini - jqvmap
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

Jquery Dünya Haritası Plugini - jqvmap

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(2757)
RAPOR ET
Bu dersimiz de için de dünya,kıta ve bazı ülkelerin svglerini barındıran jqvmap adlı plugini işleyeceğiz.Kullanımı basit ve işlevsel.Daha önceden Türkiye haritasını barındıran bir svg göstermiştim.Buradan http://ustaderslik.com/konu/HTML5_Svg_Türkiye_Haritası ulaşa bilirisiniz.

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

Demo : http://ustaderslik.com/ornek/Svg_Dunya/

Plugin de bulunan svgler şunlar.
- Dünya Haritası
- Avrupa Haritası
- Asya Haritası
- Avusturalya Haritası
- Afrika Haritası
- Kuzey-Güney Amerika Haritaları
- Almanya,Brazilya,Fransa,Rusya,Almanya,Cezayir,Usa Haritaları

Bazılarında 2 tane mevcut.Ama farklıdır haritalar.

Kullanımına geçelim.Öncelikle sayfaya dosyaları dahil ediyoruz.
<link rel="stylesheet" href="jqvmap.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.vmap.min.js"></script>
<script type="text/javascript" src="harita/jquery.vmap.world.js"></script>
<script type="text/javascript" src="jquery.vmap.sampledata.js"></script>

gördüğünüz gibi 5 tane dosya dahil ediyoruz.Dikkat etmemiz gereken nokta ise hangi harita veya haritaları kullanacaksak onların js dosyasını ekliyoruz.İndirdiğiniz örnekte harita adlı bir klasör mevcut.Biz şimdilik sadece world yani dünya haritasını ekledik.

jQuery('seçici').vectorMap();

Daha sonra haritanın gözükeceği yeri seçip plugini uyguluyoruz.Bazı parametreleri mevcut.Onları inceleyelim.

map : Hangi haritanın gözükeceğini seçiyoruz.Örneğin yukarıda jquery.vmap.world.js şeklinde ekledik.Linklerin sonunda isim belli.Onu alıp en ekleyerek buluyoruz.Yani mape world_en yazacağız.Avusturalyayı jquery.vmap.australia.js dahil etmiş olsaydık,mape australia_en yazacaktık.
backgroundColor : Arkaplan rengi belirtmek için.
color : Haritadaki bölge rengi.
hoverOpacity : Haritadaki hover olayında opaklığı azaltmak için.
selectedColor : Harita da seçilen bölgenin rengini değiştirmek için.
enableZoom : Soldaki zoom panelini açmak veya kapatmak için.
showTooltip : Ülkelerin üzerine gelindiğin de,tooltip şeklinde ülke ismini göstermek için.
scaleColors : Haritayı belirlenen 2 renk arasında renklendirir.
onRegionClick : Haritadaki bölgelere tıklama olayını yakalar.
onRegionOver : Haritadaki bölgelerin üzerine gelindiği anı yakalar.

Kısaca parametreler bunlar.Örnekte daha iyi inceleyebilirsiniz.Haritanın boyutunu pluginin uygulandığı yerin boyutuna göre alır.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="jqvmap.css" />
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.vmap.min.js"></script>
<script type="text/javascript" src="harita/jquery.vmap.world.js"></script>
<script type="text/javascript" src="harita/jquery.vmap.usa.js"></script>
<script type="text/javascript" src="harita/continents/jquery.vmap.africa.js"></script>
<script type="text/javascript" src="harita/continents/jquery.vmap.asia.js"></script>
<script type="text/javascript" src="jquery.vmap.sampledata.js"></script>
<script type="text/javascript">
$(function(){

jQuery('#harita1').vectorMap({
map: 'world_en',
backgroundColor: '#fff',
color: '#dddddd',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#999999', '#000000'],
normalizeFunction: 'polynomial',
onRegionClick: function(element, code, ulke){ alert(ulke+"-"+code);}
});

jQuery('#harita2').vectorMap({
map: 'usa_en',
backgroundColor: '#fff',
color: '#dddddd',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: false,
showTooltip: true,
values: sample_data,
scaleColors: ['#999999', '#000000'],
normalizeFunction: 'polynomial',
onRegionClick: function(element, code, ulke){ alert(ulke+"-"+code);}
});

jQuery('#harita3').vectorMap({
map: 'africa_en',
backgroundColor: '#fff',
color: '#dddddd',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: false,
showTooltip: true,
values: sample_data,
scaleColors: ['#999999', '#000000'],
normalizeFunction: 'polynomial',
onRegionClick: function(element, code, ulke){ alert(ulke+"-"+code);}
});

jQuery('#harita4').vectorMap({
map: 'asia_en',
backgroundColor: '#fff',
color: '#dddddd',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: false,
showTooltip: true,
values: sample_data,
scaleColors: ['#999999', '#000000'],
normalizeFunction: 'polynomial',
onRegionClick: function(element, code, ulke){ alert(ulke+"-"+code);}
});

})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.harita{width:100%;height:600px;}
</style>
</head>
<body>

<div id="harita1" class="harita"></div>
<div id="harita2" class="harita"></div>
<div id="harita3" class="harita"></div>
<div id="harita4" class="harita"></div>

</body>
</html>

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



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