How can I help you?
Layers in React Maps component
6 Feb 202611 minutes to read
Layers are the fundamental building blocks of the Maps component. Each layer can display shape data from GeoJSON files or map providers. The Maps component renders content through the layers property, and multiple layers can be added to create rich, layered map visualizations.
Multilayer
The Multilayer support allows loading multiple shape files and map providers in a single container, enabling Maps to display more information. The shape layer or map providers are the main layers of the Maps. Multiple layers can be added as SubLayer over the main layers using the type property of layers.
Sublayer
A sublayer is an overlay layer that renders on top of the main layer. It allows displaying multiple shape files in a single map view. For example, a sublayer can highlight specific states, display rivers, valleys, or cities over a country map. Similar to the main layer, sub layers support markers, bubbles, color mapping, and legends.
In the following example, the United States map shape from the usa.ts file serves as the main layer, while texas.ts and california.ts files are rendered as sub layers.
import { texas } from './texas.ts';
import { usa_map } from 'usa.ts';
import { california } from 'california.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: { width: 0.1, color: 'Black' },
} } />
<LayerDirective shapeData={texas} type="SubLayer"
shapeSettings={ {
fill: 'rgba(141, 206, 255, 0.6)',
border: { width: 0.25, color: '#1a9cff' },
} } />
<LayerDirective shapeData={california} type="SubLayer"
shapeSettings={ {
fill: 'rgba(141, 206, 255, 0.6)',
border: { width: 0.25, color: '#1a9cff' },
} } />
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { texas } from './texas.ts';
import { usa_map } from './usa.ts';
import { california } from './california.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: { width: 0.1, color: 'Black' },
} } />
<LayerDirective shapeData={texas} type="SubLayer"
shapeSettings={ {
fill: 'rgba(141, 206, 255, 0.6)',
border: { width: 0.25, color: '#1a9cff' },
} } />
<LayerDirective shapeData={california} type="SubLayer"
shapeSettings={ {
fill: 'rgba(141, 206, 255, 0.6)',
border: { width: 0.25, color: '#1a9cff' },
} } />
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Displaying a different layer in the view
Multiple shape files and map providers can be loaded simultaneously in Maps. The baseLayerIndex property is used to determine which layer on the user interface should be displayed. This property is used for the Maps drill-down feature, so when the baseLayerIndex value is changed, the corresponding shape is loaded. In this example, two layers can be loaded with the World map and the United States map. Based on the given baseLayerIndex value the corresponding shape will be loaded in the user interface. If the baseLayerIndex value is set to 0, then the world map will be loaded.
import { world_map } from 'world-map.ts';
import { usa_map } from 'usa.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 baseLayerIndex={1}>
<LayersDirective>
<LayerDirective shapeData={world_map} />
<LayerDirective shapeData={usa_map} />
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);import { world_map } from './world-map';
import { usa_map } from './usa';
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 baseLayerIndex={1}>
<LayersDirective>
<LayerDirective shapeData={world_map} />
<LayerDirective shapeData={usa_map} />
</LayersDirective>
</MapsComponent>
);
}
const root = ReactDOM.createRoot(document.getElementById('container'));
root.render(<App />);Rendering custom shapes
Custom shapes (also known as custom maps) can be rendered in the Maps component for non-geographic visualizations such as bus seat booking layouts, stadium seating arrangements, or floor plans. To render custom shapes, create a JSON file in GeoJSON format with the required geometries either manually or using an online map tool. Set the GeoJSON file to the shapeData property in the Maps layer and set the geometryType to Normal.
Please refer this link for an example GeoJSON file containing information about bus seat selection.
Please refer this link for more information and a live demonstration.