Highcharts Maps Drilldown Map From geojson

Question

I need to be able to render a map of the US as a chorpleth of states, then click on a state to just show that state's county divisions as a choropleth. I am using the base demo found here. I expanded that and am running into an issue where the data is not rendering the choropleth (ie, all areas have null value). Our source of the geojson is an internal ESRI service that uses full fips codes for the area identifier and the data contains a property of "Maparea" that I then use in the joinBy clause:

joinBy: ['fips', 'Maparea']

The data is pulled back dynamically from our data source (REST call) but it does not appear that is the cause of this issue as it occurs even with hardcoded data.

This works if I just show the states or just the counties. If I add in the drilldown ability I lose info on the drilldown series and then drilling back up produces and interesting artifact that the national map now has counties as shown for the state I clicked on instead of the state "shape". So, I have two problems:

Drill down does not produce choropleth
Drill up produces corrupt map

I have created a simple demo using CT as the state. Click on it and it should render the counties in CT and a choropleth. Drilling up should just go back to state map. Demo here. Code (minus test data):

// Set drilldown pointers
$.each(statedata.data, function(i) {
  this.drilldown = this.Maparea.substring(0, 2);
});

// Instantiate the map
Highcharts.mapChart('container', {
  chart: {
    map: stateMap,
    events: {
      drilldown: function(e) {
        if (!e.seriesOptions) {
          var chart = this;
          
          //Neded this bit to just show the county shapes
          chart.update({
            chart: {
              map: countyMap
            }
          });
          
          chart.addSeriesAsDrilldown(e.point, [{
            mapData: countyMap
          }, countyData]);

        }

        this.setTitle(null, {
          text: e.point.areaname
        });
      },
      drillup: function() {
        this.setTitle(null, {
          text: ''
        });
      }
    }
  },

  title: {
    text: 'Highcharts Map Drilldown'
  },

  subtitle: {
    text: '',
    floating: true,
    align: 'right',
    y: 50,
    style: {
      fontSize: '16px'
    }
  },

  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },

  colorAxis: {
    min: 0,
    minColor: '#E6E7E8',
    maxColor: '#005645'
  },

  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },

  plotOptions: {
    map: {
      states: {
        hover: {
          color: '#EEDD66'
        }
      }
    }
  },

  series: [{
    map: stateMap
  }, statedata],

  drilldown: {
    activeDataLabelStyle: {
      color: '#FFFFFF',
      textDecoration: 'none',
      textOutline: '1px #000000'
    },
    drillUpButton: {
      relativeTo: 'spacingBox',
      position: {
        x: 0,
        y: 60
      }
    }
  }
});

Sebastian Wędzel Sebastian Wędzel · Accepted Answer · 2020-07-21T09:55:25

Notice that in the official demo the chart.map update doesn't exist - this behaviour changes the working of the drillup functionality.

Try to assign the map to the drilldown data series as:

mapData: Highcharts.geojson(countyMap),

Demo: https://jsfiddle.net/BlackLabel/4hcxeku7/

Is this an output which you want to achieve?

Highcharts Maps Drilldown Map From geojson

1 Answers