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 USA map with datasource.

razor
bubble.cs
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Maps;
@Html.EJS().Maps("maps").Layers(l=> {
    l.ShapeData(ViewBag.usMap).ShapeDataPath("name").ShapePropertyPath("name").BubbleSettings(new List<MapsBubble> {
   new MapsBubble{ Visible = true, MinRadius = 20, MaxRadius = 40, ValuePath = "population", DataSource=new[]{
        new { name= "California", population= "38332521" },
            new { name= "New York", population= "19651127" },
            new { name= "Iowa", population= "3090416" }
   } }
    }).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.usmap = GetUSMap();
            return View();
        }
        public object GetUSMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/usMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

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.ShapeData(ViewBag.usMap).ShapeDataPath("name").ShapePropertyPath("name").BubbleSettings(new List<MapsBubble> {
   new MapsBubble{ Visible = true, MinRadius = 20, MaxRadius = 40, ColorValuePath="color", ValuePath = "population", DataSource=new[]{
            new {color= "green", name = "California", population= "38332521" },
            new { color="purple", name= "New York", population= "19651127" },
            new { color="blue", name= "Iowa", population= "3090416" }
   } }
    }).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.usmap = GetUSMap();
            return View();
        }
        public object GetUSMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/usMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Refer to the API for bubble feature.