Search results

Annotation in ASP.NET MVC Maps control

15 Oct 2021 / 2 minutes to read

Annotations are used to mark the specific area of interest in the Maps with texts, shapes, or images. Any number of annotations can be added to the Maps component.

Annotation

By using the Content property of MapsAnnotation, text content or id of an element or an HTML string can be specified to render a new HTML element in Maps.

razor
annotation.cs
Copied to clipboard
@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;

@Html.EJS().Maps("maps").Annotations(new List<Syncfusion.EJ2.Maps.MapsAnnotation>{
    new Syncfusion.EJ2.Maps.MapsAnnotation
    {
        Content = "<div id='annotation' style='display:none'><img src=''~/App_Data/ballon.png'></div>",
        X = "0%",
        Y = "50%",
    }
}).Layers(layer =>
{
    layer.ShapeData(ViewBag.worldmap).Add();
}).Render()
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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Annotation

Annotation customization

Changing the z-index

The stack order of an annotation element can be changed using the ZIndex property in the MapsAnnotation.

razor
annotaion-zindex.cs
Copied to clipboard
@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;

@Html.EJS().Maps("maps").Annotations(new List<Syncfusion.EJ2.Maps.MapsAnnotation>{ 
    new Syncfusion.EJ2.Maps.MapsAnnotation
    {
        Content = "<div id='first'><h1>Maps</h1></div>",
        X = "20%",
        Y = "50%",
        ZIndex = "-1"
    }
}).Layers(layer =>
{
    layer.ShapeData(ViewBag.worldmap).Add();
}).Render()
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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Annotation zindex

Positioning an annotation

Annotations can be placed anywhere in the Maps by specifying pixel or percentage values to the X and Y properties in the MapsAnnotation.

razor
annotation-position.cs
Copied to clipboard
@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;

@Html.EJS().Maps("maps").Annotations(new List<Syncfusion.EJ2.Maps.MapsAnnotation>{ 
    new Syncfusion.EJ2.Maps.MapsAnnotation
    {
        Content = "<div id='first'><h1>Maps</h1></div>",
        X = "40%",
        Y = "50%",
        ZIndex = "-1"
    }
}).Layers(layer =>
{
    layer.ShapeData(ViewBag.worldmap).Add();
}).Render()
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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Annotation zindex

Alignment of an annotation

Annotations can be aligned using the HorizontalAlignment and VerticalAlignment properties in the MapsAnnotation. The possible values can be Center, Far, Near and None.

razor
annotation-alignment.cs
Copied to clipboard
@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;

@Html.EJS().Maps("maps").Annotations(new List<Syncfusion.EJ2.Maps.MapsAnnotation>{ 
    new Syncfusion.EJ2.Maps.MapsAnnotation
    {
        Content = "<div id='first'><h1>Maps</h1></div>",
        X = "20%",
        Y = "50%",
        ZIndex = "-1",
        HorizontalAlignment = AnnotationAlignment.Center
    }
}).Layers(layer =>
{
    layer.ShapeData(ViewBag.worldmap).Add();
}).Render()
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.world_map = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Annotation zindex

Multiple Annotation

Multiple annotations can be added to the Maps by adding Multiple MapsAnnotation in the MapsAnnotations and customization for the annotations can be done with the MapsAnnotation.

razor
multiple-annotation.cs
Copied to clipboard
@using Syncfusion.EJ2.Maps;
@using Syncfusion.EJ2;

@Html.EJS().Maps("maps").Annotations(new List<Syncfusion.EJ2.Maps.MapsAnnotation>{
    new Syncfusion.EJ2.Maps.MapsAnnotation
    {
        Content = "<div id='first'><h1>Maps</h1></div>",
        X = "50%",
        Y = "0%",
        ZIndex = "-1"
    },
     new Syncfusion.EJ2.Maps.MapsAnnotation {
        Content = "<div id='first'><h1>Maps-Annotation</h1></div>",
        X = "20%",
        Y = "50%",
        ZIndex = "-1"
    }
}).Layers(layer =>
{
    layer.ShapeData(ViewBag.worldmap).Add();
}).Render()
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.worldmap = GetWorldMap();
            return View();
        }
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }
    }
}

Annotation zindex