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.@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.
@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.
@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.
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:
@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);
}
}
}