Highcharts map appending unwanted data

Question

I have a small problem with my Highcharts maps. I managed to get it plotting the data I want and even included a selector so the user can adjust which data series is shown. However, it appears that after rendering one particular series once, the Map is appending data objects to each series for those U.S. territories I don't have data for. My biggest series has 53 data objects (US States plus DC, Puerto Rico, Virgin Islands) but after being rendered once the series shows up with 62 structures including those for which I didn't have data (Saint John, Saipan, etc.). This is causing problems with the snippet of code I use to change the state code to the hc-key format needed by this map. While I could just add some extra checks to that function, i would like to understand why Highcharts is adding data to my data structures. Any help would be most appreciated. My Javascript code is below:

<script type="text/javascript">
  var states ={resStates: [{code: "AK",value:3},{code: "AL",value:49},{code: "AR",value:9},{code: "AZ",value:28},{code: "CA",value:170},{code: "CO",value:26},{code: "CT",value:12},{code: "DC",value:10},{code: "DE",value:5},{code: "FL",value:126},{code: "GA",value:51},{code: "HI",value:7},{code: "IA",value:5},{code: "ID",value:13},{code: "IL",value:31},{code: "IN",value:28},{code: "KS",value:15},{code: "KY",value:12},{code: "LA",value:17},{code: "MA",value:54},{code: "MD",value:124},{code: "ME",value:13},{code: "MI",value:60},{code: "MN",value:8},{code: "MO",value:19},{code: "MS",value:16},{code: "MT",value:6},{code: "NC",value:43},{code: "ND",value:3},{code: "NE",value:10},{code: "NH",value:14},{code: "NJ",value:72},{code: "NM",value:35},{code: "NV",value:7},{code: "NY",value:70},{code: "OH",value:84},{code: "OK",value:23},{code: "OR",value:11},{code: "PA",value:101},{code: "PR",value:2},{code: "RI",value:20},{code: "SC",value:26},{code: "SD",value:5},{code: "TN",value:19},{code: "TX",value:91},{code: "UT",value:67},{code: "VA",value:112},{code: "VI",value:1},{code: "VT",value:1},{code: "WA",value:29},{code: "WI",value:13},{code: "WV",value:2},{code: "WY",value:4}],
               acadStates: [{code: "AK",value:1},{code: "AL",value:47},{code: "AR",value:12},{code: "AZ",value:31},{code: "CA",value:163},{code: "CO",value:34},{code: "CT",value:9},{code: "DC",value:18},{code: "DE",value:7},{code: "FL",value:121},{code: "GA",value:80},{code: "HI",value:6},{code: "IA",value:9},{code: "ID",value:9},{code: "IL",value:29},{code: "IN",value:55},{code: "KS",value:16},{code: "KY",value:8},{code: "LA",value:14},{code: "MA",value:65},{code: "MD",value:81},{code: "ME",value:8},{code: "MI",value:66},{code: "MN",value:7},{code: "MO",value:20},{code: "MS",value:13},{code: "MT",value:4},{code: "NB",value:1},{code: "NC",value:53},{code: "ND",value:4},{code: "NE",value:8},{code: "NH",value:13},{code: "NJ",value:32},{code: "NM",value:32},{code: "NV",value:4},{code: "NY",value:93},{code: "OH",value:83},{code: "OK",value:25},{code: "OR",value:7},{code: "PA",value:123},{code: "PR",value:2},{code: "RI",value:15},{code: "SC",value:17},{code: "SD",value:4},{code: "TN",value:9},{code: "TX",value:103},{code: "UT",value:62},{code: "VA",value:114},{code: "VT",value:2},{code: "WA",value:27},{code: "WI",value:19},{code: "WV",value:4},{code: "WY",value:4}],
               empStates: [{code: "AK",value:2},{code: "AL",value:71},{code: "AR",value:4},{code: "AZ",value:12},{code: "CA",value:235},{code: "CO",value:1},{code: "DC",value:36},{code: "FL",value:104},{code: "GA",value:70},{code: "HI",value:5},{code: "IL",value:17},{code: "IN",value:18},{code: "KS",value:14},{code: "LA",value:5},{code: "MA",value:61},{code: "MD",value:244},{code: "MI",value:39},{code: "MN",value:3},{code: "MO",value:4},{code: "MS",value:64},{code: "NC",value:22},{code: "NE",value:2},{code: "NH",value:20},{code: "NJ",value:62},{code: "NM",value:95},{code: "NY",value:22},{code: "OH",value:133},{code: "OK",value:53},{code: "OR",value:7},{code: "PA",value:38},{code: "RI",value:37},{code: "SC",value:26},{code: "TN",value:9},{code: "TX",value:22},{code: "UT",value:75},{code: "VA",value:126},{code: "WA",value:22},{code: "WV",value:2}]};


  $(init)
  function init() {
    drawMap();
  }
  function drawMap() {
    var map_select = $('#smartStates').val();
    var map_text = $('#smartStates option:selected').text();
    var mydata = states[map_select];
    var mycolors = {resStates: {
            min: 1,
            type: 'linear',
            minColor: '#EEEEFF',
            maxColor: '#000022',
            stops: [
                [0, '#EFEFFF'],
                [0.67, '#4444FF'],
                [1, '#000022']
            ]
        }, acadStates: {
            min: 1,
            type: 'linear',
            minColor: '#FFEEEE',
            maxColor: '#220000',
            stops: [
                [0, '#FFFFEE'],
                [0.67, '#FF4444'],
                [1, '#220000']
            ]
        }, empStates: {
            min: 1,
            type: 'linear',
            minColor: '#EEFFEE',
            maxColor: '#002200',
            stops: [
                [0, '#EEFFEE'],
                [0.67, '#44FF44'],
                [1, '#002200']
            ]
        }
        }

  // Adjusting codes to fit with the us-all-territories map
  $.each(mydata, function(){ //looping through each instance of mydata
     if (this.code == "PR") {
      this.code = "pr-3614";
     } else if (this.code == "undefined"){
      //not sure what to do here
     }
    else if (this.code.length==2) {
      this.code = "us-" + this.code.toLowerCase();
     }

  });
  // Instanciate the map
    $('#container').highcharts('Map', {

        chart : {
            borderWidth : 1
        },

        title : {
            text : 'SMART Participant Counts by ' + map_text
        },

        legend: {
            layout: 'horizontal',
            borderWidth: 0,
            backgroundColor: 'rgba(255,255,255,0.85)',
            floating: true,
            verticalAlign: 'top',
            y: 25
        },

        mapNavigation: {
            enabled: true
        },

        colorAxis: mycolors[map_select],

        series : [{
            animation: {
                duration: 1000
            },
            data : mydata,
            mapData: Highcharts.maps['countries/us/custom/us-all-territories'],
            joinBy: ['hc-key', 'code'],
            dataLabels: {
                enabled: true,
                color: '#FFFFFF',
                format: '{point.name}'
            },
            name: 'SMART Participants',
            tooltip: {
                pointFormat: '{point.name}: {point.value} participants'
            }
        }]
    });
  }

</script>

Answer 1

This is because in your mapData property you have this:

mapData: Highcharts.maps['countries/us/custom/us-all-territories'],

us-all-territories, but as you stated, you don't have the data for all of the territories.

The solution is to use a different custom map from Highcharts, unfortunately it doesn't look like they have one with only the US territories you are looking for.

Update: as the comment by Kacper has mentioned: If you set allAreas in series to false, then empty map zones will not be displayed. Example: http://jsfiddle.net/oen00hec/