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?

Unexceptionable

Answer 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.

Keon

Thanks! This is exactly what I needed to do. Your example shows that it works anyway. However, it isn't working with my code. I call in the script using .getScript() that contains this code in the document.ready() function and nothing appears on screen. I must be going wrong somewhere else, or there must be a problem calling it. Using firebug, I can see the script is being called anyway. And the map did show before hand, using the same code. – Unexceptionable

Got it fixed now, this code doesn't work in document.ready() using just the function did the job! – Unexceptionable

jsfiddle link is now dead. – Whisk

Hi @katalin_2003, I forked the jsfiddle: jsfiddle.net/Nuktu/A2MAJ/4. But the JS and CSS files now return 404s, you will need to add them. – Unexceptionable

Answer 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.

Galliett