dent_suuuuu
Posts: 1
Joined: Tue Dec 29, 2020 12:27 pm

Change min/maxSize of bubble on zoom [HighchartMaps / BubbleMaps]

Hello,

I have done a lot of google but haven't found a good way to get this done.

I have a bubble map showing some data, with a fixed minSize and maxSize (16)
The mapOptions are almost identical to the map in this demo: https://www.highcharts.com/demo/maps/ma ... grid-light

I was wondering if there was a way to increase the bubble size (min and max for my specific use case) as a user zooms into the map. If you look at link above, and try zooming into Canada, notice how the bubble stays the same size even though the country is a lot bigger.

I've done something similar to this using Mapbox before, and was wondering if there was a way to do this with Highcharts too using zoom events or something similar

change data colour based on zoom level using Mapbox
https://docs.mapbox.com/mapbox-gl-js/ex ... n-density/
dominik.c
Posts: 2081
Joined: Fri Aug 07, 2020 7:07 am

Re: Change min/maxSize of bubble on zoom [HighchartMaps / BubbleMaps]

Hello dent_suuuuu!

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

We can manipulate the size of the bubbles using onClick functions that are placed in zoomIn, zoomOut buttons. There we can update our series maxSize property however we like. :)

API references:
https://api.highcharts.com/highmaps/map ... ut.onclick
https://api.highcharts.com/highmaps/map ... In.onclick

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

Let me know if that was what you were looking for!
Best regards!
Dominik Chudy
Highcharts Developer

Return to “Highcharts Maps”