Search results

Bubble

Bubbles in the maps control represent the underlying data values of the map. Bubbles are scattered throughout the map shapes that contains bound values.

Bubbles are included when the data binding and the bubbleSettings are set to the shape layers.

To add bubbles to the map, bind the data source to the layer bubbleSeetings and set the valuePath to population. The following example illustrates enabling the bubbles for the world map with datasource.

razor
bubble.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Maps;
@Html.EJS().Maps("maps").LegendSettings(legend => legend.Visible(true)).Layers(l =>
 {
     l.BubbleSettings(bubble =>
     {
         bubble.Visible(true).MinRadius(20).MaxRadius(20).ValuePath("population").DataSource(ViewBag.bubbleData).Add();
     }).ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").Add();
 }).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.world_map = GetWorldMap();
            List<BubbleData> data = new List<BubbleData>
            {
                new BubbleData { name= "India", population= "38332521" },
                new BubbleData { name= "New Zealand", population= "19651127" },
                new BubbleData { name= "Pakistan", population= "3090416" }
            };
            ViewBag.bubbleData = data;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/world_map.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public class BubbleData
        {
            public string name { get; set; }
            public string population { get; set; }
        }
    }
}

Enable legends for bubbles

To enable the legends for bubbles, set the legendSettings.visible to true and legendSettings.type to ‘Bubbles’. Refer to the following code sample to enable the legend for each bubbles with different colors.

razor
bubble-legend.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Maps;
@Html.EJS().Maps("maps").LegendSettings(legend => legend.Visible(true).Type(LegendType.Bubbles)).Layers(l =>
 {
     l.BubbleSettings(bubble =>
     {
         bubble.Visible(true).MinRadius(20).MaxRadius(20).ColorValuePath("color").ValuePath("population").DataSource(ViewBag.bubbleData).Add();
     }).ShapeData(ViewBag.worldmap).ShapeDataPath("name").ShapePropertyPath("name").Add();
 }).Render()
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using EJ2_Core_Application.Models;
using Newtonsoft.Json;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            List<BubbleData> data = new List<BubbleData>
            {
                new BubbleData { name= "India", population= "38332521", color="green" },
                new BubbleData { name= "New Zealand", population= "19651127", color="purple" },
                new BubbleData { name= "Pakistan", population= "3090416", color="blue" }
            };
            ViewBag.bubbleData = data;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public class BubbleData
        {
            public string name { get; set; }
            public string population { get; set; }
            public string color { get; set; }
        }
    }
}

Refer to the API for bubble feature.