How to get started easily with Syncfusion Angular 9 Maps?

5 mins read

A quick start project that helps you create an Angular 9 maps with minimal code configuration.

angular 8 map view

Map features covered in this project

This Angular 9 map project is created using Angular CLI 9.0.2 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.

Angular 9+
TypeScript 3.7+

Angular 9 Maps – Introduction

The Angular 9 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 9 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 -g @angular/[email protected]

Then, create a new Angular application using the following command.

ng new my-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.

cd my-app

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.

angular 8 map view

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', };

}

angular 8 map with modules

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' };