Jquery Dünya Haritası Plugini - jqvmap
Geri Dön

Jquery Dünya Haritası Plugini - jqvmap

Anasayfa
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



Anasayfa

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik