Multiple Bubbles in One Country

[Robert]

Hi !

Thanks in advance to anyone that can help me out with this, as I feel someone must have had a very similar problem in the past.

I am using the Bubbles on a Map Syncfusion element to display the size of various companies around the world. It is working perfectly for the most part, however when I have multiple companies in one country, their bubbles just share a common center which looks terrible and means you can't really click on them to take you through to details about them. I'd ideally like the bubbles to be randomly positioned inside the country I think (unless there's an even better solution), so how would I go about this?

Thanks everyone !

[Indumathi Ravi]

Hi Robert,

Bubbles in the Maps component are used to visualize the data mapped to the shape as bubble shapes. Since the bubble is mapped to the shape, it will be rendered at the center of the map shape. If we have more bubbles for a single shape, the bubble will be overlapped with other bubbles bound to the shape. This is a valid behavior of the bubbles in the Maps.

However, to achieve your requirement, you can use markers in the Maps component. When the marker shape is set as “Circle”, it will appear like a bubble. The marker can be placed in a specific location using the “latitude” and “longitude” properties set in the data source. The size of the marker can be customized using “Width” and “Height” properties. Please find the sample and video created to demonstrate the same and it can be found from the below links.

Sample: https://www.syncfusion.com/downloads/support/forum/181231/ze/WebApplication4-1859113704

Video: https://www.syncfusion.com/downloads/support/forum/181231/ze/mapsbubble1569306345

NOTE: When markers are placed in many locations in a country shape, they may appear to overlap. But, when we zoom-in on the map, the markers will appear in the appropriate locations where we can click and view the desired details. Or alternately, you can use a maker cluster to avoid overlapping cases. You can refer to our online UG and demo.

MARKER DOCUMENTATION: https://ej2.syncfusion.com/aspnetmvc/documentation/maps/markers

MARKER CLUSTER DOCUMENTATION: https://ej2.syncfusion.com/aspnetmvc/documentation/maps/markers#marker-clustering

MARKER CLUSTER DEMO: https://ej2.syncfusion.com/demos/#/bootstrap5/maps/marker-cluster.html

Please let us know if the above solution meets your requirement.