CODEWITHSUNDEEP
jqueryjqvmap
jcaponi
jcaponi

Reputation: 389

jqvmap - applying color to multiple states/regions

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

Upvotes: 3

Views: 4677

Answers (3)

AbdurrahmanY
AbdurrahmanY

Reputation: 883

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);

Upvotes: 1

Andy K
Andy K

Reputation: 7282

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});

Upvotes: 4

Alex
Alex

Reputation: 41

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

Upvotes: 4

Related Questions