A quick start project that helps you create an Angular 5 maps with minimal code configuration. Map features covered in this project This Angular 5 map project is created using Angular CLI 1.5.6. 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 5+ TypeScript 2.6+ Angular 5 Maps – Introduction The Angular 5 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 5 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@1.5.6 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. 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 5 maps. You can explore the Angular 5 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-maps-angular-getting-started Stackblitz sample link: https://stackblitz.com/edit/angular-5gga9u?file=src%2Fapp%2Fmaps.component.ts
A quick start project that helps you create an Angular 5 circular gauge with minimal code configuration. Circular-gauge features covered in this project This Angular 5 circular gauge project is created using Angular CLI 1.5.6. The circular gauge features listed in this project are as follows. Axis for circular gauge. Range for circular gauge. Pointer for circular gauge. 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 5+ TypeScript 2.6+ Angular 5 CircularGauge – Introduction The Angular 5 circular gauge used in this project is created from the Syncfusion ‘ej2-angular-circulargauge’ package. You can simply define circular gauge as < ejs-circulargauge > within the template. Dependencies Before starting with this project, you need to add the Syncfusion `ej2-angular-circulargauge` package to the Angular 5 circular gauge 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@1.5.6 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 circulargauge component After the Angular application has been created, use the following command to install the circular gauge package. cd my-app npm install @syncfusion/ej2-angular-circulargauge –save The –save flag saves the circular gauge package as a dependency in the package.json file. All configuration related to environment setup has now been completed. Before configuring the circular gauge, a component is needed to render the circular gauge. To create an Angular component, use the following Angular CLI command. ng generate component circulargauge Now, import the circular gauge 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 { CirculargaugeComponent } from './circulargauge/circulargauge.component'; import {CircularGaugeModule} from '@syncfusion/ej2-angular-circulargauge'; @NgModule({ declarations: [ AppComponent, CirculargaugeComponent ], imports: [ BrowserModule, AppRoutingModule, CircularGaugeModule ], providers: [CircularGaugeModule, AnnotationsService], bootstrap: [AppComponent] }) export class AppModule { } Creating the circular gauge component All the configurations related to the circular gauge has now been completed. Now, you need to define the first circular gauge in the circulargauge.component.html file. <ejs-circulargauge></ejs-circulargauge> Then, add the circular gauge component in the app.component.html file. < app-circulargauge ></ app-circulargauge > Go to the application directory, and launch the server by using following command. ng serve-open After all the files have been compiled successfully, the basic circular gauge will look like the following screenshot. Injecting modules Now, in the basic circular gauge, some features have been modularized and they 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 the circular gauge with annotation, define the providers of the app.module.ts file. This service provides access to the annotation functionality. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { CirculargaugeComponent } from './circulargauge/circulargauge.component'; import {CircularGaugeModule, AnnotationsService} from '@syncfusion/ej2-angular-circulargauge'; @NgModule({ declarations: [ AppComponent, CirculargaugeComponent ], imports: [ BrowserModule, AppRoutingModule, CircularGaugeModule ], providers: [CircularGaugeModule, AnnotationsService], bootstrap: [AppComponent] }) export class AppModule { } The following code sample demonstrates how to render the circular gauge. <ejs-circulargauge style='display:block;' id='range-container' #range=''> <e-axes> <e-axis minimum=0 radius='80%' maximum=120 startAngle=210 endAngle=150 [majorTicks]='majorTicks' [labelStyle]='labelStyle' [lineStyle]='lineStyle' [minorTicks]='minorTicks' > <e-ranges> <e-range start=0 end=40 color='#30B32D'></e-range> <e-range start=40 end=80 color='#FFDD00'></e-range> <e-range start=80 end=120 color='#F03E3E'></e-range> </e-ranges> <e-pointers> <e-pointer value=65 radius='60%' color='#757575' pointer Width=8 [needleTail]='tail' [cap]="pointerCap"> </e-pointer> </e-pointers> </e-axis> </e-axes> </ejs-circulargauge> import { Component, OnInit, ViewChild } from '@angular/core'; import { CircularGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-angular-circulargauge'; @Component({ selector: 'app-circulargauge', templateUrl: './circulargauge.component.html', styleUrls: ['./circulargauge.component.css'] }) export class CirculargaugeComponent implements OnInit { @ViewChild('range') public circulargauge: CircularGaugeComponent; public lineStyle: object; public labelStyle: object; public majorTicks: object; public minorTicks: object; public tail: object; public pointerCap: object; constructor() { } ngOnInit() { this.lineStyle = { width: 10, color: 'transparent' }; // Initializing LabelStyle this.labelStyle = { position: 'Inside', useRangeColor: false, font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' } }; this.majorTicks = { height: 10, offset: 5, color: '#9E9E9E' }; this.minorTicks = { height: 0 }; this.tail = { length: '18%', color: '#757575' }; this.pointerCap = { radius: 7, color: '#757575' }; } } Annotation After defining the AnnotationService in providers, you can access the annotation functionality from the circular gauge. <ejs-circulargauge style='display:block;' id='range-container' #range=''> <e-axes> <e-axis minimum=0 radius='80%' maximum=120 startAngle=210 endAngle=150 [majorTicks]='majorTicks' [labelStyle]='labelStyle' [annotations]='annotaions' [lineStyle]='lineStyle' [minorTicks]='minorTicks' > <e-ranges> <e-range start=0 end=40 color='#30B32D'></e-range> <e-range start=40 end=80 color='#FFDD00'></e-range> <e-range start=80 end=120 color='#F03E3E'></e-range> </e-ranges> <e-pointers> <e-pointer value=65 radius='60%' color='#757575' pointer Width=8 [needleTail]='tail' [cap]="pointerCap"> </e-pointer> </e-pointers> </e-axis> </e-axes> </ejs-circulargauge> import { Component, OnInit, ViewChild } from '@angular/core'; import { CircularGaugeComponent, ILoadedEventArgs } from '@syncfusion/ej2-angular-circulargauge'; @Component({ selector: 'app-circulargauge', templateUrl: './circulargauge.component.html', styleUrls: ['./circulargauge.component.css'] }) export class CirculargaugeComponent implements OnInit { @ViewChild('range') public circulargauge: CircularGaugeComponent; public lineStyle: object; public labelStyle: object; public majorTicks: object; public minorTicks: object; public tail: object; public pointerCap: object; public annotaions: object; constructor() { } ngOnInit() { this.lineStyle = { width: 10, color: 'transparent' }; // Initializing LabelStyle this.labelStyle = { position: 'Inside', useRangeColor: false, font: { size: '12px', fontFamily: 'Roboto', fontStyle: 'Regular' } }; this.majorTicks = { height: 10, offset: 5, color: '#9E9E9E' }; this.minorTicks = { height: 0 }; this.tail = { length: '18%', color: '#757575' }; this.pointerCap = { radius: 7, color: '#757575' }; this.annotaions = [{ content: '<div><span style="font-size:14px; color:#9E9E9E; font-family:Regular">Speedometer</span></div>', radius: '30%', angle: 0, zIndex: '1' }, { content: '<div><span style="font-size:24px; color:#424242; font-family:Regular">65 MPH</span></div>', radius: '40%', angle: 180, zIndex: '1' }]; } } Run the application with the “ng serve” command in command prompt to view the output of the Angular 5 circular gauge. You can explore the Angular 5 Circular Gauge 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-circular-gauge-angular-getting-started Stackblitz sample link: https://stackblitz.com/edit/angular-1sc3v6?file=src%2Fapp%2Fcirculargauge.component.ts
