Search results

Custom path in JavaScript (ES5) Maps control

14 Apr 2021 / 1 minute to read

You can customize the maps control 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. Please refer to the following code example to render the bus seat selection.

Source
Preview
index.js
index.html
Copied to clipboard
var maps = new ej.maps.Maps({
        layers: [
        {
            geometryType: 'Normal',
            shapeData: seat,
            selectionSettings: {
                enable: true,
                opacity: 1,
                enableMultiSelect: true
            }
        }
    ],
    height: '400'
    });
    maps.appendTo('#container');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
    <title>EJ2 Maps</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    
    <script src="seat.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div class="col-lg-9 control-section">
        <div style="width:200px;margin:auto;padding-bottom:20px">
            <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">
            <div id="container"></div>
        </div>
    </div>
    
    


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
 <div class="col-lg-9 control-section">
      <div style="width:200px;margin:auto;padding-bottom:20px">
          <img src="src/app/images/bus-icon.png" 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="src/app/images/wheel.png" style="width:30px;height:30px;margin-left:18%;margin-top:10px">
          <div id="maps"></div>
      </div>
  </div>