Updating the state of the country by clicking on the city

[bulashanin]

Hello! I have a map with the countries and cities in them. Is it possible to change the state of the country's area when clicking on the city's pin? To be exact, I wonder if it is possible to determine the country, for the chosen city?

[daniel_s]

hi bulashanin,

Thank you for contacting us and welcome on our forum.
It's possible to achieve that using point.events.click event handler. Let's assume that you have series with determined towns, and in every town (point), you need to define custom parameter called for example country, and its value have to be the same as the country specific hc-key value. Inside of the event function mentioned above, you need to iterate on every point from first series (countries) and find the pair of the points with the same hc-key and country values. Then you just need to call select() on matched point. Here is the code and example which shows how to do those actions:

Code: Select all

  series: [{
    name: 'Country',
  }, {
    name: 'Town',
    type: 'mappoint',
    data: [{
      name: "Oslo",
      country: 'no',
      lat: 59.91,
      lon: 10.75
    }, {
      name: 'Stockholm',
      country: 'se',
      lat: 59.32,
      lon: 18
    }, {
      name: 'Helsinki',
      country: 'fi',
      lat: 60.16,
      lon: 24.93
    }],
    dataLabels: {
      enabled: true,
      allowOverlap: true
    },
    point: {
      events: {
        click() {
          var countrySeries = this.series.chart.series[0]
          var countries = countrySeries.points

          countries.forEach(point => {
          	// Check whether the point isn't empty and is related to any country
            if (point['hc-key'] === this.country) { 
              point.select()
            }

          })
        }
      }
    }
  }]

Live example: https://jsfiddle.net/2zksbeoq/

API Reference:
https://api.highcharts.com/highmaps/ser ... ents.click
https://api.highcharts.com/class-refere ... int#select

Best regards!