Search code examples
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
});