angular-datamaps not filling proper colour if “id” of a location has space

Question

For angular-datamaps, Assume this is my mapObject and I have location names with id's ("AZ", "CO", "AZ CO", "CO AB") (exactly along with space)

$scope.mapObject = {
  scope: 'usa',
  options: {
    width: 1110,
    legendHeight: 60 // optionally set the padding for the legend
  },
  geographyConfig: {
    highlighBorderColor: '#EAA9A8',
    highlighBorderWidth: 2
  },
  fills: {
    'HIGH': '#CC4731',
    'MEDIUM': '#306596',
    'LOW': '#667FAF',
    'defaultFill': '#DDDDDD'
  },
  data: {
    "AZ": {
      "fillKey": "MEDIUM",
    },
    "CO": {
     "fillKey": "HIGH",
    },
    "AZ CO": {
      "fillKey": "LOW",
    },
    "CO AB": {
      "fillKey": "MEDIUM",
    }
  },
}

When map is rendered, Colors filled is: Medium for AZ, High for CO, High for "AZ CO", High for "CO AB".

If "AZ" and "CO" values are in a different order (first "CO", then "AZ") inside data, then Colors filled are High for CO, Medium for AZ, Medium for "AZ CO", High for "CO AB"

What do I do to get the corresponding colors without these locations overriding them?

TIA.

Answer 1

Here is a suggestion:

var locations = $scope.mapObject.data;
var colors = $scope.mapObject.fills;

var locationsColors = {};
var dataFormatted = [];
for (location in locations) {
  locationsColors[location] = colors[locations[location].fillKey];
}
console.log("Object of Locations Colors mapping : ", locationsColors);
console.log("Color of 'AZ CO' for example is : ", locationsColors["AZ CO"]);