How to get started easily with Syncfusion Angular 11 Maps?
A quick start project that helps you create an Angular 11 maps with minimal code configuration.
Map features covered in this project
This Angular 11 map project is created using Angular CLI 11.2.3. The map features listed in this project are as follows.
- Legends for maps.
- Markers for maps.
- Tooltips for maps.
Project pre-requisites
Make sure that you have the following compatible versions of TypeScript and Angular in your machine before starting to work on this project.
- Node.js (Latest version)
- Angular 11
- Angular CLI
- Typescript 4+
- Visual Studio Code for Editor
Angular 11 Maps - Introduction
The Angular 11 maps used in this project is created from the Syncfusion `ej2-angular-maps` package. You can simply define map as <ejs-maps> within a template.
Dependencies
Before starting with this project, you need to add the Syncfusion `ej2-angular-maps` package to the Angular 11 maps from npmjs, which is distributed in npm as @syncfusion scoped packages.
Creating an Angular Application
- To create an Angular application, install the Angular CLI globally using the following command.
npm install @angular/cli@11.2.3
- Then, create a new Angular application using the following command.
ng new angular11-app cd angular11-app
This command downloads all the files needed and initializes the npm installation.
Installing the maps component
- After the Angular application has been created, use the following command to install the maps package.
npm install @syncfusion/ej2-angular-maps --save
The --save flag saves the maps package as a dependency in the package.json file.
- All the configurations related to environment setup has now been completed. Before configuring the maps, a component is needed to render the maps. To create an Angular component, use the following Angular CLI command.
ng generate component maps
- Now, import the map module in the app.module.ts file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapsComponent } from './maps/maps.component';
import { MapsAllModule} from '@syncfusion/ej2-angular-maps';
@NgModule({
declarations: [
AppComponent,
MapsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MapsAllModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
Creating the maps component
- All the configurations related to the maps has now been completed. Now, you can define first map in the map.component.html file.
<ejs-maps></ejs-maps>
- Then, add the maps component in the app.component.html file.
<app-maps></app-maps>
- Go to the application directory, and launch the server using following command.
ng serve --open
The following screenshot illustrate the view of the maps after all the files have been compiled successfully.
Injecting Modules
Now, in the basic maps, some features are modularized, and they are available as a separate service, so you can use only the modules you need to keep your app lightweight. For example, if you want to visualize maps with legends, markers, or tooltips, define the providers of the app.module.ts file. This service provides access to the markers, legends, and tooltips functionalities.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapsComponent } from './maps/maps.component';
import { MapsModule, MarkerService, LegendService, MapsTooltipService } from '@syncfusion/ej2-angular-maps';
@NgModule({
declarations: [
AppComponent,
MapsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MapsModule
],
providers: [LegendService, MarkerService, MapsModule, MapsTooltipService],
bootstrap: [AppComponent]
})
The following code sample demonstrates how to render the maps.
<ejs-maps id='container' style="display:block;" >
<e-layers>
<e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'>
</e-layer>
</e-layers>
</ejs-maps>
import { Component, OnInit } from '@angular/core';
import { world_Map } from './worldMap';
import {colorMapping} from './colormapping';
@Component({
selector: 'app-maps',
templateUrl: './maps.component.html',
styleUrls: ['./maps.component.css']
})
export class MapsComponent implements OnInit {
public shapeData: object;
public dataSource: object;
public shapeSettings: object;
constructor() { }
ngOnInit() {
this.shapeData = world_Map;
this.dataSource = colorMapping;
this.shapeSettings = { colorValuePath: 'color', };
}
}
Legend
After defining the LegendService in providers, you can access the legend functionality from the maps. To enable legends in maps, set the visible property in legends to true.
<ejs-maps id='container' style="display:block;" [legendSettings] ='legendSettings'>
<e-layers>
<e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'>
</e-layer>
</e-layers>
</ejs-maps>
export class MapsComponent implements OnInit {
public shapeData: object;
public dataSource: object;
public shapeSettings: object;
public legendSettings: object;
ngOnInit() {
this.shapeData = world_Map;
this.dataSource = colorMapping;
this.shapeSettings = { colorValuePath: 'color', };
this.legendSettings = {
visible: true
};
}
}
Marker
After defining the MarkerService in providers, you can access the marker functionality from the maps. To enable markers in maps, set the visible property in markers to true.
<ejs-maps id='container' style="display:block;" >
<e-layers>
<e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'>
<e-markerSettings >
<e-markerSetting visible= true [dataSource] ='markerdataSource' height= 20 width= 20 ></e-markerSetting>
</e-markerSettings>
</e-layer>
</e-layers>
</ejs-maps>
export class MapsComponent implements OnInit {
public shapeData: object;
public dataSource: object;
public shapeSettings: object;
public markerdataSource: object[];
ngOnInit() {
this.shapeData = world_Map;
this.dataSource = colorMapping;
this.shapeSettings = { colorValuePath: 'color', };
this.markerdataSource = [
{ latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },
{ latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },
{ latitude: 40.7424509, longitude: -74.0081468, name: 'New York' },
{ latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' },
{ latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' },
{ latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' },
{ latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' },
{ latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' },
{ latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' },
{ latitude: 51.5326602, longitude: -0.1262422, name: 'London' }
];
}
}
Tooltip
After defining the MapsTooltipService in providers, you can access the marker with tooltip functionality from maps. To enable tooltip in maps, set the visible property in tooltips to true.
<ejs-maps id='container' style="display:block;" >
<e-layers>
<e-layer [shapeData] = 'shapeData' shapePropertyPath= 'continent' shapeDataPath= 'continent' [dataSource] ='dataSource' [shapeSettings]= 'shapeSettings'>
<e-markerSettings >
<e-markerSetting visible= true [dataSource] ='markerdataSource' height= 20 width= 20 [tooltipSetting] =' tooltipSetting '></e-markerSetting >
</e-markerSettings>
</e-layer>
</e-layers>
</ejs-maps>
export class MapsComponent implements OnInit {
public shapeData: object;
public dataSource: object;
public shapeSettings: object;
public markerdataSource: object[];
public tooltipSettings: object;
ngOnInit() {
this.shapeData = world_Map;
this.dataSource = colorMapping;
this.shapeSettings = { colorValuePath: 'color', };
this.tooltipSettings = { visible: true, valuePath: 'name' };
this.markerdataSource = [
{ latitude: 37.6276571, longitude: -122.4276688, name: 'San Bruno' },
{ latitude: 33.5302186, longitude: -117.7418381, name: 'Laguna Niguel' },
{ latitude: 40.7424509, longitude: -74.0081468, name: 'New York' },
{ latitude: -23.5268201, longitude: -46.6489927, name: 'Bom Retiro' },
{ latitude: 43.6533855, longitude: -79.3729994, name: 'Toronto' },
{ latitude: 48.8773406, longitude: 2.3299627, name: 'Paris' },
{ latitude: 52.4643089, longitude: 13.4107368, name: 'Berlin' },
{ latitude: 19.1555762, longitude: 72.8849595, name: 'Mumbai' },
{ latitude: 35.6628744, longitude: 139.7345469, name: 'Minato' },
{ latitude: 51.5326602, longitude: -0.1262422, name: 'London' }
];
}
};
Run the application with the “ng serve” command in command prompt to view the output of Angular 11 maps.
You can explore the Angular 11 maps with more options. and you can also try playing with the downloadable example link in this knowledge base article.
Github source link: https://github.com/SyncfusionExamples/ej2-angular-11-maps
