ASP.NET Core

Search results

Markers in ASP.NET Core Maps control

22 Jul 2021 / 4 minutes to read

Markers are notes that are used to leave a message on the map. It indicates or marks a specific location with desired symbols on the maps.

The dataSource property has a list of objects that contains data for markers. By default, it displays the bound data at the specified latitude and longitude. Using the visible API, you can enable or disable the markers.

Marker can be set to map using the following two ways:

Marker and marker template
Adding marker objects to map.

Marker and marker template

The markerSettings.dataSource property has a list of objects that contains the data for annotation. By default, it displays the bound data at the specified latitude and longitude. The markerSettings.template property is used for customizing the template for markers.

Note: The markerSettings property is an array property.

tagHelper

markers.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="background-image:url(http://js.syncfusion.com/demos/web/Images/map/pin.png);margin-left:3px;height:40px;width:25px;margin-top:-15px;">
        </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();
            List<MarkerData> data = new List<MarkerData>
            {
                 new MarkerData {latitude= 37.0000, longitude= -120.0000, city= "California" },
                 new MarkerData {latitude= 40.7127, longitude= -74.0059, city= "New York" },
                 new MarkerData {latitude= 42.0000, longitude= -93.0000, city= "Iowa" }
            };
            ViewBag.markerData = data;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public class MarkerData
        {
            public double latitude { get; set; }
            public double longitude { get; set; }
            public string city { get; set; }
        }
    }
}

Adding marker objects to map

The “n” number of markers can be added to shape layers using the markerSettings.dataSource property. Each dataSource object contains the following list of properties:

label: Text that displays some information about the annotation in text format. latitude: Latitude point that determines the y-axis position of annotation. longitude: Longitude point that determine the x-axis position of annotation.

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();
            List<MarkerData> data = new List<MarkerData>
            {
                 new MarkerData {latitude= 37.0000, longitude= -120.0000, city= "California" },
                 new MarkerData {latitude= 40.7127, longitude= -74.0059, city= "New York" },
                 new MarkerData {latitude= 42.0000, longitude= -93.0000, city= "Iowa" }
            };
            ViewBag.markerData = data;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public class MarkerData
        {
            public double latitude { get; set; }
            public double longitude { get; set; }
            public string city { get; set; }
        }
    }
}

Marker shapes

The Maps component contains the following marker shapes. You can select any shape using the shape property in markerSettings.

Ballon
Circle
Cross
Diamond
Image
Rectangle
Start
Triangle
VerticalLine
HorizontalLine

Customize marker shapes from data source

Bind different colors and shapes to the marker from data source

The location on the map is marked by different marker shapes using shapeValuePath property in markerSettings. Based on the field name in the data source bind the value to the shapeValuePath property. Also, you can customize the marker shape color by binding the color value field name in the data source to the colorValuePath property in markerSettings.

A default marker object is represented by balloon shape. You can set various shapes to the marker object by using shape property in markerSettings. Also, you can change the shapes of the marker from the datasource.

The following shapes are used for the marker object.

Circle
Rectangle
Balloon
Cross
Polyline
Diamond
Star
Triangle
HorizontalLine
VerticalLine
pentagon

tagHelper

shape.cs

@{       
        var titleStyle = new MapsFont
        {
            Size = "16px",
        };
        var cluster = new MapsMarkerClusterSettings
        {
            AllowClustering=true,
            Shape= Syncfusion.EJ2.Maps.MarkerType.Image,
            Height=40,
            Width=40,
            ImageUrl="../styles/images/maps/cluster.svg",
            LabelStyle= new MapsFont {
                Color="White"
            }
        };
        var tooltip = new MapsTooltipSettings
        {
            Visible = true,
            ValuePath = "city"
        };
     }
    <div class="control-section">
        <ejs-maps id="maps" format="n" useGroupingSeparator="true">
            <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.world" markerClusterSettings="cluster">
                    <e-layersettings-shapesettings fill="#C1DFF5"></e-layersettings-shapesettings>
                    <e-layersettings-markers>
                        <e-layersettings-marker visible="true" shape="Image" imageUrl="../styles/images/maps/ballon.png" height="20" width="20" animationDuration="0" tooltipSettings="tooltip" dataSource="ViewBag.marker"></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.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));
        }
    }
}

Marker Zooming

