Im using the jvectormap plugin, and I am trying to set the colors of each of the regions on the map. However, after applying the code below the map is displayed but with no colours applied. It just shows the map in white.
I have read multiple examples and questions on this matter, but I cant seem to get it to work for me.
Example 1 of setting random colours on a map.
Documentation
Similar question to mine, however it doesn't solve my problem.
jQuery('#mapDiv').vectorMap({
map: 'au_merc_en',
backgroundColor: 'none',
colors: {
AU-SA: '#4E7387',
AU-WA:'#333333',
AU-VIC:'#89AFBF',
AU-TAS:'#817F8E',
AU-QLD:'#344B5E',
AU-NSW:'#344B5E',
AU-ACT:'#344B5E',
AU-NT:'#344B5E'
},
series: {
regions:
[{
attribute: 'fill'
}]
}
});
Can anyone see the problem?
Im using the jvectormap plugin, and I am trying to set the colors of each of the regions on the map. However, after applying the code below the map is displayed but with no colours applied. It just shows the map in white.
I have read multiple examples and questions on this matter, but I cant seem to get it to work for me.
Example 1 of setting random colours on a map.
Documentation
Similar question to mine, however it doesn't solve my problem.
jQuery('#mapDiv').vectorMap({
map: 'au_merc_en',
backgroundColor: 'none',
colors: {
AU-SA: '#4E7387',
AU-WA:'#333333',
AU-VIC:'#89AFBF',
AU-TAS:'#817F8E',
AU-QLD:'#344B5E',
AU-NSW:'#344B5E',
AU-ACT:'#344B5E',
AU-NT:'#344B5E'
},
series: {
regions:
[{
attribute: 'fill'
}]
}
});
Can anyone see the problem?
Share Improve this question edited May 23, 2017 at 10:34 CommunityBot 11 silver badge asked Oct 12, 2012 at 21:53 NavigatronNavigatron 2,1056 gold badges34 silver badges63 bronze badges2 Answers
Reset to default 13Here is a working sample of what I think you're attempting to do.
http://jsfiddle/3xZ28/34/
(function() {
var myCustomColors = {
'AU-SA': '#4E7387',
'AU-WA': '#333333',
'AU-VIC': '#89AFBF',
'AU-TAS': '#817F8E',
'AU-QLD': '#344B5E',
'AU-NSW': '#344B5E',
'AU-ACT': '#344B5E',
'AU-NT': '#344B5E'
};
map = new jvm.WorldMap({
map: 'au_merc_en',
container: $('#ausie'),
backgroundColor: '#eff7ff',
series: {
regions: [{
attribute: 'fill'
}]
}
});
map.series.regions[0].setValues(myCustomColors);
})();
This example builds off of two examples on the jvectormap site:
1. http://jvectormap./maps/countries/australia/
2. http://jvectormap./examples/random-colors/
The fiddle includes the jvectormap 1.1 file from the site. Also note the Random Colors example on the site uses jvm.WorldMap.
The code below has been edited to fix the syntax errors in your posted code.
jQuery('#mapDiv').vectorMap({
map: 'au_merc_en',
backgroundColor: 'none',
colors:{
"AU-SA": '#4E7387',
"AU-WA":'#333333',
"AU-VIC":'#89AFBF',
"AU-TAS":'#817F8E',
"AU-QLD":'#344B5E',
"AU-NSW":'#344B5E',
"AU-ACT":'#344B5E',
"AU-NT":'#344B5E'
},
series: {
regions:
[{
attribute: 'fill'
}]
}
});
Unbound (closest antonym of encapsulated I can muster) hyphens within object keys cause a syntax error. The error itself is for an invalid label.