ASP.NET Core
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Marker Type in ASP.NET Core Maps control

18 Jan 2022 / 1 minute to read

Add different types of markers

Different marker objects can be added to the Maps component using the marker settings. To update different marker settings in Maps, please follow the given steps.

Step 1:

Initialize the Maps control with marker settings. Here, a marker has been added with specified latitude and longitude of California by using the DataSource property. To customize the shape of the marker using the Shape property and change the border color and width of the marker using the Border property as mentioned in the following example.

tagHelper
marker1.cs
Copied to clipboard
@{ 
    var data = new[]
    {
        new { latitude=  40.7424509, longitude = -74.0081468, city = "New York"}
    };
    var border = new Syncfusion.EJ2.Maps.MapsBorder
    {
        Width = 2,
        Color = "#333",
        Opacity = 1
    };
}

<div id="map">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.usmap">
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" shape="Circle" fill="white" width="2" animationDuration="0" border="border" dataSource="data" ></e-layersettings-marker>
                </e-layersettings-markers>
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>
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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.usmap = GetUSMap();
            ViewBag.usMap = GetMap();
            return View();
        }
        public object GetUSMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/USA.json");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/USA.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Marker type

Step 2:

Customize the above option for n number of markers as mentioned in the following example.

tagHelper
marker2.cs
Copied to clipboard
@{ 
    var data = new[]
    {
        new { latitude=  40.7424509, longitude = -74.0081468, city = "New York"}
    };
    var data1 = new[]
    {
        new { latitude=  33.5302186, longitude = -117.7418381, city = "Laguna Niguel"}
    };
    var data2 = new[]
    {
        new { latitude=  37.6276571, longitude = -122.4276688, city = "San Bruno"}
    };
    var border = new Syncfusion.EJ2.Maps.MapsBorder
    {
        Width = 2,
        Color = "#333",
        Opacity = 1
    };
    var border1 = new Syncfusion.EJ2.Maps.MapsBorder
    {
        Width = 2,
        Color = "#333",
        Opacity = 1
    };
    var border2 = new Syncfusion.EJ2.Maps.MapsBorder
    {
        Width = 2,
        Color = "blue",
        Opacity = 1
    };
}

<div id="map">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.usmap">
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" shape="Circle" fill="white" width="3" animationDuration="0" border="border" dataSource="data2"></e-layersettings-marker>
                    <e-layersettings-marker visible="true" shape="Rectangle" fill="yellow" width="15" height="4" animationDuration="0" border="border" dataSource="data1"></e-layersettings-marker>
                    <e-layersettings-marker visible="true" shape="Diamond" fill="white" width="10" height="10" animationDuration="0" border="border" dataSource="data"></e-layersettings-marker>
                </e-layersettings-markers>
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>
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;

namespace EJ2_Core_Application.Controllers
{
    public class HomeController : Controller
    {
        public IActionResult Index()
        {
            ViewBag.usmap = GetUSMap();
            ViewBag.usMap = GetMap();
            return View();
        }
        public object GetUSMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/USA.json");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/USA.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Marker type

Previous
Next