anaxjk
Posts: 37
Joined: Thu Nov 10, 2016 2:59 pm

Hello everyone ,

I have a question about a map with mappoints: Is it possible to draw a radius circle for a certain point. For example, to show what is within a radius of 25 kilometers of this one point?

Thank you very much
jedrzej.r
Posts: 695
Joined: Tue Jan 24, 2023 11:21 am

Hi!

Thanks for reaching out to us with your question!

Of course, for example you can update the mappoint marker radius to a higher value based on some condition, e.g. point y value. by iterating through each point of the series.

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

API:
https://api.highcharts.com/class-refere ... int#update
https://api.highcharts.com/class-refere ... art#redraw

Let me know if that's what you were looking for!
Best regards!
Jędrzej Ruta
Highcharts Developer
anaxjk
Posts: 37
Joined: Thu Nov 10, 2016 2:59 pm

Hi Jędrzej,

I was thinking more of something like this: https://jsfiddle.net/geocodezip/jh97kgz6/2/

So starting from the mappoint a circle with a certain radius, which is not lost or gets smaller when zooming.

Best regards
jedrzej.r
Posts: 695
Joined: Tue Jan 24, 2023 11:21 am

I see, in this case it can be done in two ways:

1. By creating a mapbubble series before the mappoint series, where certain points would have a lat, lon, & z value, so that the bubble is created directly beneath the mappoint. This approach has a downside, as the bubble gets resized on zoom, meaning that on smaller zoom it will be visibly larger.

2. You can incorporate Highcharts SVGRenderer class and render circles in the position of map points with an opacity. First, on initial load you can iterate through points and based on your condition render circles based on point's plotX and plotY values. Then, on render event, you can adjust it's position.

Demo with both solutions: https://jsfiddle.net/BlackLabel/17whn8eo/

API:
https://api.highcharts.com/highmaps/series.mapbubble
https://api.highcharts.com/highmaps/chart.events.render
https://api.highcharts.com/class-refere ... rer#circle
https://api.highcharts.com/class-refere ... ement#attr

Let me know which solution suits you best!
Best regards!
Jędrzej Ruta
Highcharts Developer
anaxjk
Posts: 37
Joined: Thu Nov 10, 2016 2:59 pm

Solution number two probably works better. I can place a circle exactly over the desired mappoint and also set the radius correctly. Unfortunately, the circle gets smaller when I zoom in. However, it should always cover the same area. Do you have any ideas on this? You can reset the radius in the render method, but how should I recalculate the new value depending on the zoom?

Thank you very much
jedrzej.r
Posts: 695
Joined: Tue Jan 24, 2023 11:21 am

I'm afraid there isn't any straight forward solution, as the radius of the circle is represented in pixels and not directly translated into a map scale radius (in e.g. kilometers). If you have information about map scale and geographical projection, you could calculate the distance from the point using Haversine formula, and then translate the values into pixel's distance.

If you believe that such feature should be available in Highchart Maps (creating a radius of point based on given distance), than you can propose it as a feature request on GitHub repository: https://github.com/highcharts/highchart ... .md&title=

In case of any other questions, don't hesitate to ask again.
Best regards!
Jędrzej Ruta
Highcharts Developer
anaxjk
Posts: 37
Joined: Thu Nov 10, 2016 2:59 pm

Ok, thank you very much. but so far i haven't found a really working algorithm for the calculation. So i have to put my customer off for the time being. At the same time i have made a feature request.

Best regards
Dronax
Posts: 13
Joined: Sat Jan 16, 2021 10:39 pm

Hello, I didn't want to create another topic, since I have a simple question: Is it possible to give radius to each point depending on a value, instead of applying the same radius on all of the points ?
jedrzej.r
Posts: 695
Joined: Tue Jan 24, 2023 11:21 am

Hi again!

Of course, it is possible! You can iterate through each point in the initial load and create a radius based on the value (or any other property). Keep in mind that it's a good idea to store a reference to this points in an array, so on rerender their position can be adjusted.

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

Let me know if that's what you were looking for!
Best regards!
Jędrzej Ruta
Highcharts Developer
anaxjk
Posts: 37
Joined: Thu Nov 10, 2016 2:59 pm

My feature request was closed as not planned .

Now I have to see how I can calculate the radius correctly. First initially and then when zooming. I didn't want to use google maps for this......

Greetings
jedrzej.r
Posts: 695
Joined: Tue Jan 24, 2023 11:21 am