I'm using the jVectorMap plugin and I'm trying to get the name element from a map array that looks like this:
$.fn.vectorMap('addMap', 'usa_en', {
"width": 959,
"height": 593,
"pathes": {
"hi": {
"path": "COORDINATES_GO_HERE",
"name": "Hawaii"
},
"ak": {
"path": "COORDINATES_GO_HERE",
"name": "Alaska"
},
"fl": {
"path": "COORDINATES_GO_HERE",
"name": "Florida"
},
...and so on for the other 47 states
}
})
The plugin is initiated using the following, and the map array file is defined by the "map" setting:
var myData = {"hi":0,"ak":0,"fl":0, ...and so on}
$('#us-map').vectorMap({
map: 'usa_en',
values: myData,
color: '#ccc',
onRegionClick: function(event, code){
$.get('{site_url}embeds/state_view/'+code, function(data) {
$('#data-replace').fadeOut(200,function(){ $(this).html(data).fadeTo(200,1); });
$('#data-title').fadeOut(200,function(){ $(this).text(INSERT_CLICKED_STATE_NAME_HERE).fadeTo(200,1); });
});
}
});
Any ideas on how I can insert the state name from the map file array into the onRegionClick callback?
You need to get a handle on the map object, then you can use the getRegionName()
method:
onRegionClick: function(event, code){
//obtain the reference to the map object
var map = $('#world-map').vectorMap('get', 'mapObject');
$.get('{site_url}embeds/state_view/'+code, function(data) {
$('#data-replace').fadeOut(200,function(){ $(this).html(data).fadeTo(200,1); });
$('#data-title').fadeOut(200, function(){ $(this).text(map.getRegionName(code)).fadeTo(200,1); });
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With