Search results


Map is maintained through layers and it can accommodate one or more layers.


The Multilayer support allows you to load multiple shape files in a single container, enabling maps to display more information.

Adding Multiple Layers in the Map

The shape layers is the core layer of the map. The multiple layers can be added in the shape layer type as SubLayer.


In this example, World Map shape is used as shape data by utilizing the “WorldMap.json” file in the following folder structure obtained from downloaded Maps_GeoJSON folder.

..\ Maps_GeoJSON\

You can assign the complete contents in WorldMap.json file to new JSON object. For better understanding, a TS file WorldMap.ts is already created to store JSON data in JSON object “worldmap” and also copy the WorldMap.json file data, bind value to “usMap” like “worldmap”.


export let worldmap = //Paste all the content copied from the JSON file//


export let world_map = //Paste all the content copied from the WorldMap.JSON file//
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';

            <MapsComponent id="maps">
                    <LayerDirective shapeData={world_map}
                        shapeSettings={ {
                            fill: '#9CBF4E',
                            border: { width: 0.5, color: 'White' },
                        } } />
                    <LayerDirective shapeData={usa_map} type="SubLayer"
                        shapeSettings={ {
                            fill: 'orange',
                            border: { width: 1, color: 'White' },
                        } } />
document.getElementById("maps") as HTMLElement

Refer the API for Layers feature.