fff000
Posts: 7
Joined: Thu Mar 10, 2022 8:37 am

Map Click with Details

Hi,
I'm using ph-all.geo.json. How do I get the details of selected Region/Province on a card and not on tooltip?
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Map Click with Details

Hello,

You can disable tooltip and use series.mappoint.point.events.click callback function to pass point details to some part of the page.

Demo: https://jsfiddle.net/BlackLabel/wrgsuy94/
API: https://api.highcharts.com/highmaps/ser ... ents.click

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
fff000
Posts: 7
Joined: Thu Mar 10, 2022 8:37 am

Re: Map Click with Details

Thank you for the answer. I was wondering if how could I do it using Angular/TypeScript. I'm using this:

<highcharts-chart class="border" id="container" [Highcharts]="Highcharts" [constructorType]="chartConstructor"
[options]="chartOptions" style="width: 100%; height: 1000px; display: block;">
</highcharts-chart>

Highcharts: typeof Highcharts = Highcharts;
chartConstructor = 'mapChart';

chartOptions: Highcharts.Options = {

}
fff000
Posts: 7
Joined: Thu Mar 10, 2022 8:37 am

Re: Map Click with Details

I still can't display the points after adding lat and lon. Is there anything that I haven't done yet or forgotten to add?
This is my whole ts file

import { Component, OnInit } from '@angular/core';
import Highcharts from 'highcharts/highmaps';
import PHMap from '@highcharts/map-collection/countries/ph/ph-all.geo.json';

@Component({
selector: 'app-national-hotspot-location',
templateUrl: './national-hotspot-location.component.html',
styleUrls: ['./national-hotspot-location.component.scss'],
})
export class NationalHotspotLocationComponent implements OnInit {
Highcharts: typeof Highcharts = Highcharts;
chartConstructor = 'mapChart';

data: any[] = [
['ph-mn', 10],
['ph-4218', 11],
['ph-tt', 12],
['ph-bo', 13],
['ph-cb', 14],
['ph-bs', 15],
['ph-2603', 16],
['ph-su', 17],
['ph-aq', 18],
['ph-pl', 19],
['ph-ro', 20],
['ph-al', 21],
['ph-cs', 22],
['ph-6999', 23],
['ph-bn', 24],
['ph-cg', 25],
['ph-pn', 26],
['ph-bt', 27],
['ph-mc', 28],
['ph-qz', 29],
['ph-es', 30],
];

chartOptions: Highcharts.Options = {
chart: {
// map: PHMap,
backgroundColor: 'transparent',
},
title: {
text: '',
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'top',
},
},
legend: {
enabled: false,
},
tooltip: {
enabled: false,
stickOnContact: true,
useHTML: false,
headerFormat: '',
pointFormat:
'<b>{point.name}</b><br>Region: <b>{point.properties.region}</b> <br>Latitude: <b>{point.properties.latitude}</b> <br>Longitude: <b>{point.properties.longitude}</b>',
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic',
},
credits: {
enabled: false,
},

plotOptions: {
mappoint: {
color: 'red',
marker: {
color: 'red',
fillColor: 'red',
},
},
},
series: [
{
mapData: PHMap,
data: this.data,
animation: true,
type: 'map',
},
{
name: 'Cities',
type: 'mappoint',
data: [
{
name: 'Manila',
lat: 14.5995,
lon: 120.9842,
},
{
name: 'Davao City',
lat: 7.1907,
lon: 125.4553,
},
],
point: {
events: {
click: function () {
this.series.chart.update({
tooltip: {
enabled: true,
},
});
},
mouseOut: function () {
this.series.chart.update({
tooltip: {
enabled: false,
},
});
},
},
},
},
],
};

constructor() {}

ngOnInit() {
console.log(this.chartOptions);
}
}
fff000
Posts: 7
Joined: Thu Mar 10, 2022 8:37 am

Re: Map Click with Details

I tried to make the point to display but the point isn't placed to where it should be.

Code: Select all

chartOptions: Highcharts.Options = {
    chart: {
      map: PHMap,
      backgroundColor: 'transparent',
    },
    title: {
      text: '',
    },
    mapNavigation: {
      enabled: true,
      buttonOptions: {
        verticalAlign: 'top',
      },
    },
    legend: {
      enabled: false,
    },
    tooltip: {
      enabled: false,
      stickOnContact: true,
      useHTML: false,
      headerFormat: '',
      pointFormat:
        '<b>{point.name}</b><br>Region: <b>{point.properties.region}</b> <br>Latitude: <b>{point.properties.latitude}</b> <br>Longitude: <b>{point.properties.longitude}</b>',
    },
    colorAxis: {
      min: 1,
      max: 1000,
      type: 'logarithmic',
    },
    credits: {
      enabled: false,
    },
    series: [
      {
        data: this.data,
        animation: true,
        type: 'map',
      },
      {
        animation: true,
        type: 'mappoint',
        data: [
          {
            name: 'Manila',
            x: 14.5995,
            y: 120.9842,
          },
        ],
        point: {
          events: {
            click: function () {
              this.series.chart.update({
                tooltip: {
                  enabled: true,
                },
              });
            },
            mouseOut: function () {
              this.series.chart.update({
                tooltip: {
                  enabled: false,
                },
              });
            },
          },
        },
      },
    ],
  };
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Map Click with Details

Hi,
Thanks for your message.

The format of map from collections need to be topo.json if you want to work with series type mappoint.

Highmaps Angular demo:
https://stackblitz.com/edit/highcharts- ... mponent.ts

Let me know if you have more questions.
Best regards
Sebastian Hajdus
Highcharts Developer
fff000
Posts: 7
Joined: Thu Mar 10, 2022 8:37 am

Re: Map Click with Details

Thank you so much. I was having an error when using the topo so I tried downgrading @highcharts/map-collection: ^2.0.0 to 1.1.4 and highcharts-angular: ^3.0.0 to 2.10.0 and then it worked. (I also upgraded highcharts ^9.3.0 to 10.0.0).

This helped me a lot thanks!
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Map Click with Details

That's great to hear! :)
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Maps”