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ü :
UstaDerslik
