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

[Feifan]

Hi, 

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?

Regards

[Arun Raji]

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 –  

<EjsMaps> 

    <MapsZoomSettings Enable="true"></MapsZoomSettings> 

    <MapsLayers> 

        <MapsLayer ShapeData="@shapeMap"> 

            <MapsMarkerSettings> 

                <MapsMarker Visible="true" DataSource="MarkerDataSource1" AnimationDuration="0" Height="60" Width="60" Fill="red" Shape="MarkerType.Circle"> 

                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 

                </MapsMarker> 

                <MapsMarker Visible="true" DataSource="MarkerDataSource2" AnimationDuration="0" Height="50" Width="30" Fill="blue" Shape="MarkerType.Circle"> 

                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 

                </MapsMarker> 

                <MapsMarker Visible="true" DataSource="MarkerDataSource3" AnimationDuration="0" Height="30" Width="20" Fill="yellow" Shape="MarkerType.Circle"> 

                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 

                </MapsMarker> 

                <MapsMarker Visible="true" DataSource="MarkerDataSource4" AnimationDuration="0" Height="40" Width="40" Fill="green" Shape="MarkerType.Circle"> 

                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 

                </MapsMarker> 

                <MapsMarker Visible="true" DataSource="MarkerDataSource5" AnimationDuration="0" Height="35" Width="55" Fill="orange" Shape="MarkerType.Circle"> 

                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 

                </MapsMarker> 

                <MapsMarker Visible="true" DataSource="MarkerDataSource6" AnimationDuration="0" Height="45" Width="55" Fill="violet" Shape="MarkerType.Circle"> 

                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 

                </MapsMarker> 

                <MapsMarker Visible="true" DataSource="MarkerDataSource7" AnimationDuration="0" Height="75" Width="65" Fill="pink" Shape="MarkerType.Circle"> 

                    <MapsMarkerTooltipSettings Visible="true" ValuePath="name"></MapsMarkerTooltipSettings> 

                </MapsMarker> 

            </MapsMarkerSettings> 

        </MapsLayer> 

    </MapsLayers> 

</EjsMaps> 

@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" } 

    }; 

} 

 

Blazor Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp-1050299972  

 

Output Screenshot –  

 

 

Please let us know if you have any other concern. 

 

Thanks,
Arun