Search results

Customization in ASP.NET Core 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.
tagHelper
fill.cs
@{
    var shape = new
    {
        fill = "#33CCFF",
        border = new
        {
            color = "#FFFFFF",
            width = 2
        },
        palette = new string[] { "#33CCFF", "#FF0000", "#800000", "#FFFF00", "#808000" };
    };
}
@using Syncfusion.EJ2;
 <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer layerType="Geometry" shapeData="ViewBag.worldmap" shapeSettings="shape"></e-maps-layer>
        </e-maps-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-maps-layers>
            <e-maps-layer layerType="Geometry" shapeData="ViewBag.worldmap" shapeSettings="shape"></e-maps-layer>
        </e-maps-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-maps-layers>
            <e-maps-layer layerType="Geometry" shapeData="ViewBag.worldmap" shapeSettings="shape"></e-maps-layer>
        </e-maps-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.

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