How to select point on map programmatically?

user_4086797 0
Viewed 471

I have a dropdown with a list of counties to select from on the map. I'm trying to figure out how I can have the county on the map highlighted when it is selected. I cannot find in the API documentation where this is done.

I tried changing the fill color of the point but when you select a new color the code to change it back to its previous color doesn't seem to want to execute.

So essentially, in my on change event code, I want to change the color the selected point by hc-key or id.


$("#county-select").change(function () {
    $('.highcharts-point-select').css('fill', 'rgb(153, 145, 164)');

    $('.county-checkbox').prop('checked', false);
    $('.metric-td').remove();

    let id = $('#county-select').val();
    let fips = $(this).find(':selected').attr('data-fips');
    let point = mapChart.get(fips);
});
highcharts
1 Answers

You could use the allowPointSelect functionality to trigger selections on the map via your dropdown. Here I add the country code as the ID of the point, so that we can use chart.get to get them.

A minimal example, with two buttons to select either Norway or Sweden, exclusively (JSFiddle):

$.getJSON('https://cdn.jsdelivr.net/gh/highcharts/highcharts@v7.0.0/samples/data/world-population-density.json', function (data) {

  for(var i = 0; i < data.length; i++) {
    // Adding ID to data, so we can use "get" to find the points
    data[i].id = data[i].code3;
  }

  // Initiate the chart
  var chart = Highcharts.mapChart('container', {
    series: [{
      data: data,
      mapData: Highcharts.maps['custom/world'],
      joinBy: ['iso-a2', 'code'],
      allowPointSelect: true,
    }]
  });

  $('#selectnor').click(function () {
    chart.get('NOR').select();
  });

  $('#selectswe').click(function () {
    chart.get('SWE').select();
  });
});
user_27329910
Related