Search results

Multilayer in React Maps component

02 Feb 2023 / 1 minute to read

Adding multiple layers in the Map

The multilayer support allows loading multiple shape files in a single container and enables Maps to display more information. The shape layer is the main layer of the Maps. Multiple layers can be added in a shape layer as SubLayer using the type property.

Source
Preview
index.jsx
index.tsx
Copied to clipboard
import { usa_map } from 'usa.ts';
import { california } from 'california.ts';
import { texas } from 'texas.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
    return (<MapsComponent>
        <LayersDirective>
          <LayerDirective shapeData={usa_map} shapeSettings={{
        fill: '#E5E5E5',
        border: {
            color: 'black',
            width: 0.1
        }
    }}>
          </LayerDirective>
          <LayerDirective shapeData={texas} type='SubLayer' shapeSettings={{
        fill: 'rgba(141, 206, 255, 0.6)',
        border: {
            color: '#1a9cff',
            width: 0.25
        }
    }}>
          </LayerDirective>
          <LayerDirective shapeData={california} type='SubLayer' shapeSettings={{
        fill: 'rgba(141, 206, 255, 0.6)',
        border: {
            color: '#1a9cff',
            width: 0.25
        }
    }}>
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);
Copied to clipboard
import { usa_map } from 'usa.ts';
import { california } from 'california.ts';
import { texas } from 'texas.ts';
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MapsComponent, LayersDirective, LayerDirective } from '@syncfusion/ej2-react-maps';
export function App() {
return(
      <MapsComponent >
        <LayersDirective>
          <LayerDirective shapeData={usa_map}
                          shapeSettings={ {
                              fill: '#E5E5E5',
                              border: {
                                  color: 'black',
                                  width: 0.1
                              }
                          } }>
          </LayerDirective>
          <LayerDirective shapeData={texas}
                          type='SubLayer'
                          shapeSettings= { {
                              fill: 'rgba(141, 206, 255, 0.6)',
                              border: {
                                  color: '#1a9cff',
                                  width: 0.25
                              }
                          } }>
          </LayerDirective>
          <LayerDirective shapeData={california}
                          type='SubLayer'
                          shapeSettings= { {
                              fill: 'rgba(141, 206, 255, 0.6)',
                              border: {
                                  color: '#1a9cff',
                                  width: 0.25
                              }
                          } }>
          </LayerDirective>
        </LayersDirective>
      </MapsComponent>
      );
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);