Marker types in ASP.NET MVC Maps Component
14 Nov 202213 minutes 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, follow the given steps.
Step 1:
Initialize the Maps component 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.
@{
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
};
}
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Maps
@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>
{
new Syncfusion.EJ2.Maps.MapsLayer
{
ShapeData = ViewBag.usMap,
MarkerSettings = new List<Syncfusion.EJ2.Maps.MapsMarker>
{
new Syncfusion.EJ2.Maps.MapsMarker
{
Visible = true,
DataSource = data,
Width= 2,
AnimationDuration= 0,
Border = border,
Fill = "white",
Shape = Syncfusion.EJ2.Maps.MarkerType.Circle
}
}}}).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;
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));
}
}
}
Step 2:
Customize the above option for n number of markers as mentioned in the following example.
@{
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
};
}
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Maps
@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>
{
new Syncfusion.EJ2.Maps.MapsLayer
{
ShapeData = ViewBag.usMap,
MarkerSettings = new List<Syncfusion.EJ2.Maps.MapsMarker>
{
new Syncfusion.EJ2.Maps.MapsMarker
{
Visible = true,
DataSource = data2,
Width= 3,
AnimationDuration= 0,
Border = border,
Fill = "white",
Shape = Syncfusion.EJ2.Maps.MarkerType.Circle
},
new Syncfusion.EJ2.Maps.MapsMarker
{
Visible = true,
DataSource = data1,
Width= 15,
Height = 4,
AnimationDuration= 0,
Border = border,
Fill = "yellow",
Shape = Syncfusion.EJ2.Maps.MarkerType.Rectangle
},
new Syncfusion.EJ2.Maps.MapsMarker
{
Visible = true,
DataSource = data,
Width= 10,
Height = 10,
AnimationDuration= 0,
Border = border,
Fill = "white",
Shape = Syncfusion.EJ2.Maps.MarkerType.Diamond
}
}}}).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;
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));
}
}
}