# Layers in Angular Maps component
The Maps component is rendered through [`layers`](https://ej2.syncfusion.com/angular/documentation/api/maps/#layers) and any number of layers can be added to the Maps.
## 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`](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettingsModel/#type) property of [`layers`](https://ej2.syncfusion.com/angular/documentation/api/maps/#layers).
## Sublayer
Sublayer is a type of shape file layer. It allows loading multiple shape files in a single map view. For example, a sublayer can be added over the main layer to view geographic features such as rivers, valleys and cities in a map of a country. Similar to the main layer, elements in the Maps such as markers, bubbles, color mapping and legends can be added to the sub-layer.
In this example, the United States map shape is used as shape data by utilizing **usa.ts** file, and **texas.ts** and **california.ts** files are used as sub-layers in the United States map.
[`app.component.ts`]
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { Component, OnInit } from '@angular/core';
import { usa_map } from './usa';
import { california } from './california';
@Component({
imports: [
MapsModule
],
standalone: true,
selector: 'app-container',
template:
`
`
})
export class AppComponent implements OnInit {
public shapeData?: object;
public shapeSettings?: object;
public shapeData1?: object;
public type?: string;
public shapeSettings1?: object;
ngOnInit(): void {
this.shapeData = usa_map;
this.shapeSettings = {
fill: '#E5E5E5',
border: {
color: 'black',
width: 0.1
}
}
this.shapeData1 = california;
this.type = 'SubLayer',
this.shapeSettings1 = {
fill: 'rgba(141, 206, 255, 0.6)',
border: {
color: '#1a9cff',
width: 0.25
}
}
}
}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
[`app.module.ts`]
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// import the MapsModule for the Maps component
import { MapsModule } from '@syncfusion/ej2-angular-maps';
import { AppComponent } from './app.component';
@NgModule({
// declaration of ej2-angular-maps module into NgModule
imports: [ BrowserModule, MapsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
```
## Displaying different layer in the view
Multiple shape files and map providers can be loaded simultaneously in Maps. The [`baseLayerIndex`](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsModel/#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`](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsModel/#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`](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsModel/#baselayerindex) value the corresponding shape will be loaded in the user interface. If the [`baseLayerIndex`](https://ej2.syncfusion.com/angular/documentation/api/maps/mapsModel/#baselayerindex) value is set to **0**, then the world map will be loaded.
{% tabs %}
{% highlight ts tabtitle="app.component.ts" %}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { Component, OnInit } from '@angular/core';
import { usa_map } from './usa';
import { world_map } from './world-map';
import { california } from './california';
@Component({
imports: [
MapsModule
],
standalone: true,
selector: 'app-container',
template:
`
`
})
export class AppComponent implements OnInit {
public shapeData?: object;
public shapeData1?: object;
public baseLayerIndex?: number;
ngOnInit(): void {
this.shapeData = world_map;
this.shapeData1 = usa_map;
this.baseLayerIndex = 1;
}
}
{% endhighlight %}
{% highlight ts tabtitle="main.ts" %}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
{% endhighlight %}
{% endtabs %}
## Rendering custom shapes
Custom shapes (also known as custom maps) can be rendered in Maps to represent bus seat booking, cricket stadium, basic home plan/sketch, and so on. To accomplish this, a JSON file in GeoJSON format with proper geometries must be created manually or with the assistance of any online map vendor. The GeoJSON file created must be set to the [`shapeData`](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettingsModel/#shapedata) in the Maps layer, and the [`geometryType`](https://ej2.syncfusion.com/angular/documentation/api/maps/layerSettingsModel/#geometrytype) must be set as **Normal**.
Please refer this [`link`](https://cdn.syncfusion.com/maps/map-data/seat.json) for an example GeoJSON file containing information about bus seat selection.
Please refer this [`link`](https://ej2.syncfusion.com/angular/demos/#/material/maps/seat-selection) for more information and a live demonstration.