How can I help you?
Layers in Angular 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.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { MapsModule } from '@syncfusion/ej2-angular-maps'
import { Component, ViewEncapsulation } from '@angular/core';
import { usa_map } from './usa';
import { california } from './california';
import { texas } from './texas';
@Component({
imports: [
MapsModule
],
standalone: true,
selector: 'app-container',
// specifies the template string for the maps component.
template:`<div class="control-section">
<div align='center'>
<ejs-maps id='container' style="display:block;">
<e-layers>
<e-layer [shapeData]='usMap' [shapeSettings]='us_shapeSettings'></e-layer>
<e-layer [shapeData]='texas' type='SubLayer' [shapeSettings]='texas_shapeSettings'></e-layer>
<e-layer [shapeData]='california' type='SubLayer' [shapeSettings]='california_shapeSettings'></e-layer>
</e-layers>
</ejs-maps>
</div>
</div>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
public usMap = usa_map;
public us_shapeSettings = {
fill: '#E5E5E5',
border: {
color: 'black',
width: 0.1
}
};
public texas = texas;
public texas_shapeSettings = {
fill: 'rgba(141, 206, 255, 0.6)',
border: {
color: '#1a9cff',
width: 0.25
}
};
public california=california;
public california_shapeSettings = {
fill: 'rgba(141, 206, 255, 0.6)',
border: {
color: '#1a9cff',
width: 0.25
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));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, sublayers 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 sublayers.
[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:
`<ejs-maps id='rn-container'>
<e-layers>
<e-layer [shapeData] = 'shapeData' [shapeSettings] ='shapeSettings'></e-layer>
<e-layer [shapeData] = 'shapeData1' [shapeSettings] ='shapeSettings1' [type] = 'type'></e-layer>
</e-layers>
</ejs-maps>`
})
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
}
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));[app.module.ts]
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 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 { 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:
`<ejs-maps id='rn-container' [baseLayerIndex] ='baseLayerIndex'>
<e-layers>
<e-layer [shapeData] = 'shapeData'></e-layer>
<e-layer [shapeData] = 'shapeData1'></e-layer>
</e-layers>
</ejs-maps>`
})
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;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));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.