ASP.NET Core

Search results

Markers in ASP.NET Core Maps control

25 Oct 2021 / 6 minutes to read

Markers are notes that are used to leave a message on the Maps. It indicates or marks a specific location with desired symbols on the Maps. It can be enabled by setting the Visible property of the MapsMarker to true.

Adding marker

To add the markers, the DataSource property of the MapsMarker has a list of objects that contains the data for markers. Using this property, any number of markers can be added to the layers of the Maps. By default, it displays the markers based on the specified latitude and longitude in the given data source. Each data source object contains the following list of properties.

latitude - The latitude point which determines the X location of the marker.
longitude - The longitude point which determines the Y location of the marker.

marker-adding.cs

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.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Adding marker

Adding marker template

The Marker can be added as a template in the Maps component. The Template property of the MapsMarker is used to set the HTML element or id of an element as a template.

tagHelper

marker-label.cs

@{
    var data = new[]
    {
            new {latitude= 37.0000, longitude= -120.0000, city= "California" },
            new {latitude= 40.7127, longitude= -74.0059, city= "New York" },
            new {latitude= 42.0000, longitude= -93.0000, city= "Iowa" }
       };
    var marker = new List<MapsMarker>
    {
        new MapsMarker{Visible=true, Template="#template", DataSource=data}
    };

    }

@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap" markerSettings="marker"></e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>
<div id="template" style="display: none;">
    <div>
        <div style="margin-left:8px;height:45px;width:120px;margin-top:-23px;">
            <label style="color:black;margin-left:15px;font-weight:normal;">\{\{\:city\}\}</label>
        </div>
    </div>
</div>

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.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Adding marker template

Customization

The following properties are available in MapsMarker class to customize the Markers of the Maps component.

Border - To customize the color, width and opacity of the border for the markers in Maps.
Fill - To apply the color for markers in Maps.
DashArray - To define the pattern of dashes and gaps that is applied to the outline of the markers in Maps.
Height - To customize the height of the markers in Maps.
Width - To customize the width of the markers in Maps.
Offset - To customize the position of the markers in Maps.
Opacity - To customize the transparency of the markers in Maps.
AnimationDelay - To change the time delay in the transition for markers.
AnimationDuration - To change the time duration of animation for markers.

marker-customization.cs

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.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Customization

Marker shapes

The Maps component supports the following marker shapes. To set the shape of the marker, the Shape property in MapsMarker is used.

Balloon
Circle
Cross
Diamond
Image
Rectangle
Start
Triangle
VerticalLine
HorizontalLine

Rendering marker shape as image

To render a marker as an image in Maps, set the Shape property of MapsMarker as Image and specify the path of the image to ImageUrl property. There is another way to render a marker as an image using the ImageUrlValuePath property of the MapsMarker. Bind the field name that contains the path of the image in the data source to the ImageUrlValuePath property.

marker-image.cs

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.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Rendering Marker shape as image

Multiple marker groups

Multiple groups of markers can be added in the Maps by adding multiple MapsMarker in the MapsMarkers and customization for the markers can be done with the MapsMarker.

marker-group.cs

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.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Multiple marker groups

Customize marker shapes from data source

Bind different colors and shapes to the marker from data source

Using the ShapeValuePath and ColorValuePath properties, the color and shape of the marker can be applied from the given data source. Bind the data source to the DataSource property of the MapsMarker class and set the field names that contains the shape and color values in the data source to the ShapeValuePath and ColorValuePath properties.

tagHelper

shape.cs

@using Syncfusion.EJ2.Maps;
@{
    var data = new[]
    {
        new {latitude =  49.95121990866204, longitude = 18.468749999999998, name="Europe", color="red",
        shape="Triangle"},
        new {latitude =  59.88893689676585, longitude = -109.3359375, name="North America", color="blue",
        shape="Pentagon"},
        new {latitude =  -6.64607562172573, longitude = -55.54687499999999, name="South America", color="green",
        shape="InvertedTriangle"}
    };
}
<ejs-maps id="maps">
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.worldmap">
            <e-layersettings-markers>
                <e-layersettings-marker visible="true" shapeValuePath="shape" colorValuePath="color" dataSource="data">
                </e-layersettings-marker>
            </e-layersettings-markers>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Maps;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using EJ2MVCSampleBrowser.Models;

