Custom path in React Maps component

3 Mar 20232 minutes to read

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

import { seatData } from 'seat.ts';
import * as React from 'react';
import {
  MapsComponent, LayersDirective, LayerDirective,
  Inject, Selection
} from '@syncfusion/ej2-react-maps';
import * as ReactDOM from 'react-dom';
  export function App() {
        return (
          <div className='control-section row'>
            <div className='col-md-8'>
              <div style={{ width: 200, margin: 'auto', paddingBottom: 20 }}>
                <div id="sampletitle">Bus seat selection</div>
              </div>
              <div style={{ border: '3px solid darkgray', width: 200, display: 'block', margin: 'auto' }}>
                <MapsComponent  height='400'>
                  <Inject services={[Selection]} />
                  <LayersDirective>
                    <LayerDirective shapeData={seat} geometryType='Normal'>
                    </LayerDirective>
                  </LayersDirective>
                </MapsComponent>
              </div></div></div>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);