How To Get Multiple Areas From Dragging Selection Box in HighMaps

Question

Using HighMaps we are trying to let users select multiple areas. This works fine if the user clicks and then does SHIFT-click on the other areas they want. In HighCharts we can use a draggable box to select multiple points (like in a scatter chart). I would like to allow this similar drag to select option in HighMaps. A naive example is here . This is non functional.

I think the solution involves what is also used for the mouse hover effect. Such that when the mouse cursor enters the area the entire area is highlighted. If I could modify this code to my purposes such that the draggable box extent would be the trigger for hover as well.

chart: {
  events: {
    selection: function(event) {
      for (var i = 0; i < this.series[0].data.length; i++) {
        var point = this.series[0].data[i];
        if (point.x > event.xAxis[0].min &&
          point.x < event.xAxis[0].max &&
          point.y > event.yAxis[0].min &&
          point.y < event.yAxis[0].max) {
          point.select(true, true);
        }
      }
      return false;
    }
  },
  zoomType: 'xy'
},

Answer 1

You need to compare the right x and y values:

events: {
    selection: function(event) {
        for (var i = 0; i < this.series[0].data.length; i++) {
            var point = this.series[0].data[i],
                xAxis = event.xAxis[0],
                yAxis = event.yAxis[0];

            if (point.graphic) {
                if (point._minX > xAxis.min &&
                    point._maxX < xAxis.max &&
                    point._minY > yAxis.min &&
                    point._maxY < yAxis.max) {

                    point.select(true, true);
                }
            }
        }
        return false;
    }
}

Live demo: https://jsfiddle.net/BlackLabel/m4ubd0z2/