We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Is there a builtin feature to create bubble map base on their geoinfo?

Thread ID:





149528 Nov 28,2019 11:22 PM UTC Nov 29,2019 10:59 AM UTC Blazor 1
Tags: Maps
Asked On November 28, 2019 11:22 PM UTC


I'm just trying to create bubble map, and for those bubbles I only have their latitude and longitude and another metric I'd like to present. It appears to me that we can render markers with the geo-info but cannot automatically change their size, while with the bubble map we can change their size but cannot directly assign their latitude and longitude. Is there a builtin feature or some ways to workaround?


Arun Raji [Syncfusion]
Replied On November 29, 2019 10:59 AM UTC

Hi Feifan, 
Greetings from Syncfusion. 
We have validated your reported scenario. As you have stated, bubbles are rendered based on the shapes and not based on the latitude and longitude values. But as an work around, we can achieve the bubble appearance using the markers. We can render bubble shape for respective latitude and longitude by using Circle shape of a marker by using shape property in MapsMarker tag. And also customize the marker size and fill color from the properties of Height, Width and Fill. 
We have prepared a simple blazor sample in below location for your reference. Could you please confirm us whether it will meet your requirement. 
Code snippet –  
    <MapsZoomSettings Enable="true"></MapsZoomSettings> 
        <MapsLayer ShapeData="@shapeMap"> 
                <MapsMarker Visible="true" DataSource="MarkerDataSource1" AnimationDuration="0" Height="60" Width="60" Fill="red" Shape="MarkerType.Circle"> 
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 
                <MapsMarker Visible="true" DataSource="MarkerDataSource2" AnimationDuration="0" Height="50" Width="30" Fill="blue" Shape="MarkerType.Circle"> 
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 
                <MapsMarker Visible="true" DataSource="MarkerDataSource3" AnimationDuration="0" Height="30" Width="20" Fill="yellow" Shape="MarkerType.Circle"> 
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 
                <MapsMarker Visible="true" DataSource="MarkerDataSource4" AnimationDuration="0" Height="40" Width="40" Fill="green" Shape="MarkerType.Circle"> 
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 
                <MapsMarker Visible="true" DataSource="MarkerDataSource5" AnimationDuration="0" Height="35" Width="55" Fill="orange" Shape="MarkerType.Circle"> 
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 
                <MapsMarker Visible="true" DataSource="MarkerDataSource6" AnimationDuration="0" Height="45" Width="55" Fill="violet" Shape="MarkerType.Circle"> 
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 
                <MapsMarker Visible="true" DataSource="MarkerDataSource7" AnimationDuration="0" Height="75" Width="65" Fill="pink" Shape="MarkerType.Circle"> 
                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 
@code { 
    public MapDataSettings shapeMap = new MapDataSettings 
        async = true, 
        dataOptions = "scripts/MapsData/WorldMap.json", 
        type = "GET" 
    public class MapDataSettings 
        public Boolean async { get; set; } 
        public String dataOptions { get; set; } 
        public String type { get; set; } 
    public class MarkerData 
        public double latitude; 
        public double longitude; 
        public string name; 
    public List<MarkerData> MarkerDataSource1 = new List<MarkerData> { 
        new MarkerData { latitude= 37.6276571, longitude= -122.4276688, name= "San Bruno" } 
    public List<MarkerData> MarkerDataSource2 = new List<MarkerData> { 
        new MarkerData { latitude= 35.6628744, longitude= 139.7345469, name= "Minato" } 
    public List<MarkerData> MarkerDataSource3 = new List<MarkerData> { 
        new MarkerData { latitude= 51.5326602, longitude= -0.1262422, name= "London" } 
    public List<MarkerData> MarkerDataSource4 = new List<MarkerData> { 
        new MarkerData { latitude= 19.1555762, longitude= 72.8849595, name= "Mumbai" } 
    public List<MarkerData> MarkerDataSource5 = new List<MarkerData> { 
        new MarkerData { latitude= 52.4643089, longitude= 13.4107368, name= "Berlin" } 
    public List<MarkerData> MarkerDataSource6 = new List<MarkerData> { 
        new MarkerData { latitude= -23.5268201, longitude= -46.6489927, name= "Bom Retiro" } 
    public List<MarkerData> MarkerDataSource7 = new List<MarkerData> { 
        new MarkerData { latitude= 63.802066, longitude= 99.448470, name= "Russia" } 
Output Screenshot –  
Please let us know if you have any other concern. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon