Search results

Zooming in ASP.NET MVC Maps control

21 Oct 2021 / 1 minute to read

The center position zooming can be achieved by using the MapsCenterPosition class and ZoomFactor property as mentioned in the following example. The center position is used to configure the zoom level of Maps, and the zoom factor is used to specify the center position where the Maps should be displayed.

razor
centerposition.cs
Copied to clipboard
@using Syncfusion.EJ2;
@using Syncfusion.EJ2.Maps;
@{
    var zoom = new Syncfusion.EJ2.Maps.MapsZoomSettings
    {
        Enable = true,
        ZoomFactor = 13
    };
    var centerPosition = new Syncfusion.EJ2.Maps.MapsCenterPosition
    {
        Latitude = 25.5424414701248,
        Longitude = -89.62646484375
    };
}


@Html.EJS().Maps("maps").ZoomSettings(zoom).CenterPosition(centerPosition).Layers(l =>
{
    l.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;
using Syncfusion.EJ2.Charts;

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

Annotation zindex