Search results

Bubble in ASP.NET MVC Maps control

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; }
        }
    }
}

Bubble Sizing

Using the minRadius and maxRadius properties in bubbleSettings, you can render the bubbles in different sizes based on the valuePath and dataSource values

razor
bubblesize.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(5).MaxRadius(80).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.