svgjqvmap

JQVMap - How do I set a state color in the USA Map?


My question is larger than the title. I want to apply transparency to most of the states and highlight about 6 states with a color.

The instructions on the github page are definitely written from a programmers POV. Can someone help me understand how I target individual states with CSS?

I tried, #jqvmap1_il {color:#930; background-color:#F60;} - which is targeting Illinois, but the inline CSS overrides the change.


Solution

  • JQVMap's documentation says you should pass an object to the colors paramerter...

    Colors of individual map regions. Keys of the colors objects are country codes according to ISO 3166-1 alpha-2 standard. Keys of colors must be in lower case.

    Here is an example of how it can be done...

    var highlighted_states = {
       il: '#f60',
       mo: '#f60',
       tx: '#f60',
       ut: '#f60',
    }
    
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        color: '#ffffff',
        colors: highlighted_states
    });