Search results

Multilayer in React Maps component

14 Apr 2021 / 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.

Initialize the map component with SubLayer option by using the type property. The shape layer is the core layer of the map. Multiple layers can be added in a shape layer as sublayers as mentioned in the following code example. To know more about multiple layers, please refer to the API documentation.

Source
Preview
index.tsx
index.jsx
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';
//tslint:disable
ReactDOM.render(
      <MapsComponent id="maps">
        <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>,
      document.getElementById("maps") as HTMLElement
      );
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';
//tslint:disable
ReactDOM.render(<MapsComponent id="maps">
        <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>, document.getElementById("maps"));