Search results

Customization

To customize the layer shape, modify the default layer of the shapeSettings property. You can customize the shape color by using the fill property and border by using the border.color and border.width properties.

tagHelper
fill.cs
@{
    var shape = new
    {
        fill = "#33CCFF",
        border = new
        {
            color = "#FFFFFF",
            width = 2
        }
    };
}
@using Syncfusion.EJ2;
 <ejs-maps id="maps">
        <e-layers>
            <e-layer layerType="Geometry" shapeData="ViewBag.worldmap" shapeSettings="shape"></e-layer>
        </e-layers>
 </ejs-maps>
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;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

To apply default palette colors for shapes need to enable the autofill property.

tagHelper
autofill.cs
@{
    var shape = new
    {
     autofill = true
    };
}
@using Syncfusion.EJ2;
 <ejs-maps id="maps">
        <e-layers>
            <e-layer layerType="Geometry" shapeData="ViewBag.worldmap" shapeSettings="shape"></e-layer>
        </e-layers>
 </ejs-maps>
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;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

To apply own custom palette for shape, provide the palette colors for the palette property.

tagHelper
palette.cs
@{
    var shape = new
    {
     autofill = true,
     palette = new string[] { "#33CCFF", "#FF0000", "#800000", "#FFFF00", "#808000" }
    };
}
@using Syncfusion.EJ2;
 <ejs-maps id="maps">
        <e-layers>
            <e-layer layerType="Geometry" shapeData="ViewBag.worldmap" shapeSettings="shape"></e-layer>
        </e-layers>
 </ejs-maps>
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;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Refer to shapeSettings API for shape customization. For more customization, see the colormapping feature.