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.
The shape layers is the core layer of the map. The multiple layers can be added in the shape layers as subLayers within the shape layers.
The subLayer is the collection of shape layers.
In this example, World Map shape is used as shape data by utilizing the USA.json” file in the following folder structure obtained from downloaded Maps_GeoJSON folder.
..\ Maps_GeoJSON\
You can assign the complete contents in USA.json file to new JSON object. For better understanding, a TS file USA.ts is already created to store JSON data in JSON object usamap and also copy the USA.json file data, bind value to “california” like “worldmap”.
[WorldMap.ts]
export let world_map = //Paste all the content copied from the JSON file//[usa.ts]
<!DOCTYPE html><html lang="en"><head>
<title>EJ2 Maps</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript UI Controls">
<meta name="author" content="Syncfusion">
<link href="index.css" rel="stylesheet">
<script src="../../maps.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container" style="height: 500px; width: 500px">
<div id="element"></div>
</div>
<script src="app.js"></script>
<script>
let loader = document.getElementById('loader');
let container = document.getElementById('container');
if (loader) {
loader.style.display = "none";
}
if (container) {
container.style.visibility = "visible";
}
</script>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Refer the API for Layers feature.