Polygon shape in ASP.NET CORE Maps component

20 Mar 202420 minutes to read

The Maps component allows you to add polygon shape to a geometry map or an online map by using the properties in the polygons. This section describes how to add polygon shape to the map and customize them.

Adding polygon shape

The polygon shape can be rendered over the map layer by defining the points property in the polygons of the Maps component. The points property uses a collection of latitude and longitude values to define the polygon shape.

The polygons provides the following properties for customizing the polygon shape of the Maps component.

  • fill - It is used to change the color of the polygon shape.
  • opacity - It is used to change the opacity of the polygon shape.
  • borderColor - It is used to change the color of the border in the polygon shape.
  • borderWidth - It is used to change the width of the border in the polygon shape.
  • borderOpacity - It is used to change the opacity of the border in the polygon shape.

You can also include “n” polygon shapes using the polygons property.

The following example shows how to customize the polygon shape over the geometry map.

@using Syncfusion.EJ2.Maps

@{
    var data = new[]
    {
        new { longitude = 34.88539587371454, latitude = 28.181421087099537 },
        new { longitude = 37.50029619722466, latitude = 24.299419888989462 },
        new { longitude = 39.22241423764024, latitude = 22.638529461838658 },
        new { longitude = 38.95650769309776, latitude = 21.424998160017495 },
        new { longitude = 40.19963938650778, latitude = 20.271205391339606 },
        new { longitude = 41.76547269134551, latitude = 18.315451049867193 },
        new { longitude = 42.78452077838921, latitude = 16.097235052947966 },
        new { longitude = 43.36984949591576, latitude = 17.188572054533054 },
        new { longitude = 44.12558191797012, latitude = 17.407258102232234 },
        new { longitude = 46.69027032797584, latitude = 17.33342243475734 },
        new { longitude = 47.09312386141585, latitude = 16.97087769526452 },
        new { longitude = 48.3417299826302, latitude = 18.152700711188004 },
        new { longitude = 49.74762591400318, latitude = 18.81544363931681 },
        new { longitude = 52.41428026336621, latitude = 18.9035706497573 },
        new { longitude = 55.272683129240335, latitude = 20.133861012918544 },
        new { longitude = 55.60121336079203, latitude = 21.92042703112351 },
        new { longitude = 55.08204399107967, latitude = 22.823302662258882 },
        new { longitude = 52.743894337844154, latitude = 22.954463486477437 },
        new { longitude = 51.47035908651375, latitude = 24.35818837668566 },
        new { longitude = 51.122553219055874, latitude = 24.666679732426346 },
        new { longitude = 51.58731671256831, latitude = 25.173806925822717 },
        new { longitude = 51.35950585992913, latitude = 25.84556484481108 },
        new { longitude = 51.088770529661275, latitude = 26.168494193631147 },
        new { longitude = 50.78527056538036, latitude = 25.349051242147596 },
        new { longitude = 50.88330288802666, latitude = 24.779242606720743 },
        new { longitude = 50.19702490702369, latitude = 25.66825106363693 },
        new { longitude = 50.066461167339924, latitude = 26.268905608606616 },
        new { longitude = 49.645896067213215, latitude = 27.15116474192905 },
        new { longitude = 48.917371072320805, latitude = 27.55738830340198 },
        new { longitude = 48.3984720209192, latitude = 28.566207269716173 },
        new { longitude = 47.68851714518985, latitude = 28.5938991332588 },
        new { longitude = 47.45059089191449, latitude = 29.009321449856984 },
        new { longitude = 44.73549453609391, latitude = 29.157358362696385 },
        new { longitude = 41.79487372890989, latitude = 31.23489959729713 },
        new { longitude = 40.36977176033773, latitude = 31.9642352513131 },
        new { longitude = 39.168270913149826, latitude = 32.18348471414393 },
        new { longitude = 37.019253492546454, latitude = 31.47710220862595 },
        new { longitude = 37.99644645508337, latitude = 30.4851028633376 },
        new { longitude = 37.67756530485232, latitude = 30.3636358598429 },
        new { longitude = 37.50181466030105, latitude = 29.960155516804974 },
        new { longitude = 36.700288181129594, latitude = 29.882136586478993 },
        new { longitude = 36.100009274845206, latitude = 29.15308642012721 },
        new { longitude = 34.85774476486728, latitude = 29.3103032832622 },
        new { longitude = 34.64498583263142, latitude = 28.135787235699823 },
        new { longitude = 34.88539587371454, latitude = 28.181421087099537 }
    };


    var polygons = new List<Syncfusion.EJ2.Maps.MapsPolygon>
    {
        new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 }
    };
}

<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.worldmap">
            <e-layersettings-polygonsettings polygons="polygons">
            </e-layersettings-polygonsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }

        // To access the data in Core
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }

        // To access the data in MVC
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Maps with polygon shape

