Search results

Customization in ASP.NET MVC Maps control

07 May 2021 / 1 minute to read

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
Copied to clipboard
@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()
Copied to clipboard
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
Copied to clipboard
@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()
Copied to clipboard
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
Copied to clipboard
@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()
Copied to clipboard
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
Copied to clipboard
@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()
Copied to clipboard
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);
        }
    }
}