jvectormap region colors

Question

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?

Solution 1

Here is a working sample of what I think you're attempting to do.

http://jsfiddle.net/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.com/maps/countries/australia/
2. http://jvectormap.com/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.

Solution 2

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.