Tooltip

Tooltip is used to display more information about a polygon shape during a mouse or touch interaction. Tooltip and tooltip template can be enabled by setting the visible property to true in the tooltipSettings. Additionally, you need to set the desired content as a value to the tooltipText property in the polygons property to show the tooltip. If you add ‘n’ numbers of polygon shapes, you can add the tooltipText property to each polygon, which will display the tooltip for the associated polygon shape.

Tooltip customization

The following properties are available in the tooltipSettings to customize the appearance of the tooltip.

  • border - To change the color, width, and opacity of the border of the tooltip in the polygon shape.
  • fill - Applies the color of the tooltip in the polygon shape.
  • textStyle - To change the style of the text in the tooltip of the polygon shape.
@using Syncfusion.EJ2.Maps

@{
    var data = new[]
    {
        new { longitude = 34.88539587371454, latitude = 28.181421087099537 },
        new { longitude = 37.50029619722466, latitude = 24.299419888989462 },
        new { longitude = 39.22241423764024, latitude = 22.638529461838658 },
        new { longitude = 38.95650769309776, latitude = 21.424998160017495 },
        new { longitude = 40.19963938650778, latitude = 20.271205391339606 },
        new { longitude = 41.76547269134551, latitude = 18.315451049867193 },
        new { longitude = 42.78452077838921, latitude = 16.097235052947966 },
        new { longitude = 43.36984949591576, latitude = 17.188572054533054 },
        new { longitude = 44.12558191797012, latitude = 17.407258102232234 },
        new { longitude = 46.69027032797584, latitude = 17.33342243475734 },
        new { longitude = 47.09312386141585, latitude = 16.97087769526452 },
        new { longitude = 48.3417299826302, latitude = 18.152700711188004 },
        new { longitude = 49.74762591400318, latitude = 18.81544363931681 },
        new { longitude = 52.41428026336621, latitude = 18.9035706497573 },
        new { longitude = 55.272683129240335, latitude = 20.133861012918544 },
        new { longitude = 55.60121336079203, latitude = 21.92042703112351 },
        new { longitude = 55.08204399107967, latitude = 22.823302662258882 },
        new { longitude = 52.743894337844154, latitude = 22.954463486477437 },
        new { longitude = 51.47035908651375, latitude = 24.35818837668566 },
        new { longitude = 51.122553219055874, latitude = 24.666679732426346 },
        new { longitude = 51.58731671256831, latitude = 25.173806925822717 },
        new { longitude = 51.35950585992913, latitude = 25.84556484481108 },
        new { longitude = 51.088770529661275, latitude = 26.168494193631147 },
        new { longitude = 50.78527056538036, latitude = 25.349051242147596 },
        new { longitude = 50.88330288802666, latitude = 24.779242606720743 },
        new { longitude = 50.19702490702369, latitude = 25.66825106363693 },
        new { longitude = 50.066461167339924, latitude = 26.268905608606616 },
        new { longitude = 49.645896067213215, latitude = 27.15116474192905 },
        new { longitude = 48.917371072320805, latitude = 27.55738830340198 },
        new { longitude = 48.3984720209192, latitude = 28.566207269716173 },
        new { longitude = 47.68851714518985, latitude = 28.5938991332588 },
        new { longitude = 47.45059089191449, latitude = 29.009321449856984 },
        new { longitude = 44.73549453609391, latitude = 29.157358362696385 },
        new { longitude = 41.79487372890989, latitude = 31.23489959729713 },
        new { longitude = 40.36977176033773, latitude = 31.9642352513131 },
        new { longitude = 39.168270913149826, latitude = 32.18348471414393 },
        new { longitude = 37.019253492546454, latitude = 31.47710220862595 },
        new { longitude = 37.99644645508337, latitude = 30.4851028633376 },
        new { longitude = 37.67756530485232, latitude = 30.3636358598429 },
        new { longitude = 37.50181466030105, latitude = 29.960155516804974 },
        new { longitude = 36.700288181129594, latitude = 29.882136586478993 },
        new { longitude = 36.100009274845206, latitude = 29.15308642012721 },
        new { longitude = 34.85774476486728, latitude = 29.3103032832622 },
        new { longitude = 34.64498583263142, latitude = 28.135787235699823 },
        new { longitude = 34.88539587371454, latitude = 28.181421087099537 }
    };


    var polygons = new List<Syncfusion.EJ2.Maps.MapsPolygon>
    {
        new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipText="Saudi Arabia" }
    };

    var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings
    {
        Visible = true,
        Border = new Syncfusion.EJ2.Maps.MapsBorder
        {
            Width = 2,
            Color = "Red"
        }
    };
}

