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.

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 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">
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