ASP.NET MVC
Demos
Support
Forum
Download
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.

razor
fill.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l=> {
    l.LayerType(Syncfusion.EJ2.Maps.ShapeLayerType.Geometry).ShapeData(ViewBag.worldmap).ShapeSettings(new
    {
        fill = "#33CCFF",
        border = new
        {
            color = "#FFFFFF",
            width = 2
        }
    }).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;
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.

razor
autofill.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l=> {
    l.LayerType(Syncfusion.EJ2.Maps.ShapeLayerType.Geometry).ShapeData(ViewBag.worldmap).ShapeSettings(new
    {
     autofill = true
    }).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;
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.

razor
palette.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l=> {
    l.LayerType(Syncfusion.EJ2.Maps.ShapeLayerType.Geometry).ShapeData(ViewBag.worldmap).ShapeSettings(new
    {
     autofill = true,
     palette = new string[] { "#33CCFF", "#FF0000", "#800000", "#FFFF00", "#808000" }
    }).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;
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.

Previous
Next