Multiple layer in EJ2 TypeScript Maps control
27 Apr 20234 minutes to read
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 { Maps } from '@syncfusion/ej2-maps';
// initialize Maps component
let map: Maps = new Maps({
layers: [
{
shapeData: usa_map,
shapeSettings: {
fill: '#E5E5E5',
border: {
color: 'black',
width: 0.1
}
}
},
{
shapeData: texas,
type: 'SubLayer',
shapeSettings: {
fill: 'rgba(141, 206, 255, 0.6)',
border: {
color: '#1a9cff',
width: 0.25
}
}
},
{
shapeData: california,
type: 'SubLayer',
shapeSettings: {
fill: 'rgba(141, 206, 255, 0.6)',
border: {
color: '#1a9cff',
width: 0.25
}
}
}
]
}, '#element');
<!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="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="usa.js"></script>
<script src="california.js"></script>
<script src="texas.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container' style="height: 500px; width: 700px">
<div id='element'></div>
</div>
</body>
</html>