<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.worldmap">
            <e-layersettings-polygonsettings polygons="polygons" tooltipSettings="tooltipSettings">
            </e-layersettings-polygonsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }

        // To access the data in Core
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }

        // To access the data in MVC
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Maps with tooltip for polygon shape

Tooltip template

Any HTML element can be rendered in the tooltip of the polygon shapes using the tooltipTemplate property of the polygons. If you add ‘n’ numbers of polygon shapes, you can add the tooltipTemplate property to each polygon, which will display the tooltip for the associated polygon shape.

@using Syncfusion.EJ2.Maps

@{
    var data = new[]
    {
        new { longitude = 34.88539587371454, latitude = 28.181421087099537 },
        new { longitude = 37.50029619722466, latitude = 24.299419888989462 },
        new { longitude = 39.22241423764024, latitude = 22.638529461838658 },
        new { longitude = 38.95650769309776, latitude = 21.424998160017495 },
        new { longitude = 40.19963938650778, latitude = 20.271205391339606 },
        new { longitude = 41.76547269134551, latitude = 18.315451049867193 },
        new { longitude = 42.78452077838921, latitude = 16.097235052947966 },
        new { longitude = 43.36984949591576, latitude = 17.188572054533054 },
        new { longitude = 44.12558191797012, latitude = 17.407258102232234 },
        new { longitude = 46.69027032797584, latitude = 17.33342243475734 },
        new { longitude = 47.09312386141585, latitude = 16.97087769526452 },
        new { longitude = 48.3417299826302, latitude = 18.152700711188004 },
        new { longitude = 49.74762591400318, latitude = 18.81544363931681 },
        new { longitude = 52.41428026336621, latitude = 18.9035706497573 },
        new { longitude = 55.272683129240335, latitude = 20.133861012918544 },
        new { longitude = 55.60121336079203, latitude = 21.92042703112351 },
        new { longitude = 55.08204399107967, latitude = 22.823302662258882 },
        new { longitude = 52.743894337844154, latitude = 22.954463486477437 },
        new { longitude = 51.47035908651375, latitude = 24.35818837668566 },
        new { longitude = 51.122553219055874, latitude = 24.666679732426346 },
        new { longitude = 51.58731671256831, latitude = 25.173806925822717 },
        new { longitude = 51.35950585992913, latitude = 25.84556484481108 },
        new { longitude = 51.088770529661275, latitude = 26.168494193631147 },
        new { longitude = 50.78527056538036, latitude = 25.349051242147596 },
        new { longitude = 50.88330288802666, latitude = 24.779242606720743 },
        new { longitude = 50.19702490702369, latitude = 25.66825106363693 },
        new { longitude = 50.066461167339924, latitude = 26.268905608606616 },
        new { longitude = 49.645896067213215, latitude = 27.15116474192905 },
        new { longitude = 48.917371072320805, latitude = 27.55738830340198 },
        new { longitude = 48.3984720209192, latitude = 28.566207269716173 },
        new { longitude = 47.68851714518985, latitude = 28.5938991332588 },
        new { longitude = 47.45059089191449, latitude = 29.009321449856984 },
        new { longitude = 44.73549453609391, latitude = 29.157358362696385 },
        new { longitude = 41.79487372890989, latitude = 31.23489959729713 },
        new { longitude = 40.36977176033773, latitude = 31.9642352513131 },
        new { longitude = 39.168270913149826, latitude = 32.18348471414393 },
        new { longitude = 37.019253492546454, latitude = 31.47710220862595 },
        new { longitude = 37.99644645508337, latitude = 30.4851028633376 },
        new { longitude = 37.67756530485232, latitude = 30.3636358598429 },
        new { longitude = 37.50181466030105, latitude = 29.960155516804974 },
        new { longitude = 36.700288181129594, latitude = 29.882136586478993 },
        new { longitude = 36.100009274845206, latitude = 29.15308642012721 },
        new { longitude = 34.85774476486728, latitude = 29.3103032832622 },
        new { longitude = 34.64498583263142, latitude = 28.135787235699823 },
        new { longitude = 34.88539587371454, latitude = 28.181421087099537 }
    };


    var polygons = new List<Syncfusion.EJ2.Maps.MapsPolygon>
    {
        new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipTemplate="<div style='width:220px; border: 2px solid #000;padding: 10px;background-color:white;color:black;font-weight:bold;font-size:15px;'> Country Name : Saudi Arabia</div>" }
    };

    var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings
    {
        Visible = true
    };
}

<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.worldmap">
            <e-layersettings-polygonsettings polygons="polygons" tooltipSettings="tooltipSettings">
            </e-layersettings-polygonsettings>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>
using Newtonsoft.Json;
using Syncfusion.EJ2.Charts;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }

        // To access the data in Core
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }

        // To access the data in MVC
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Maps with tooltip template for polygon shape