jqvmap - applying color to multiple states/regions

Question

With jquery and jqvmap, I'm setting multiple state colors in a US map. For instance, to color all the states that start with "A" red, this works:

jQuery('#vmap').vectorMap('set', 'colors', {al: 'red'});
jQuery('#vmap').vectorMap('set', 'colors', {ak: 'red'});
jQuery('#vmap').vectorMap('set', 'colors', {az: 'red'});
jQuery('#vmap').vectorMap('set', 'colors', {ar: 'red'});

is there a way to make that shorter? I'd like to do this:

var astates = ["al", "ak", "az", "ar"];
for (var i = 0; i < astates.length; ++i) {
    jQuery('#vmap').vectorMap('set', 'colors', { 'astates[i]' : 'red'}); 
}

But that doesn't seem to work. Thanks

not sure if it was just a typo when you posted the question, but I don't think your astates variable should be in quotes. But you are correct that it needs to be a string...so either escape those quotes or do the ugly old '''+astates[i]+''' Your loop looks like it should work otherwise. — hardba11, Aug 23 '13 at 20:37
See this SO question: http://stackoverflow.com/questions/15510913/jqvmap-how-do-i-set-a-state-color-in-the-usa-map — Upperstage, Sep 05 '13 at 12:20

score 4 · Answer 1 · answered Oct 28 '13 at 02:12

4

colorsST = {};
var astates = ["al", "ak", "az", "ar"];
for (var i = 0; i < astates.length; ++i) {
    colorST[i] = 'red';
    jQuery('#vmap').vectorMap('set', 'colors', colorST); 
}

answered Oct 28 '13 at 02:12

Alex

41
2

By doing `colorST[i]` you are assigning not the states as the properties, but rather their index. This is what you would get: `0: 'red', 1: 'red'`, etc... So instead, you should do `colorST[astates[i]] = 'red'`. This will assign the state names as intended. – yulolimum Dec 29 '13 at 10:39

score 4 · Accepted Answer · answered Nov 27 '13 at 09:11

4

var fc = 'red'; // you'll need this if you'll want to change the whole group color someday
jQuery('#vmap').vectorMap('set', 'colors', {al: fc, ak: fc, az: fc, ar:fc});

answered Nov 27 '13 at 09:11

Andrei Konstantinov

6,971
4
41
57

score 1 · Answer 3 · answered Nov 22 '19 at 11:09

I am using this function as following:

let colors =  < any > {};

let colors = {
    "zz": "#006491",
    "us": "#1a769f",
    "nl": "#bde6f9",
    "at": "#c0e8fa",
    "tr": "#c0e8fa",
    "ie": "#c0e9fb"
}

jQuery('#vmap').vectorMap('set', 'colors', colors);

And may you need different colors (I had needed :) ) for example according to some value you can calculate some start colors and calculate with min and max value

let myValuesMap: Map<string, number> = new Map(); //{"zz" => 3011, "us" => 2669, "at" => 260, "nl" => 172, "tr" => 148, "ie"=>101}
let max = 0, min = Number.MAX_VALUE, startColor = [200, 238, 255], endColor = [0, 100, 145], colors = <any>{}, hex;

myValuesMap.forEach((value: number, key: string) => {
  if (value > max) { max = value }
  if (value < min) { min = value }
});

myValuesMap.forEach((value: number, key: string) => {
  if (value > 0) {
    colors[key] = '#';
    for (var i = 0; i < 3; i++) {
      hex = Math.round(startColor[i] + (endColor[i] - startColor[i]) * (value == max ? 1 : (value / (max - min)))).toString(16);
      if (hex.length == 1) { hex = '0' + hex; }
      colors[key] += (hex.length == 1 ? '0' : '') + hex;
    }
  }
});

jQuery('#vmap').vectorMap('set', 'colors', colors);

jqvmap - applying color to multiple states/regions

3 Answers3