Multiple layer in React Maps component
18 Jan 202310 minutes 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.
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 />);
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 />);