namespace EJ2MVCSampleBrowser.Controllers.Maps
{
    public partial class MapsController : Controller
    {
        // GET: MarkerClustering
        public ActionResult MarkerClustering()
        {
            ViewBag.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Bind different colors and shapes to the marker from data source

Setting value path from the data source

The latitude and longitude values are used to determine the location of each marker in the Maps. The LatitudeValuePath and LongitudeValuePath properties are used to specify the value path that presents in the data source of the marker. In the following example, the field name from the data source is set to the LatitudeValuePath and LongitudeValuePath properties.

marker-valuepath.cs

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.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Setting value path from the data source

Marker zooming

The Maps can be initially scaled to the center value based on the marker distance. This can be achieved by setting the ShouldZoomInitially property in MapsZoomSettings as true.

tagHelper

marker-zoom.cs

@{
    var data = new[]
    {
            new {latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
            new {latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" },
            new {latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" }
       };
    var marker = new List<MapsMarker>
    {
        new MapsMarker{Visible=true, DataSource=data}
    };
    }

@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
    <e-maps-zoomsettings enable="true" shouldZoomInitially="true" horizontalAlignment="Near"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.worldmap" markerSettings="marker"></e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>

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.worldmap = GetWorldMap();
            ViewBag.world_map = GetMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Marker zooming

Marker clustering

Maps provide support to cluster the markers when they overlap each other. The number on a cluster indicates how many overlapped markers it contains. If zooming is performed on any of the cluster locations in Maps, the number on the cluster will decrease, and the individual markers will be seen on the map. When zooming out, the overlapping marker will increase. So that it can cluster again and increase the count over the cluster.

To enable clustering in markers, set the AllowClustering property of MapsMarkerClusterSettings as true and customization of clustering can be done with the MapsMarkerClusterSettings.

tagHelper

marker-cluster.cs

@using Syncfusion.EJ2.Maps;
@{
    var titleStyle = new MapsFont
    {
        Size = "16px",
    };
    var cluster = new MapsMarkerClusterSettings
    {
        AllowClustering = true,
        Height = 40,
        Width = 40,
        Shape = Syncfusion.EJ2.Maps.MarkerType.Circle,
        LabelStyle = new MapsFont
        {
            Color = "White"
        }

    };
    var tooltip = new MapsTooltipSettings
    {
        Visible = true,
        ValuePath = "city"
    };

}
<div class="control-section">
    <ejs-maps id="maps">
        <e-maps-titlesettings alignment="@Syncfusion.EJ2.Maps.Alignment.Center" text="Top 50 largest cities in the World" textStyle="titleStyle"></e-maps-titlesettings>
        <e-maps-zoomsettings enable="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.shapeData" markerClusterSettings="cluster">
                <e-layersettings-shapesettings fill="#C1DFF5"></e-layersettings-shapesettings>
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" shape="Balloon" height="20" width="20" animationDuration="0" tooltipSettings="tooltip" dataSource="ViewBag.ClusterData"></e-layersettings-marker>
                </e-layersettings-markers>

            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Maps;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using EJ2MVCSampleBrowser.Models;

namespace EJ2MVCSampleBrowser.Controllers.Maps
{
    public partial class MapsController : Controller
    {
        // GET: MarkerClustering
        public ActionResult MarkerClustering()
        {
            ViewBag.shapeData = this.GetWorldMap();
            ViewBag.shape_Data = this.GetWMap();
            ViewBag.ClusterData = this.ClusterData();
            ViewBag.Cluster_data = this.getData();
            return View();
        }
        public object ClusterData()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/MapData/ClusterData.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object getData()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("./wwwroot/scripts/MapsData/ClusterData.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
        public object GetWMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

Marker clustering

Customization of marker cluster

The following properties are available to customize the marker clustering in the Maps component.

Border - To customize the color, width and opacity of the border of cluster in Maps.
ConnectorLineSettings - To customize the connector line in cluster separating the markers.
DashArray - To customize the dash array for the marker cluster in Maps.
Fill - Applies the color of the cluster in Maps.
Height - To customize the height of the marker cluster in Maps.
ImageUrl - To customize the URL path for the marker cluster when the cluster shape is set as image in Maps.
LabelStyle - To customize the text in marker cluster.
Offset - To customize the offset position for the marker cluster in Maps.
Opacity - To customize the opacity of the marker cluster.
Shape - To customize the shape for the cluster of markers.
Width - To customize the width of the marker cluster in Maps.

cluster-customization.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Maps;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using EJ2MVCSampleBrowser.Models;

namespace EJ2MVCSampleBrowser.Controllers.Maps
{
    public partial class MapsController : Controller
    {
        // GET: MarkerClustering
        public ActionResult MarkerClustering()
        {
            ViewBag.shapeData = this.GetWorldMap();
            ViewBag.ClusterData = this.ClusterData();
            return View();
        }
        public object ClusterData()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/MapData/ClusterData.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Customization of marker cluster

Expanding the marker cluster

The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting the AllowClusterExpand property in MapsMarkerClusterSettings as true to expand the identical markers. If zooming is performed in any of the locations of the cluster, the number on the cluster will decrease and the overlapping marker will be split into an individual marker on the map. When performing zoom out, it will increase the marker count and then cluster it again.

tagHelper

cluster.cs

@using Syncfusion.EJ2.Maps;
@{
    var cluster = new MapsMarkerClusterSettings
    {
        AllowClustering = true,
        AllowClusterExpand = true,
        Height = 40,
        Width = 40,
        LabelStyle = new MapsFont
        {
            Color = "White"
        }
    };
    var data = new[]
{
        new { latitude= 49.95121990866204, longitude= 18.468749999999998, name="Europe" },
        new { latitude= 49.95121990866204, longitude= 18.468749999999998, name="Europe" },
        new { latitude= 49.95121990866204, longitude= 18.468749999999998, name="Europe" },
        new { latitude= 49.95121990866204, longitude= 18.468749999999998, name="Europe" },
        new { latitude= 49.95121990866204, longitude= 18.468749999999998, name="Europe" },
        new { latitude= 49.95121990866204, longitude= 18.468749999999998, name="Europe" },
        new { latitude= 49.95121990866204, longitude= 18.468749999999998, name="Europe" },
        new { latitude= 59.88893689676585, longitude= -109.3359375, name="North America" },
        new { latitude= -6.64607562172573, longitude= -55.54687499999999, name="South America"}
    };
}
<div class="control-section">
    <ejs-maps id="maps">
        <e-maps-zoomsettings enable="true" mouseWheelZoom="true"></e-maps-zoomsettings>
        <e-maps-layers>
            <e-maps-layer shapeData="ViewBag.shapeData" markerClusterSettings="cluster">
                <e-layersettings-markers>
                    <e-layersettings-marker visible="true" dataSource="data"></e-layersettings-marker>
                </e-layersettings-markers>
            </e-maps-layer>
        </e-maps-layers>
    </ejs-maps>
</div>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Syncfusion.EJ2.Maps;
using System.Web.Script.Serialization;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using EJ2MVCSampleBrowser.Models;

namespace EJ2MVCSampleBrowser.Controllers.Maps
{
    public partial class MapsController : Controller
    {
        // GET: MarkerClustering
        public ActionResult MarkerClustering()
        {
            ViewBag.shapeData = GetWorldMap();
            ViewBag.clusterdata = GetClusterData();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public object GetClusterData()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/ClusterData.js");
            return JsonConvert.DeserializeObject(text, typeof(object));
        }
        
    }
}

Tooltip is used to display more information about a marker on mouse over or touch end event. This can be enabled separately for marker by setting the Visible property of MapsTooltipSettings to true. The ValuePath property in the MapsTooltipSettings takes the field name that presents in dataSource and displays that value as tooltip text.

marker-tooltip.cs

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.usa = GetUSMap();
            ViewBag.usamap = GetUSAMap();
            return View();
        }
        public object GetUSMap()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/USA.json");
            return JsonConvert.DeserializeObject(text);
        }
        public object GetUSAMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/USA.json"));
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Maps with marker Tooltip

Contents

Adding marker
Adding marker template
Customization
Marker shapes
Rendering marker shape as image
Multiple marker groups
Customize marker shapes from data source
Bind different colors and shapes to the marker from data source
Setting value path from the data source
Marker zooming
Marker clustering
Customization of marker cluster
Expanding the marker cluster
Tooltip for marker

Contents

Adding marker
Adding marker template
Customization
Marker shapes
Rendering marker shape as image
Multiple marker groups
Customize marker shapes from data source
Bind different colors and shapes to the marker from data source
Setting value path from the data source
Marker zooming
Marker clustering
Customization of marker cluster
Expanding the marker cluster
Tooltip for marker

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Markers in ASP.NET Core Maps control

Adding marker

Adding marker template

Customization

Marker shapes

Rendering marker shape as image

Multiple marker groups

Customize marker shapes from data source

Bind different colors and shapes to the marker from data source

Setting value path from the data source

Marker zooming

Marker clustering

Customization of marker cluster

Expanding the marker cluster

Tooltip for marker