mchaggis
Posts: 5
Joined: Wed Jul 22, 2020 11:51 am

Cluster Expansion when there are multiple points at the same lat/long

I am trying to use Highcharts Maps to plot a series of clubs using the cluster module [https://code.highcharts.com/modules/marker-clusters.js]

This works really well until I hit a cluster that has multiple points are the same lat/long, at which point clicking on a cluster causes the browser to freeze and the following error to be thrown:
attribute transform: Expected number, scale(NaN NaN)
Reading through, I understand what is happening from a mathematical point of view. I tried using a co-ordinate jitter routine, which stopped the browser from crashing, but causes the map to zoom in ridiculously. So this was not the solution.

I have managed to write a work round where the tooltip formatter function detects is a cluster contains only points with the same lat/long and prevents the user from clicking on the cluster marker.

However, what I would like to happen is that when I click on a cluster that only has points for the same lat/long, for the points to be expanded around the central point (I hope that makes sense).

Documentation and examples for clusters on maps seem to be few and far between. Anyone have any suggestions for handling clusters that contain points that share the same lat/long?

many thanks

Al
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Cluster Expansion when there are multiple points at the same lat/long

Hello,

Thanks for contacting us with your question!

Could you reproduce the issue in an online editor that I could work on? You can start here: https://jsfiddle.net/gh/get/library/pur ... ers/europe

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
mchaggis
Posts: 5
Joined: Wed Jul 22, 2020 11:51 am

Re: Cluster Expansion when there are multiple points at the same lat/long

Hi,

I have managed to recreate the issue here: https://jsfiddle.net/3yrgaz5m/8/

You should see a cluster of 8. When you click on the cluster marks, eventually you will se three lots of 2 cluster markers. Clicking on these will just keep zooming in indefinitely as they contains points with the same lat/long

Cheers

Al
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Cluster Expansion when there are multiple points at the same lat/long

Hello,
mchaggis wrote: Tue Apr 05, 2022 5:44 pm This works really well until I hit a cluster that has multiple points are the same lat/long, at which point clicking on a cluster causes the browser to freeze and the following error to be thrown:
attribute transform: Expected number, scale(NaN NaN)
I am not able to reproduce this error in the attached demo.

After showing the demo, now I understand what you mean, although if you set two points in the same place without clusters, the maps will show only one of them, so the cluster module was written so that it does not take it into account.

So what would you like to achieve?

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
User avatar
KacperMadej
Posts: 4632
Joined: Mon Sep 15, 2014 12:43 pm

Re: Cluster Expansion when there are multiple points at the same lat/long

Hi mchaggis

If you have multiple points with the same location you could limit the maximum zoom using maxZoom to avoid zooming too much.
I have managed to write a work round where the tooltip formatter function detects is a cluster contains only points with the same lat/long and prevents the user from clicking on the cluster marker.
You could achieve the same functionality (conditional prevention of the default event ) via API using drillToCluster.

Another solution could be to pre-process the data before using it in Highcharts Maps. Instead of having multiple points with the same location, you could have a single point with more info.

We are still interested in your opinion about the expected behavior so please let us know your thoughts and expectations for this case.

Best regards,
Kacper Madej
Highcharts Developer
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Cluster Expansion when there are multiple points at the same lat/long

You're right, thanks!

We need to solve it, I've reported it on GitHub here: https://github.com/highcharts/highcharts/issues/18785

Here's a working link to this property: https://api.highcharts.com/highmaps/ser ... lToCluster

Best regards,
Jakub
Jakub
Highcharts Developer
ale4ko69
Posts: 15
Joined: Thu Jan 23, 2020 4:25 pm

Re: Cluster Expansion when there are multiple points at the same lat/long

Hi KacperMadej,
I have the same problem.
For example, we designate on the map the location of two computers for the state which we must monitor. These two computers are located in the same building. And so we show the number 2 in the cluster, but it is no longer possible to zoom in to put the cursor on each point separately. And at each individual point, different data are indicated, for example, a person for communication, his phone number, email address, and the organization's name. How can I still achieve the display of two points separately? Right now I making adjusted the coordinates for a separate display on the map slightly... But this is still a workaround.
KacperMadej wrote: Tue Apr 12, 2022 8:28 am Hi mchaggis

If you have multiple points with the same location you could limit the maximum zoom using maxZoom to avoid zooming too much.

Another solution could be to pre-process the data before using it in Highcharts Maps. Instead of having multiple points with the same location, you could have a single point with more info.

We are still interested in your opinion about the expected behavior so please let us know your thoughts and expectations for this case.

Best regards,
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Cluster Expansion when there are multiple points at the same lat/long

Hi,

Thanks!

There's no other way than the one suggested by @KacperMadej - if you want to split two clusterred mappoints they need to have at least slightly different coordinates.

If that solution doesn't satisfy you feel free to post a feature request on our GitHub repository here: https://github.com/highcharts/highcharts

Best regards,
Jakub
Jakub
Highcharts Developer
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Cluster Expansion when there are multiple points at the same lat/long

Sure, no problem! :)

