ASP.NET MVC
EditEdit This DocumentInstall NuGet
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Customization in ASP.NET MVC Maps control

customize shape

The following properties are available in shapeSettings property to customize the shapes of the Maps component.

  • fill - Customizes the shape color.
  • autofill - Applies the default palette colors to shapes.
  • palette - Applies own custom palette for shapes.
  • border - Customizes the maps shape border.
  • dashArray - Customizes the different dash array border line format.
  • opacity - Customizes the shape opacity.
razor
fill.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").Layers(l =>
 {
     l.LayerType(Syncfusion.EJ2.Maps.ShapeLayerType.Geometry).ShapeSettings(ss => ss
     .Fill("#33CCFF").Border(border => border.Color("#FFFFFF").Width(2))
     .Palette(new string[] { "#33CCFF", "#FF0000", "#800000", "#FFFF00", "#808000" }))
     .ShapeData(ViewBag.worldmap).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)
    .ShapeSettings(ss => ss.Autofill(true)).ShapeData(ViewBag.worldmap).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).ShapeSettings(ss => ss
    .Autofill(true).Palette(new string[] { "#33CCFF", "#FF0000", "#800000", "#FFFF00", "#808000" }))
    .ShapeData(ViewBag.worldmap).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.

Projection Type

By default, the maps are rendered by Mercator projection type. In this type, the maps are rendered based on coordinates, so it is not stretched.

The maps control has the following projection types:

  • Mercator
  • Equirectangular
  • Miller
  • Eckert3
  • Eckert5
  • Eckert6
  • Winkel3
  • AitOff.
razor
projection.cs
@using Syncfusion.EJ2;
@Html.EJS().Maps("maps").ProjectionType("Miller").Layers(l =>
{
    l.LayerType(Syncfusion.EJ2.Maps.ShapeLayerType.Geometry).ShapeSettings(ss => ss
    .Autofill(true).Palette(new string[] { "#33CCFF", "#FF0000", "#800000", "#FFFF00", "#808000" }))
    .ShapeData(ViewBag.worldmap).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);
        }
    }
}
Previous
Next