Jvectormap show div onRegionClick
Hi I am currently trying to use the Jvectormap plugin which i have found to be really good, however i cannot create this little bit of functionality which would make it amazing...
What i need is when you click on a region text to appear in a predefined div on the right hand side.
As you can see in the image i want when you click on United kingdom text to show in the black box on the right hand side.
However all i have managed to do is make the region a link.
Here is a link http://s453688288.websitehome.co.uk/wndirect/destination.php
Here is my code
<p>Click on the links below to see some key stats regarding eCommerce in that country.</p>
</div>
</div>
<div class="green-band">
<div class="row">
<div class="three columns">
<button id="focus-eu">Focus on Europe</button>
</div>
<div class="three columns">
<button id="focus-us">Focus on USA</button>
</div>
<div class="three columns">
<button id="focus-au">Focus on Australia</button>
</div>
<div class="three columns">
<button id="focus-home">Return to the initial state</button>
</div>
</div>
</div><!-- end green band -->
<div id="map1">
<div class="info-box"><h3 class="white">Ecommerce info</h3></div>
<div class="footer-illustration-map"></div>
</div><!-- end #map1 -->
<? include("inc/footer.php") ?>
<!-- map functionality-->
<link rel="stylesheet" media="all" href="maps/jquery-jvectormap.css"/>
<script src="maps/jquery-jvectormap.js"></script>
<script src="maps/jquery-mousewheel.js"></script>
<script src="maps/lib/jvectormap.js"></script>
<script src="maps/lib/abstract-element.js"></script>
<script src="maps/lib/abstract-canvas-element.js"></script>
<script src="maps/lib/abstract-shape-element.js"></script>
<script src="maps/lib/svg-element.js"></script>
<script src="maps/lib/svg-group-element.js"></script>
<script src="maps/lib/svg-canvas-element.js"></script>
<script src="maps/lib/svg-shape-element.js"></script>
<script src="maps/lib/svg-path-element.js"></script>
<script src="maps/lib/svg-circle-element.js"></script>
<script src="maps/lib/vml-element.js"></script>
<script src="maps/lib/vml-group-element.js"></script>
<script src="maps/lib/vml-canvas-element.js"></script>
<script src="maps/lib/vml-shape-element.js"></script>
<script src="maps/lib/vml-path-element.js"></script>
<script src="maps/lib/vml-circle-element.js"></script>
<script src="maps/lib/vector-canvas.js"></script>
<script src="maps/lib/simple-scale.js"></script>
<script src="maps/lib/numeric-scale.js"></script>
<script src="maps/lib/ordinal-scale.js"></script>
<script src="maps/lib/color-scale.js"></script>
<script src="maps/lib/data-series.js"></script>
<script src="maps/lib/proj.js"></script>
<script src="maps/lib/world-map.js"></script>
<script src="maps/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
<script>
jQuery.noConflict();
jQuery(function(){
var $ = jQuery;
$('#focus-au').click(function(){
$('#map1').vectorMap('set', 'focus', 'AU');
});
$('#focus-us').click(function(){
$('#map1').vectorMap('set', 'focus', 3, 0.1, 0.4);
});
$('#focus-eu').click(function(){
$('#map1').vectorMap('set', 'focus', 3, 0.5, 0.3);
});
$('#focus-home').click(function(){
$('#map1').vectorMap('set', 'focus', 1, 0, 0);
});
$('#map1').vectorMap({
map: 'world_mill_en',
focusOn: {
x: 0.5,
y: 0.5,
scale: 1
},
backgroundColor: '#FFFFFF',
onRegionClick: function(event, code){
if (code == "GB") {window.location = '#reach'}
if (code == "US") {label.text('Bears, vodka, balalaika');}
if (code == "DE") {window.location = '/url4'}
if (code == "IE") {window.location = '/url5'}
},
series: {
regions: [{
scale: ['#A6CDD4', '#669ca5'],
normalizeFunction: 'polynomial',
values: {
"GL": 0,
"AF": 0,
"AL": 0,
"DZ": 0,
"AO": 0,
"AG": 0,
"AR": 0,
"AM": 0,
"AU": 1,
"AT": 1,
"AZ": 0,
"BS": 0,
"BH": 0,
"BD": 0,
"BB": 0,
"BY": 0,
"BE": 0,
"BZ": 0,
"BJ": 0,
"BT": 0,
"BO": 0,
"BA": 0,
"BW": 0,
"BR": 0,
"BN": 0,
"BG": 0,
"BF": 0,
"BI": 0,
"KH": 0,
"CM": 0,
"CA": 1,
"CV": 0,
"CF": 0,
"TD": 0,
"CL": 0,
"CN": 0,
"CO": 0,
"KM": 0,
"CD": 0,
"CG": 0,
"CR": 0,
"CI": 0,
"HR": 0,
"CY": 1,
"CZ": 1,
"DK": 0,
"DJ": 0,
"DM": 0,
"DO": 0,
"EC": 0,
"EG": 0,
"SV": 0,
"GQ": 0,
"ER": 0,
"EE": 1,
"ET": 0,
"FJ": 0,
"FI": 0,
"FR": 1,
"GA": 0,
"GM": 0,
"GE": 0,
"DE": 1,
"GH": 0,
"GR": 0,
"GD": 0,
"GT": 0,
"GN": 0,
"GW": 0,
"GY": 0,
"HT": 0,
"HN": 0,
"HK": 0,
"HU": 1,
"IS": 0,
"IN": 0,
"ID": 0,
"IR": 0,
"IQ": 0,
"IE": 1,
"IL": 0,
"IT": 1,
"JM": 0,
"JP": 0,
"JO": 0,
"KZ": 0,
"KE": 0,
"KI": 0,
"KR": 0,
"KW": 0,
"KG": 0,
"LA": 0,
"LV": 0,
"LB": 0,
"LS": 0,
"LR": 0,
"LY": 0,
"LT": 0,
"LU": 1,
"MK": 0,
"MG": 0,
"MW": 0,
"MY": 0,
"MV": 0,
"ML": 0,
"MT": 0,
"MR": 0,
"MU": 0,
"MX": 0,
"MD": 0,
"MN": 0,
"ME": 0,
"MA": 0,
"MZ": 0,
"MM": 0,
"NA": 0,
"NP": 0,
"NL": 1,
"NZ": 1,
"NI": 0,
"NE": 0,
"NG": 0,
"NO": 0,
"OM": 0,
"PK": 0,
"PA": 0,
"PG": 0,
"PY": 0,
"PE": 0,
"PH": 0,
"PL": 1,
"PT": 1,
"QA": 0,
"RO": 1,
"RU": 0,
"RW": 0,
"WS": 0,
"ST": 0,
"SA": 0,
"SN": 0,
"RS": 0,
"SC": 0,
"SL": 0,
"SG": 0,
"SK": 0,
"SI": 0,
"SB": 0,
"ZA": 0,
"ES": 1,
"LK": 0,
"KN": 0,
"LC": 1,
"VC": 0,
"SD": 0,
"SR": 0,
"SZ": 0,
"SE": 0,
"CH": 1,
"SY": 0,
"TW": 0,
"TJ": 0,
"TZ": 0,
"TH": 0,
"TL": 0,
"TG": 0,
"TO": 0,
"TT": 0,
"TN": 0,
"TR": 0,
"TM": 0,
"UG": 0,
"UA": 0,
"AE": 0,
"GB": 1,
"US": 1,
"UY": 0,
"UZ": 0,
"VU": 0,
"VE": 0,
"VN": 0,
"YE": 0,
"ZM": 0,
"ZW": 0,
}
}]
}
});
})
</script>
Answer
You need to get the vectorMap mapObject, and assign it to a variable:
var map = $('#map1').vectorMap('get', 'mapObject');
After which, you can access a method called getRegionName(), passing it the code.
Then just append that to your <div>:
onRegionClick: function(event, code) {
var map = $('#map1').vectorMap('get', 'mapObject');
$('.info-box').append('<span>' + map.getRegionName(code) + '</span>');
}
(Where .info-box is the class of the <div> you want to append to)