Search results

Custom Path in ASP.NET MVC Maps control

21 Oct 2021 / 1 minute to read

Maps control can be customized as the desired layout using the custom path map feature. Here, the Maps control has been showcased with normal geometry type shapes to represent the bus seat selection layout.

razor
custom-path.cs
Copied to clipboard
@using Syncfusion.EJ2.Maps
@using Syncfusion.EJ2

@Html.EJS().Maps("container").Layers(new List<Syncfusion.EJ2.Maps.MapsLayer>
{
                    new Syncfusion.EJ2.Maps.MapsLayer
                    {
                        GeometryType = GeometryType.Normal,
                        ShapeData = ViewBag.seatData,
                        ShapeSettings = new MapsShapeSettings
                        {
                          ColorValuePath = "fill"
                        },
                        } }).Render()

<div class="col-lg-9">
    <div style="width:200px;margin:auto;padding-bottom:20px">
        <img src="~/wheel.png" alt="Bus icon" style="width:25px;height:25px;float:left">
        <div style="padding-left:30px;font-size:20px;font-weight:400;">Bus seat selection</div>
    </div>
    <div style="border: 3px solid darkgray;width:200px;display:block;margin:auto;border-radius:5px">
        <img src="~/bus-icon.jpg" alt="Steering wheel icon" style="width:30px;height:30px;margin-left:18%;margin-top:10px">
    </div>
</div>
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.seatData = GetSeatData();
            return View();
        }
        public object GetSeatData()
        {
            string text = System.IO.File.ReadAllText("./wwwroot/scripts/MapsData/seat.json");
            return JsonConvert.DeserializeObject(text);
        }
    }
}

Custom path map