Methods in ASP.NET CORE Maps component

19 Mar 20246 minutes to read

Methods

This section explains the methods used in the Maps component.

getMinMaxLatitudeLongitude

The getMinMaxLatitudeLongitude method returns the minimum and maximum latitude and longitude values of the Maps visible area. This method returns a IMinMaxLatitudeLongitude object that contains the Maps minimum and maximum latitude and longitude coordinates.

@using Syncfusion.EJ2.Maps

@{
var data = new[]
{
new { latitude= 22.572646, longitude= 88.363895 },
new { latitude= 25.0700428, longitude= 67.2847875}
};

}


<button id="button">GetMinMaxLatitudeLongitude</button>
<p id="coordinatesDisplay"></p>

<ejs-maps id="maps" width="450px">
    <e-maps-centerposition latitude="21.815447" longitude="80.1932"></e-maps-centerposition>
    <e-maps-zoomsettings enable="true" zoomFactor="7"></e-maps-zoomsettings>
    <e-maps-layers>
        <e-maps-layer shapeData="ViewBag.world_map">
            <e-layersettings-markers>
                <e-layersettings-marker visible="true" shape="Circle" animationDuration="1500" dataSource="data"
                    height="25" width="25"></e-layersettings-marker>
            </e-layersettings-markers>
        </e-maps-layer>
    </e-maps-layers>
</ejs-maps>

<script>
    function formatKey(key) {
        if (key === 'minLatitude') {
            return 'Minimum Latitude';
        } else if (key === 'maxLatitude') {
            return 'Maximum Latitude';
        } else if (key === 'minLongitude') {
            return 'Minimum Longitude';
        } else if (key === 'maxLongitude') {
            return 'Maximum Longitude';
        }
    }

    document.getElementById('button').onclick = () => {
        var maps = document.getElementById('maps').ej2_instances[0];
        mapBoundCoordinates = maps.getMinMaxLatitudeLongitude();
        const displayDiv = document.getElementById('coordinatesDisplay');
        displayDiv.innerHTML = '';
        if (mapBoundCoordinates) {
            for (const key in mapBoundCoordinates) {
                if (Object.hasOwnProperty.call(mapBoundCoordinates, key)) {
                    const p = document.createElement('p');
                    const formattedKey = formatKey(key);
                    p.textContent = `${formattedKey}: ${mapBoundCoordinates[key]}`;
                    displayDiv.appendChild(p);
                }
            }
        } else {
            displayDiv.textContent = 'No coordinates available';
        }
    };
</script>
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();
            ViewBag.worldMap = GetMap();
            return View();
        }
        
        // To access the data in Core
        public object GetWorldMap()
        {
            string allText = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/WorldMap.js");
            return JsonConvert.DeserializeObject(allText);
        }

        // To access the data in MVC
        public object GetMap()
        {
            string allText = System.IO.File.ReadAllText(Server.MapPath("~/App_Data/WorldMap.json"));
            return JsonConvert.DeserializeObject(allText, typeof(object));
        }
    }
}

getMinMaxLatitudeLongitude method