diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs @@ -0,0 +1,29 @@ +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)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/razor new file mode 100644 index 0000000000..1b32821d2d --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/razor @@ -0,0 +1,66 @@ +@using Syncfusion.EJ2; + +@{ + 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 + { + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipTemplate="
Country Name : Saudi Arabia
" } + }; + + var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings + { + Visible = true + }; + +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).TooltipSettings(tooltipSettings); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper new file mode 100644 index 0000000000..a9998bf996 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper @@ -0,0 +1,72 @@ +@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 + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2, TooltipTemplate="
Country Name : Saudi Arabia
" } + }; + + var tooltipSettings = new Syncfusion.EJ2.Maps.MapsTooltipSettings + { + Visible = true + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs @@ -0,0 +1,29 @@ +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)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/razor new file mode 100644 index 0000000000..e6fb4fd1d5 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/razor @@ -0,0 +1,71 @@ +@using Syncfusion.EJ2; + +@{ + 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 + { + new Syncfusion.EJ2.Maps.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" + } + }; + +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons).TooltipSettings(tooltipSettings); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper new file mode 100644 index 0000000000..4de2a71afb --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper @@ -0,0 +1,77 @@ +@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 + { + 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" + } + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/polygon-shape.cs b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/polygon-shape.cs new file mode 100644 index 0000000000..a720d8b43a --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/polygon-shape.cs @@ -0,0 +1,29 @@ +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)); + } + } +} \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/razor b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/razor new file mode 100644 index 0000000000..21a87f4f16 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/razor @@ -0,0 +1,60 @@ +@using Syncfusion.EJ2; + +@{ + 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 +{ + new Syncfusion.EJ2.Maps.MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; +} + +@(Html.EJS().Maps("maps").Layers(layers => { layers.PolygonSettings(polygon => { polygon.Polygons(polygons); }).ShapeData(ViewBag.world_map).Add(); }).Render()) \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/tagHelper b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/tagHelper new file mode 100644 index 0000000000..c44b21b5a8 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/maps/polygon/polygon-shape/tagHelper @@ -0,0 +1,67 @@ +@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 + { + new MapsPolygon{ Points=data, Fill="blue", Opacity=0.7, BorderColor="green", BorderOpacity=0.7, BorderWidth=2 } + }; +} + + + + + + + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/maps/images/Polygon/PolygonShape.png b/ej2-asp-core-mvc/maps/images/Polygon/PolygonShape.png new file mode 100644 index 0000000000..35eab5e742 Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/PolygonShape.png differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip-template.png b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip-template.png new file mode 100644 index 0000000000..1f754a412b Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip-template.png differ diff --git a/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip.png b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip.png new file mode 100644 index 0000000000..024a2e8933 Binary files /dev/null and b/ej2-asp-core-mvc/maps/images/Polygon/polygon-shape-tooltip.png differ diff --git a/ej2-asp-core-mvc/maps/polygon.md b/ej2-asp-core-mvc/maps/polygon.md new file mode 100644 index 0000000000..9949fc7727 --- /dev/null +++ b/ej2-asp-core-mvc/maps/polygon.md @@ -0,0 +1,147 @@ +--- +layout: post +title: Polygon in Syncfusion ##Platform_Name## Maps component +description: Learn here all about Polygon in Syncfusion ##Platform_Name## Maps component of Syncfusion Essential JS 2 and more. +platform: ej2-asp-core-mvc +control: Polygon +publishingplatform: ##Platform_Name## +documentation: ug +--- + +# Polygon shape in ##Platform_Name## Maps component + +{% if page.publishingplatform == "aspnet-core" %} + +The Maps component allows you to add polygon shape to a geometry map or an online map by using the properties in the [polygons](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons). This section describes how to add polygon shape to the map and customize them. + +The polygon shape can be rendered over the map layer by defining the [points](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Fill) - It is used to change the color of the polygon shape. +* [opacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Opacity) - It is used to change the opacity of the polygon shape. +* [borderColor](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderColor) - It is used to change the color of the border in the polygon shape. +* [borderWidth](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderWidth) - It is used to change the width of the border in the polygon shape. +* [borderOpacity](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons) property. + +The following example shows how to customize the polygon shape over the geometry map. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape.cs" %} +{% include code-snippet/maps/polygon/polygon-shape/polygon-shape.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +The Maps component allows you to add polygon shape to a geometry map or an online map by using the properties in the [Polygons](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons). This section describes how to add polygon shape to the map and customize them. + +The polygon shape can be rendered over the map layer by defining the [Points](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Fill) - It is used to change the color of the polygon shape. +* [Opacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_Opacity) - It is used to change the opacity of the polygon shape. +* [BorderColor](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderColor) - It is used to change the color of the border in the polygon shape. +* [BorderWidth](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_BorderWidth) - It is used to change the width of the border in the polygon shape. +* [BorderOpacity](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_Polygons) property. + +The following example shows how to customize the polygon shape over the geometry map. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape.cs" %} +{% include code-snippet/maps/polygon/polygon-shape/polygon-shape.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + + +![Maps with polygon shape](./images/Polygon/PolygonShape.png) + +## Tooltip + +{% if page.publishingplatform == "aspnet-core" %} + +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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_TooltipSettings). Additionally, you need to set the desired content as a value to the [tooltipText](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_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. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_TooltipSettings). Additionally, you need to set the desired content as a value to the [TooltipText](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygonSettings.html#Syncfusion_EJ2_Maps_MapsPolygonSettings_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. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip/polygon-shape-tooltip.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![Maps with tooltip for polygon shape](./images/Polygon/polygon-shape-tooltip.png) + +### Tooltip template + +{% if page.publishingplatform == "aspnet-core" %} + +Any HTML element can be rendered in the tooltip of the polygon shapes using the [tooltipTemplate](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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. + +{% tabs %} +{% highlight cshtml tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/tagHelper %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip-template.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs %} +{% endhighlight %} +{% endtabs %} + +{% elsif page.publishingplatform == "aspnet-mvc" %} + +Any HTML element can be rendered in the tooltip of the polygon shapes using the [TooltipTemplate](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.Maps.MapsPolygon.html#Syncfusion_EJ2_Maps_MapsPolygon_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. + +{% tabs %} +{% highlight razor tabtitle="CSHTML" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/razor %} +{% endhighlight %} +{% highlight c# tabtitle="Polygon-shape-tooltip-template.cs" %} +{% include code-snippet/maps/polygon/polygon-shape-tooltip-template/polygon-shape-tooltip-template.cs %} +{% endhighlight %} +{% endtabs %} +{% endif %} + +![Maps with tooltip template for polygon shape](./images/Polygon/polygon-shape-tooltip-template.png)