diff --git a/browser/src/browser-info.json b/browser/src/browser-info.json
index 60171756f..25834213b 100644
--- a/browser/src/browser-info.json
+++ b/browser/src/browser-info.json
@@ -1,16 +1,16 @@
[
{"ver":"20.0.0-rc.0","name":"igniteui-angular"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-charts"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-core"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-dashboards"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-data-grids"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-excel"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-gauges"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-inputs"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-layouts"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-maps"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-spreadsheet"},
-{"ver":"20.0.1-beta.0","name":"igniteui-angular-spreadsheet-chart-adapter"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-charts"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-core"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-dashboards"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-data-grids"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-excel"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-gauges"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-inputs"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-layouts"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-maps"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-spreadsheet"},
+{"ver":"20.0.2-beta.0","name":"igniteui-angular-spreadsheet-chart-adapter"},
{"ver":"18.1.0","name":"igniteui-theming"},
{"ver":"6.1.0","name":"igniteui-webcomponents"}
]
\ No newline at end of file
diff --git a/samples/charts/data-chart/trendline-layer/ReadMe.md b/samples/charts/data-chart/trendline-layer/ReadMe.md
new file mode 100644
index 000000000..e4b7de978
--- /dev/null
+++ b/samples/charts/data-chart/trendline-layer/ReadMe.md
@@ -0,0 +1,58 @@
+
+
+
+This folder contains Angular application with example of Trendline Layer feature using [DataChart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component.
+
+
+
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+- clone and navigate to this sample in terminal window
+
+```
+git clone https://github.com/IgniteUI/igniteui-angular-examples.git
+git checkout master
+cd ../samples/charts/data-chart/trendline-layer
+```
+
+
+- open above folder in VS Code or type:
+```
+code .
+```
+
+- In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+- open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html).
diff --git a/samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile b/samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile
new file mode 100644
index 000000000..adf04bd95
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile
@@ -0,0 +1 @@
+FROM node:18
\ No newline at end of file
diff --git a/samples/maps/geo-map/display-azure-imagery/.codesandbox/tasks.json b/samples/maps/geo-map/display-azure-imagery/.codesandbox/tasks.json
new file mode 100644
index 000000000..8d92a54cd
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/.codesandbox/tasks.json
@@ -0,0 +1,17 @@
+{
+ // These tasks will run in order when initializing your CodeSandbox project.
+ "setupTasks": [
+ {
+ "name": "Install Dependencies",
+ "command": "yarn install"
+ }
+ ],
+ // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+ "tasks": {
+ "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check": {
+ "name": "Start Project",
+ "command": "node node_modules/@angular/cli/bin/ng serve -o --disable-host-check",
+ "runAtStart": true
+ }
+ }
+}
\ No newline at end of file
diff --git a/samples/maps/geo-map/display-azure-imagery/.stackblitzrc b/samples/maps/geo-map/display-azure-imagery/.stackblitzrc
new file mode 100644
index 000000000..dd44ea00f
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true, "startCommand":"npm start"}
\ No newline at end of file
diff --git a/samples/maps/geo-map/display-azure-imagery/ReadMe.md b/samples/maps/geo-map/display-azure-imagery/ReadMe.md
new file mode 100644
index 000000000..1b83fb80b
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/ReadMe.md
@@ -0,0 +1,58 @@
+
+
+
+This folder contains Angular application with example of Display Azure Imagery feature using [GeoMap](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+Follow these instructions to run this example:
+
+
+- clone and navigate to this sample in terminal window
+
+```
+git clone https://github.com/IgniteUI/igniteui-angular-examples.git
+git checkout master
+cd ../samples/maps/geo-map/display-azure-imagery
+```
+
+
+- open above folder in VS Code or type:
+```
+code .
+```
+
+- In terminal window, run:
+```
+npm install --legacy-peer-deps
+npm run-script start
+```
+
+- open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html).
diff --git a/samples/maps/geo-map/display-azure-imagery/angular.json b/samples/maps/geo-map/display-azure-imagery/angular.json
new file mode 100644
index 000000000..0c2c173c9
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/angular.json
@@ -0,0 +1,120 @@
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "demo": {
+ "schematics": {
+ "@schematics/angular:component": {
+ "style": "scss"
+ },
+ "@schematics/angular:application": {
+ "strict": true
+ }
+ },
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "projectType": "application",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist/demo",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": [
+ "src/polyfills.ts"
+ ],
+ "tsConfig": "tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "src/assets"
+ ],
+ "styles": [
+ "src/styles.scss"
+ ],
+ "scripts": [],
+ "stylePreprocessorOptions": {
+ "includePaths": ["node_modules/"]
+ }
+ },
+ "configurations": {
+ "production": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ],
+ "outputHashing": "all",
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ]
+ },
+ "development": {
+ "buildOptimizer": false,
+ "optimization": false,
+ "vendorChunk": true,
+ "extractLicenses": false,
+ "sourceMap": true,
+ "namedChunks": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "demo:build:production"
+ },
+ "development": {
+ "buildTarget": "demo:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "demo:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "tsconfig.spec.json",
+ "karmaConfig": "karma.conf.js",
+ "styles": [
+ "src/styles.scss"
+ ],
+ "scripts": [],
+ "assets": [
+ "src/assets"
+ ],
+ "inlineStyleLanguage": "scss",
+ "stylePreprocessorOptions": {
+ "includePaths": ["node_modules/"]
+ }
+ }
+ }
+ }
+ }
+ },
+ "defaultProject": "demo",
+ "cli": {
+ "analytics": false
+ }
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/package.json b/samples/maps/geo-map/display-azure-imagery/package.json
new file mode 100644
index 000000000..44fd9a185
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/package.json
@@ -0,0 +1,46 @@
+{
+ "scripts": {
+ "ng": "ng",
+ "update": "ng update",
+ "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o",
+ "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production",
+ "lint": "ng lint"
+ },
+ "dependencies": {
+ "@angular/animations": "20.0.1",
+ "@angular/common": "20.0.1",
+ "@angular/compiler": "20.0.1",
+ "@angular/core": "20.0.1",
+ "@angular/forms": "20.0.1",
+ "@angular/platform-browser": "20.0.1",
+ "@angular/platform-browser-dynamic": "20.0.1",
+ "@types/hammerjs": "2.0.40",
+ "classlist.js": "1.1.20150312",
+ "core-js": "3.21.0",
+ "hammerjs": "2.0.8",
+ "igniteui-angular": "20.0.0-rc.0",
+ "igniteui-angular-charts": "20.0.2-beta.0",
+ "igniteui-angular-core": "20.0.2-beta.0",
+ "igniteui-angular-maps": "20.0.2-beta.0",
+ "intl": "1.2.5",
+ "jszip": "3.8.0",
+ "rxjs": "7.8.1",
+ "tslib": "2.6.1",
+ "web-animations-js": "2.3.2",
+ "zone.js": "~0.15.0"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "20.0.1",
+ "@angular/cli": "20.0.1",
+ "@angular/compiler-cli": "20.0.1",
+ "@angular/language-service": "20.0.1",
+ "@types/node": "18.17.0",
+ "codelyzer": "6.0.2",
+ "jasmine-core": "5.1.1",
+ "jasmine-spec-reporter": "~4.2.1",
+ "sass.js": "0.11.1",
+ "ts-node": "10.9.1",
+ "tslint": "~6.1.3",
+ "typescript": "5.8.3"
+ }
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/src/MapUtility.ts b/samples/maps/geo-map/display-azure-imagery/src/MapUtility.ts
new file mode 100644
index 000000000..ec95ca50a
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/MapUtility.ts
@@ -0,0 +1,108 @@
+import { IgxGeographicMapComponent } from "igniteui-angular-maps";
+
+export enum MapRegion {
+ Caribbean = "Caribbean",
+ UnitedStates = "United States",
+ UnitedKingdom = "United Kingdom",
+ European = "European",
+ SouthAfrica = "South Africa",
+ Poland = "Poland",
+ Australia = "Australia",
+ Japan = "Japan",
+ Uruguay = "Uruguay",
+ Egypt = "Egypt",
+ Hawaii = "Hawaii"
+}
+
+export class MapUtility {
+
+ public static navigateTo(geoMap: IgxGeographicMapComponent, name: MapRegion) {
+
+ const geoRect = this.getRegions()[name];
+ geoMap.zoomToGeographic(geoRect);
+ }
+
+ public static toPixel(num: number): string {
+ const s = Math.abs(num).toFixed(0);
+ return s + " px";
+ }
+
+ public static toLng(num: number): string {
+ num = this.clamp(num, -180, 180);
+
+ let s = Math.abs(num).toFixed(1);
+ if (num < 100) {
+ s = " " + s;
+ }
+
+ if (num > 0) {
+ return s + "°E";
+ } else {
+ return s + "°W";
+ }
+ }
+
+ public static toLat(num: number): string {
+ num = this.clamp(num, -90, 90);
+
+ let s = Math.abs(num).toFixed(1);
+ if (num < 100) {
+ s = " " + s;
+ }
+
+ if (num > 0) {
+ return s + "°N";
+ } else {
+ return s + "°S";
+ }
+ }
+
+ public static clamp(num: number, min: number, max: number): number {
+ return Math.max(min, Math.min(max, num));
+ }
+
+ public static pad(num: number, places?: number): string {
+ places = places || 20;
+ let s = num.toFixed(1).toString();
+ while (s.length < places) { s = " " + s; }
+ return s;
+ }
+
+ public static getBingKey(): string {
+ return "Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq";
+ }
+
+ public static getRegions(): any {
+ // create regions only once
+ if (this.regions === undefined) {
+ this.createRegions();
+ }
+ return this.regions;
+ }
+
+ private static regions: any;
+
+ private static addRegion(name: string, geoRect: any) {
+ geoRect.name = name;
+ geoRect.longitude = geoRect.left + (geoRect.width / 2);
+ geoRect.latitude = geoRect.top + (geoRect.height / 2);
+
+ this.regions[name] = geoRect;
+ }
+
+ private static createRegions() {
+ this.regions = {};
+ this.addRegion(MapRegion.Australia, { left: 81.5, top: -52.0, width: 98.0, height: 56.0 });
+ this.addRegion(MapRegion.Caribbean, { left: -92.9, top: 5.4, width: 35.1, height: 25.8 });
+ this.addRegion(MapRegion.Egypt, { left: 19.3, top: 19.9, width: 19.3, height: 13.4 });
+ this.addRegion(MapRegion.European, { left: -36.0, top: 31.0, width: 98.0, height: 38.0 });
+ this.addRegion(MapRegion.Japan, { left: 122.7, top: 29.4, width: 27.5, height: 17.0 });
+ this.addRegion(MapRegion.Hawaii, { left: -161.2, top: 18.5, width: 6.6, height: 4.8 });
+ this.addRegion(MapRegion.Poland, { left: 13.0, top: 48.0, width: 11.0, height: 9.0 });
+ this.addRegion(MapRegion.SouthAfrica, { left: 9.0, top: -37.1, width: 26.0, height: 17.8 });
+ this.addRegion(MapRegion.UnitedStates, { left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
+ this.addRegion(MapRegion.UnitedKingdom, { left: -15.0, top: 49.5, width: 22.5, height: 8.0 });
+ this.addRegion(MapRegion.Uruguay, { left: -62.1, top: -35.7, width: 10.6, height: 7.0 });
+ }
+
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.html b/samples/maps/geo-map/display-azure-imagery/src/app.component.html
new file mode 100644
index 000000000..d4459e325
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
vpn_key
+
Azure Map Authentication
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.scss b/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
new file mode 100644
index 000000000..269aa8c41
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
@@ -0,0 +1,18 @@
+:host {
+ display: inline;
+ padding: 16px;
+}
+
+.keyInForm {
+ igx-input-group + igx-input-group {
+ margin-top: 24px;
+ }
+}
+
+.dialog-container{
+ display: flex;
+
+ igx-icon {
+ margin-right: 8px;
+ }
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.ts b/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
new file mode 100644
index 000000000..118b9daa3
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
@@ -0,0 +1,50 @@
+import { AfterViewInit, Component, ViewChild } from "@angular/core";
+import { AzureMapsImageryStyle } from "igniteui-angular-maps";
+import { IgxAzureMapsMapImagery } from "igniteui-angular-maps";
+import { IgxGeographicMapComponent } from "igniteui-angular-maps";
+import { MapUtility } from "./MapUtility";
+import { IgxDialogComponent } from "igniteui-angular";
+
+@Component({
+ standalone: false,
+ selector: "app-root",
+ styleUrls: ["./app.component.scss"],
+ templateUrl: "./app.component.html"
+})
+
+export class AppComponent implements AfterViewInit {
+
+ @ViewChild("map", { static: true })
+ public map: IgxGeographicMapComponent;
+ @ViewChild("map2", { static: true })
+ public map2: IgxGeographicMapComponent;
+ public apiKey: string;
+ public form!: IgxDialogComponent;
+
+ public applyApiKey(key: string) {
+ if (!key) return;
+ this.apiKey = key;
+
+ const azureImagery = new IgxAzureMapsMapImagery();
+ azureImagery.apiKey = key;
+ azureImagery.imageryStyle = AzureMapsImageryStyle.Imagery;
+ this.map.backgroundContent = azureImagery;
+
+ const azureImagery2 = new IgxAzureMapsMapImagery();
+ azureImagery2.apiKey = key;
+ azureImagery2.imageryStyle = AzureMapsImageryStyle.Road;
+ this.map2.backgroundContent = azureImagery2;
+ }
+
+ constructor() {
+ }
+
+ public ngAfterViewInit(): void {
+ setTimeout(() => {
+ if (this.form) {
+ this.form.open();
+ }
+ });
+ }
+
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.module.ts b/samples/maps/geo-map/display-azure-imagery/src/app.module.ts
new file mode 100644
index 000000000..4417feab4
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.module.ts
@@ -0,0 +1,32 @@
+import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppComponent } from "./app.component";
+import { IgxAzureMapsMapImageryModule, IgxGeographicMapModule } from "igniteui-angular-maps";
+import { IgxDataChartInteractivityModule } from "igniteui-angular-charts";
+import { IgxDialogModule, IgxIconModule, IgxInputGroupModule } from "igniteui-angular";
+
+
+@NgModule({
+ bootstrap: [AppComponent],
+ declarations: [
+ AppComponent
+],
+ imports: [
+ BrowserModule,
+ BrowserAnimationsModule,
+ CommonModule,
+ FormsModule,
+ IgxGeographicMapModule,
+ IgxAzureMapsMapImageryModule,
+ IgxDataChartInteractivityModule,
+ IgxDialogModule,
+ IgxInputGroupModule,
+ IgxIconModule
+],
+ providers: [],
+ schemas: []
+})
+export class AppModule {}
diff --git a/samples/maps/geo-map/display-azure-imagery/src/environments/environment.prod.ts b/samples/maps/geo-map/display-azure-imagery/src/environments/environment.prod.ts
new file mode 100644
index 000000000..3612073bc
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/environments/environment.prod.ts
@@ -0,0 +1,3 @@
+export const environment = {
+ production: true
+};
diff --git a/samples/maps/geo-map/display-azure-imagery/src/environments/environment.ts b/samples/maps/geo-map/display-azure-imagery/src/environments/environment.ts
new file mode 100644
index 000000000..7b4f817ad
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/environments/environment.ts
@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+ production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.html b/samples/maps/geo-map/display-azure-imagery/src/index.html
new file mode 100644
index 000000000..67a35017e
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+ IgniteUI for Angular | Example | infragistics
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/samples/maps/geo-map/display-azure-imagery/src/main.ts b/samples/maps/geo-map/display-azure-imagery/src/main.ts
new file mode 100644
index 000000000..ec9adcd4a
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/main.ts
@@ -0,0 +1,15 @@
+// tslint:disable:no-string-literal
+import "./polyfills";
+import { enableProdMode } from "@angular/core";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppModule } from "./app.module";
+
+platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
+ // ensure Angular destroys itself on hot reloads.
+ if (window["ngRef"]) {
+ window["ngRef"].destroy();
+ }
+ window["ngRef"] = ref;
+
+ // otherwise, log the boot error
+}).catch(err => console.error(err));
diff --git a/samples/maps/geo-map/display-azure-imagery/src/polyfills.ts b/samples/maps/geo-map/display-azure-imagery/src/polyfills.ts
new file mode 100644
index 000000000..d583cff9c
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/polyfills.ts
@@ -0,0 +1,65 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+* BROWSER POLYFILLS
+*/
+
+// import "core-js/es7/object";
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+//import "classlist.js"; // run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following for the Reflect API. */
+// import "core-js/es6/reflect";
+
+/* Evergreen browsers require these. */
+// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
+// import "core-js/es7/reflect";
+
+/*
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ */
+//import "web-animations-js"; // run `npm install --save web-animations-js`.
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import "hammerjs/hammer";
+import "zone.js"; // included with Angular CLI.
+
+/***************************************************************************************************
+ * @angular/animations polyfill
+ */
+// if (!Element.prototype.matches) {
+// Element.prototype.matches = (Element.prototype as any).msMatchesSelector;
+// }
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import "intl"; // Run `npm install --save intl`.
+// import "intl/locale-data/jsonp/de";
+/**
+ * Need to import at least one locale-data with intl.
+ */
+// import "intl/locale-data/jsonp/en";
diff --git a/samples/maps/geo-map/display-azure-imagery/src/styles.scss b/samples/maps/geo-map/display-azure-imagery/src/styles.scss
new file mode 100644
index 000000000..5fe513cfa
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/styles.scss
@@ -0,0 +1,67 @@
+@use 'igniteui-angular/theming' as *;
+$palette: $light-material-palette;
+$schema: $light-material-schema;
+
+$default-palette: $palette;
+
+$green-palette: palette(
+ $primary: #09f,
+ $secondary: #72da67,
+ $surface: #333,
+ $info: #1377d5,
+ $success: #4eb862,
+ $warn: #fbb13c,
+ $error: #ff134a,
+);
+
+$gray-btn-color: color($green-palette, 'gray', 800);
+
+// Specifies large size for all components to match the previous defaults
+// This may not be needed for your project. Please consult https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide for more details.
+:root {
+ --ig-size: var(--ig-size-large);
+}
+
+/* autoprefixer grid: on */
+html,
+body {
+ height: 100%;
+ overflow: hidden;
+ margin: 0;
+}
+
+@include core();
+@include typography();
+@include theme(
+ $palette: $palette,
+ $schema: $schema
+);
+
+:root {
+ @include palette($palette);
+}
+
+.light-theme {
+ @include light-theme($palette);
+}
+
+.dark-theme {
+ background: #333;
+ color: #fff;
+ @include dark-theme(
+ $palette: $green-palette
+ );
+
+ .grid-chart-contextmenu-wrapper {
+ @include fluent-dark-theme($fluent-excel-palette);
+ }
+}
+
+.fin-dark-theme {
+ @include dark-theme($green-palette);
+ background: #333;
+
+ ::-moz-placeholder {
+ opacity: 1;
+ }
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/src/typings.d.ts b/samples/maps/geo-map/display-azure-imagery/src/typings.d.ts
new file mode 100644
index 000000000..ef5c7bd62
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/src/typings.d.ts
@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+ id: string;
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/tsconfig.app.json b/samples/maps/geo-map/display-azure-imagery/tsconfig.app.json
new file mode 100644
index 000000000..ff396d4ce
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/tsconfig.app.json
@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": ["src/main.ts", "src/polyfills.ts"],
+ "include": ["src/**/*.d.ts"]
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/tsconfig.json b/samples/maps/geo-map/display-azure-imagery/tsconfig.json
new file mode 100644
index 000000000..22d546ab3
--- /dev/null
+++ b/samples/maps/geo-map/display-azure-imagery/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "importHelpers": true,
+ "module": "esnext",
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "sourceMap": false,
+ "declaration": false,
+ "moduleResolution": "node",
+ "experimentalDecorators": true,
+ "resolveJsonModule": true,
+ "esModuleInterop": true,
+ "downlevelIteration": true,
+ "target": "es2015",
+ "typeRoots": [
+ "node_modules/@types"
+ ],
+ "lib": [
+ "es2018",
+ "dom"
+ ]
+ },
+ "angularCompilerOptions": {
+ "enableIvy": true
+ }
+}
\ No newline at end of file