The map is initially scaled to the center value based on the marker distance. This can be achieved by setting shouldZoomInitially property in zoomSettings 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>
</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();
            List<MarkerData> data = new List<MarkerData>
            {
                 new MarkerData {latitude= 49.95121990866204, longitude= 18.468749999999998, name= "Europe" },
                 new MarkerData {latitude= 59.88893689676585, longitude= -109.3359375, name= "North America" },
                 new MarkerData {latitude= -6.64607562172573, longitude= -55.54687499999999, name= "South America" }
            };
            ViewBag.markerData = data;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public class MarkerData
        {
            public double latitude { get; set; }
            public double longitude { get; set; }
            public string name { get; set; }
        }
    }
}

Marker Cluster Expand

The cluster is formed by grouping an identical and non-identical marker from the surrounding area. By clicking on the cluster and setting allowClusterExpand property in markerClusterSettings as true to expand the identical markers. If you zoom 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 you zoom out, it will increase the marker count and then cluster it again.

tagHelper

cluster.cs

@{       
        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.world" 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 = this.getWorldMap();
            return View();
        }
        
    }
}

Enable the Legend for map markers

The legend can be enabled for marker by setting the legendSettings.type to Markers and legend visible to true. Refer to the following code sample to enable the legend for the markers:

tagHelper

legend.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, Shape=Syncfusion.EJ2.Maps.MarkerType.Diamond, LegendText="city", DataSource=data}
    };

    }
@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;
<div id="control-section">
    <ejs-maps id="maps">
        <e-maps-legendsettings visible="true" type="Markers"></e-maps-legendsettings>
        <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();
            List<MarkerData> data = new List<MarkerData>
            {
                 new MarkerData {latitude= 37.0000, longitude= -120.0000, city= "California" },
                 new MarkerData {latitude= 40.7127, longitude= -74.0059, city= "New York" },
                 new MarkerData {latitude= 42.0000, longitude= -93.0000, city= "Iowa" }
            };
            ViewBag.markerData = data;
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
        public class MarkerData
        {
            public double latitude { get; set; }
            public double longitude { get; set; }
            public string city { get; set; }
        }
    }
}

Marker Clustering

Maps provides support to hide and cluster markers when they overlap each other.

The number on a clusters indicates how many overlapped markers it contains. If you zoom any of the cluster locations, the number on the cluster will decrease and you will begin to see the individual markers on the map. When zooming out, the overlapping marker will increase so that you can cluster it again and increase the count over the cluster.

Using the markerClusterSettings.allowClustering API, you can enable or disable this cluster support. The markerClusterSettings API also helps to customize clusters.

The MarkerClusterRendering event occurs when each cluster is rendered. You can also use this to customize the cluster. The markerClusterClick and markerClusterMouseMove events on mouse move and on clicking the cluster.

tagHelper

marker-cluster.cs

@{       
        var titleStyle = new MapsFont
        {
            Size = "16px",
        };
        var cluster = new MapsMarkerClusterSettings
        {
            AllowClustering=true,
            Shape= Syncfusion.EJ2.Maps.MarkerType.Image,
            Height=40,
            Width=40,
            ImageUrl="../styles/images/maps/cluster.svg",
            LabelStyle= new MapsFont {
                Color="White"
            }

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

     }
    <div class="control-section">
        <ejs-maps id="maps" format="n" useGroupingSeparator="true">
            <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.world" markerClusterSettings="cluster">
                    <e-layersettings-shapesettings fill="#C1DFF5"></e-layersettings-shapesettings>
                    <e-layersettings-markers>
                        <e-layersettings-marker visible="true" shape="Image" imageUrl="../styles/images/maps/ballon.png" height="20" width="20" animationDuration="0" tooltipSettings="tooltip" dataSource="ViewBag.marker"></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.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));
        }
    }
}

Refer to the API for marker feature.

Contents

Marker and marker template
Adding marker objects to map
Marker shapes
Customize marker shapes from data source
Bind different colors and shapes to the marker from data source
Marker Zooming
Marker Cluster Expand
Enable the Legend for map markers
Marker Clustering

Contents

Marker and marker template
Adding marker objects to map
Marker shapes
Customize marker shapes from data source
Bind different colors and shapes to the marker from data source
Marker Zooming
Marker Cluster Expand
Enable the Legend for map markers
Marker Clustering

Please provide additional information

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