Custom path in EJ2 TypeScript Maps control

27 Apr 20233 minutes 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. Please refer to the following example to render the bus seat selection.

import { seat } from './seat.ts';
import { Maps,Selection } from '@syncfusion/ej2-maps';
Maps.Inject(Selection);
// initialize Maps component
let map: Maps = new Maps({
        layers: [
        {
            geometryType: 'Normal',
            shapeData: seat,
            selectionSettings: {
                enable: true,
                opacity: 1,
                enableMultiSelect: true
            }
        }
    ],
    height: '400'
}, '#container');
<!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="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <script src="seat.js"></script>
    
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
    </div>
    
</body>

</html>

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