LorenzHW
Posts: 3
Joined: Tue May 17, 2022 10:04 pm

Bubble Map with Bubble series (Zooming + Panning)

Hello, we try to build a map of clusters where we give the user the possibility to explore different clusters and their children. It is similar to G-Maps, except of countries there clusters and child-clusters. A gif of our ideal bubble map: https://giphy.com/gifs/Hd63YwduKHd1Q4jDlk/fullscreen.

Our current approach uses a bubble series. jsfiddle: https://jsfiddle.net/n02q9otw/83/
I marked everything that is NOT FEASIBLE with that approach.

The requirements are like this:
  • Exploration map (similar to Google Maps) where the user can explore different clusters
  • Panning: The user should be able to pan around in the map on the initial render --> NOT FEASIBLE
  • Zooming: The user should be able to zoom in and zoom out
    • When zooming the cluster size should increase (similar to G-Maps: When zooming in the country increases) --> NOT FEASIBLE: Zoom in on any bubble. Width and height of the bubble stays the same
    • Preferable with mouse wheel --> NOT FEASIBLE
    • Zoom out preferable step by step --> NOT FEASIBLE
  • Clusters inside cluster:
    • Zoom: Zooming in clusters should stay at their position. --> NOT FEASIBLE: Zoom in on Parent-1-child-1. The child bubble won't stay inside.
I think the most important one is that when the user zooms in the cluster size actually increases. Is this possible with Highcharts?
Because then we would also have some logic that the name of the bubble is shown, once the bubble has enough width.

Maybe related:
- https://github.com/highcharts/highcharts/issues/9527
- https://github.com/highcharts/highcharts/issues/1673

Thanks!
LorenzHW
Posts: 3
Joined: Tue May 17, 2022 10:04 pm

Re: Bubble Map with Bubble series (Zooming + Panning)

So the zoom effect I want to have is like this: https://observablehq.com/@d3/zoom

I think this might also be a good alternative: https://echarts.apache.org/examples/en/ ... ng-with-d3
LorenzHW
Posts: 3
Joined: Tue May 17, 2022 10:04 pm

Re: Bubble Map with Bubble series (Zooming + Panning)

I also investigate packedbubble of highcharts in combination with drilling down: https://www.highcharts.com/docs/chart-a ... ked-bubble

But I think it is a very limited approach
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Bubble Map with Bubble series (Zooming + Panning)

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

These requirements you have mentioned are not implemented in bubble series. I suggest you consider using Highcharts Maps. In this package features, you have mentioned in your posts are implemented. You can check some demos here: https://www.highcharts.com/demo/maps

Feel free to ask any further questions!
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”