CODEWITHSUNDEEP
highcharts
sfjeld
sfjeld

Reputation: 39

How do I stop a highmap from zooming in when I click on a point?

I've set up a U.S. Map using HighMaps with several series of data points. I've disabled the onmouseover default behavior and am using onclick instead for accessibility and mobile usage. However, when I click on a map point, the map zooms in. How do I disable this?

I don't want to disable all zooming because some points are quite close. The issues seems to be in the plotoptions section of code (when I remove it, it doesn't zoom, but the onclick doesn't work either)

See JS Fiddle code here: https://jsfiddle.net/sfjeld/znd03gxL/47/ 

var tooltipEnabled = true;
// Create the chart
Highcharts.mapChart('container', {
chart: {
    map: 'countries/us/us-all'
},

title: {
    text: 'InSPIRE Project Sites'
},
legend: {
        title: {
            text: 'Select from the options below to display all sites using that technology.'
        }
},
credits: {
    enabled: false
},
mapNavigation: {
    enabled: false,
    buttonOptions: {
        verticalAlign: 'top'
    }
},

tooltip: {
    headerFormat: '',
    pointFormat: '<span style="color:#0079C2;font-weight:bold; font-size:110%"><b>{point.name}</b></span><br><b>Primary Research:</b> {point.research}<br>{point.desc}<br><br><b>Partners:</b> {point.partners}',
    useHTML: true,
    enabled: false
},

plotOptions: {
    series: {
      events: {
      click: function() {
        this.chart.update({
          tooltip: {
            enabled: tooltipEnabled
          }
        });
        tooltipEnabled = tooltipEnabled ? false : true;
        disableHover = false;
      }

  },
        dataLabels: {
            enabled: false
        },
        marker: {
            states: {
                hover: {
                    enabled: true
                }
            }
        }
    }
},

I expect it not to zoom when I click on a point.

Upvotes: 0

Views: 535

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can achieve what you expect by making an update on tooltip itself and not updating the whole chart. Check demo and code posted below.

  plotOptions: {
    mappoint: {
      events: {
        click: function() {
          this.chart.tooltip.update({
            enabled: tooltipEnabled
          });

          tooltipEnabled = tooltipEnabled ? false : true;
          disableHover = false;
        }
      },
      dataLabels: {
        enabled: false
      },
      marker: {
        states: {
          hover: {
            enabled: true
          }
        }
      }
    }
  }

Demo:

Upvotes: 1

Related Questions