rushikesh378
Posts: 6
Joined: Wed Feb 10, 2021 9:27 am

Add static popups/text around maps. Connect points using lines and place popups around maps

Using highmaps, I want to achieve the map attached in the screenshot.
I want to show more static information for the points plotted on the maps using the lines and popups.
Can this be achieved in highcharts/highmaps using some module
img2 (1).png
img2 (1).png (71.84 KiB) Viewed 2099 times
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Add static popups/text around maps. Connect points using lines and place popups around maps

Hello rushikesh378!

Welcome to our forum and thanks for contacting us with your question!

We can add pins/text to our map in a bunch of ways.

Firstly we can define a new mappoint series, it's a special form of scatter series where the points can be laid out in map coordinates on top of a map.

API references:
https://api.highcharts.com/highmaps/plo ... s.mappoint

Demo:
https://jsfiddle.net/BlackLabel/ruz4awme/

Secondly, we can use the annotations module, which allows us to annotate a chart freely with labels and shapes.

API references:
https://www.highcharts.com/docs/advance ... ons-module
https://api.highcharts.com/highcharts/annotations

Demo:
https://jsfiddle.net/BlackLabel/7snv59zp/

Let me know if that was what you were looking for!
Best regards!
Dominik Chudy
Highcharts Developer
rushikesh378
Posts: 6
Joined: Wed Feb 10, 2021 9:27 am

Re: Add static popups/text around maps. Connect points using lines and place popups around maps

Hi dominik.c,


Thanks for the reply. I tried the annotations module and I think i can achieve the map thing using this.

I just needed help/advise in plotting the annotations at right positions based on the lat long points on the map and also drawing lines from that points. As currently due to the x and y coordinates I am having hard time plotting annotations boxes exactly above my lat long co-ordinates or drawing a line to the annotation popup outside the map from the lat long position.

Hope this can be done...
Thanks again!
dominik.c wrote: Hello rushikesh378!

Welcome to our forum and thanks for contacting us with your question!

We can add pins/text to our map in a bunch of ways.

Firstly we can define a new mappoint series, it's a special form of scatter series where the points can be laid out in map coordinates on top of a map.

API references:
https://api.highcharts.com/highmaps/plo ... s.mappoint

Demo:
https://jsfiddle.net/BlackLabel/ruz4awme/

Secondly, we can use the annotations module, which allows us to annotate a chart freely with labels and shapes.

API references:
https://www.highcharts.com/docs/advance ... ons-module
https://api.highcharts.com/highcharts/annotations

Demo:
https://jsfiddle.net/BlackLabel/7snv59zp/

Let me know if that was what you were looking for!
Best regards!
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Add static popups/text around maps. Connect points using lines and place popups around maps

Hi again!

I would suggest using SVG Renderer to render the lines that will connect our point (countries) with the position of annotations on the chart. We only need to set coordinates for annotations position and then render the lines with correct positions of points (chart.plotLeft+point.plotX, etc.)

API references:
https://api.highcharts.com/class-refere ... VGRenderer

Demo:
https://jsfiddle.net/BlackLabel/5bvzefah/

Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Maps”