Let me know if you have any more questions.

Best regards,
Jakub
Jakub
Highcharts Developer
ale4ko69
Posts: 15
Joined: Thu Jan 23, 2020 4:25 pm

Re: Cluster Expansion when there are multiple points at the same lat/long

If I know the location (x & y) of a cluster on the map that has two identical points, can I draw custom points based on x & y coordinates rather than latitude & longitude?
How can I draw these elements and hide the cluster? When zooming out, delete them and show the cluster again.

Thanks.
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Cluster Expansion when there are multiple points at the same lat/long

Hi,

You could transform x, y to the lat, lon values with the transformToLatLon function (https://api.highcharts.com/class-refere ... rmToLatLon)

Here's a demo that should help you: https://jsfiddle.net/BlackLabel/u4g0qwdv/

If you apply these functions to the right zoom threshold you should have your solution.

Best regards,
Jakub
Jakub
Highcharts Developer
ale4ko69
Posts: 15
Joined: Thu Jan 23, 2020 4:25 pm

Re: Cluster Expansion when there are multiple points at the same lat/long

Thank you for your answer Jakub,

I'm sorry, I didn't quite understand what x and y you're talking about. I see several coordinates:
chartX, layerX, offsetX, pageX, tiltX, x & y
jakub.s wrote: Thu Apr 20, 2023 7:20 am Hi,

You could transform x, y to the lat, lon values with the transformToLatLon function (https://api.highcharts.com/class-refere ... rmToLatLon)

Here's a demo that should help you: https://jsfiddle.net/BlackLabel/u4g0qwdv/

If you apply these functions to the right zoom threshold you should have your solution.

Best regards,
Jakub
jakub.s
Posts: 1164
Joined: Fri Dec 16, 2022 11:45 am

Re: Cluster Expansion when there are multiple points at the same lat/long

Sure, sorry for the insufficient explanation!

If you want to create a series with Highcharts Maps, you could pass { lat, lon } object to series.data or you could pass [x, y], where x, y are coordinates of the point in terms of projected units (https://api.highcharts.com/highmaps/ser ... int.data.x).

Here's a demo of using x, y in series.data: https://jsfiddle.net/BlackLabel/zbs4a8oj/

If you have a point like this, which has both x and y defined, you can pass this point to the transformToLatLon function (https://api.highcharts.com/class-refere ... rmToLatLon) and get an object with lat and lon defined.

This [x, y] is not chartX, layerX, pageX, but the x coordinate of an individual point in projected units.

You can easily go from x, y to lat, lon and the other way around with these functions:
- https://api.highcharts.com/class-refere ... rmToLatLon (which will return { lat, lon } object from Point with x, y values)
- https://api.highcharts.com/class-refere ... FromLatLon (which will return x, y in projected units from { lat, lon } object)

If you have a point and you know its [x, y] in projected units than you can easily create another point based on that.

---

If you know x, y where x, y are the pixel coordinates of the point on the chart then you'll have to convert the pixels to either x, y in projected units or lat, lon.

You could use the pixelsToLatLon function (https://api.highcharts.com/class-refere ... lsToLonLat).

Here's a demo: https://jsfiddle.net/BlackLabel/y67bvzer/

Please let me know if that's clear!

Best regards,
Jakub
Jakub
Highcharts Developer

Return to “Highcharts Maps”