IgniteUI · mddifilippo89 · Sep 9, 2025
diff --git a/samples/maps/geo-map/display-azure-imagery/.prettierrc b/samples/maps/geo-map/display-azure-imagery/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "printWidth": 250,
+  "tabWidth": 4,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "fluid": false
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/ReadMe.md b/samples/maps/geo-map/display-azure-imagery/ReadMe.md
@@ -0,0 +1,56 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
+
+This folder contains implementation of Web Components application with example of Geo Display Azure Imagery feature using [Geographic Map](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://infragistics.com/webcomponentssite/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/maps/geo-map/display-azure-imagery" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/maps/geo-map/display-azure-imagery?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## 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
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/maps/geo-map/display-azure-imagery
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/maps/geo-map/display-azure-imagery/index.html b/samples/maps/geo-map/display-azure-imagery/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>MapDisplayImageryAzureTiles</title>
+    <meta charset="UTF-8" />
+
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
+    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
+
+  </head>
+
+  <body>
+    <div id="root">
+
+<div class="container horizontal" >
+    <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>
+
+
+    <igc-dialog id="dialog" title="Confirmation" >
+      <igc-input label="AzureKey" id="azurekeyInput" inputmode="text"></igc-input>
+
+      <div slot="footer">
+        <igc-button id="cancelButton" variant="flat" onclick="dialog.hide()"><span>Cancel</span></igc-button>
+        <igc-button id="submitButton" variant="flat"><span>OK</span></igc-button>
+      </div>
+    </igc-dialog>
+    <igc-geographic-map id="mapWeather" class="container" height="100%" width="100%"></igc-geographic-map>
+    <igc-geographic-map id="mapAerial" class="container" height="100%" width="100%"></igc-geographic-map>
+    <igc-geographic-map id="mapRoad" class="container" height="100%" width="100%"></igc-geographic-map>
+</div>
+
+    </div>
+    <!-- This script is needed only for parcel and it will be excluded for webpack -->
+    <% if (false) { %><script src="src/index.ts"></script><% } %>
+
+  </body>
+</html>
diff --git a/samples/maps/geo-map/display-azure-imagery/package.json b/samples/maps/geo-map/display-azure-imagery/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "wc-geographic-map-display-imagery-azure-tiles",
+  "version": "1.0.0",
+  "description": "This project provides example of Geographic Map Display Imagery Azure Tiles using IgniteUI for Web Components",
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "npm run build:prod",
+    "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod": "webpack-dev-server --env.NODE_ENV=production  --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start": "npm run serve:dev",
+    "build:legacy": "npm run build:prod:legacy",
+    "build:dev:legacy": "webpack --env.legacy=true  --mode development --config ./webpack.config.js --progress --color --display-error-details",
+    "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true  --mode production --config ./webpack.config.js  --progress  --color --display-error-details --bail",
+    "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+    "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+    "start:legacy": "npm run serve:dev:legacy"
+  },
+  "author": "Infragistics",
+  "dependencies": {
+    "@webcomponents/custom-elements": "^1.4.1",
+    "@webcomponents/template": "^1.4.2",
+    "babel-runtime": "^6.26.0",
+    "core-js": "^3.6.5",
+    "igniteui-webcomponents": "6.2.1",
+    "igniteui-webcomponents-charts": "6.0.2-beta.0",
+    "igniteui-webcomponents-core": "6.0.2-beta.0",
+    "igniteui-webcomponents-maps": "6.0.2-beta.0",
+    "lit-html": "^3.2.0",
+    "tslib": "^2.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.8.3",
+    "@babel/core": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.25.9",
+    "@babel/plugin-transform-class-static-block": "^7.26.0",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.8.3",
+    "@babel/preset-typescript": "^7.8.3",
+    "@types/source-map": "^0.5.7",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-transform-custom-element-classes": "^0.1.0",
+    "css-loader": "^1.0.0",
+    "csv-loader": "^3.0.2",
+    "file-loader": "^4.2.0",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "html-webpack-plugin": "^4.3.0",
+    "parcel-bundler": "^1.6.1",
+    "source-map": "^0.7.3",
+    "style-loader": "^0.22.1",
+    "tsconfig-paths-webpack-plugin": "^4.0.0",
+    "typescript": "^5.9.2",
+    "webpack": "^5.96.1",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "worker-loader": "^3.0.8",
+    "xml-loader": "^1.2.1"
+  },
+  "license": "",
+  "homepage": "."
+}
diff --git a/samples/maps/geo-map/display-azure-imagery/sandbox.config.json b/samples/maps/geo-map/display-azure-imagery/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser",
+    "template": "parcel"
+}
+
diff --git a/samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts b/samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts
@@ -0,0 +1,109 @@
+import { IgcGeographicMapComponent } from 'igniteui-webcomponents-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 MapUtils {
+
+    public static navigateTo(geoMap: IgcGeographicMapComponent, name: MapRegion): void {
+
+        const geoRect = this.getRegions()[name];
+        // console.log("MapUtils " + 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): void {
+        geoRect.name = name;
+        geoRect.longitude = geoRect.left + (geoRect.width / 2);
+        geoRect.latitude = geoRect.top + (geoRect.height / 2);
+
+        this.Regions[name] = geoRect;
+    }
+
+    private static createRegions(): void {
+        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/index.css b/samples/maps/geo-map/display-azure-imagery/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.ts b/samples/maps/geo-map/display-azure-imagery/src/index.ts
@@ -0,0 +1,74 @@
+import { MapUtils, MapRegion } from './MapUtils';
+import { AzureMapsImageryStyle, IgcAzureMapsImagery, IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
+import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps';
+import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
+import { ModuleManager } from 'igniteui-webcomponents-core';
+import { defineComponents, IgcButtonComponent, IgcDialogComponent, IgcInputComponent } from 'igniteui-webcomponents';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+defineComponents(IgcDialogComponent, IgcButtonComponent, IgcInputComponent);
+
+ModuleManager.register(
+    IgcDataChartInteractivityModule,
+    IgcGeographicMapModule    
+);
+
+export class MapDisplayImageryAzureTiles {
+
+    private mapWeather: IgcGeographicMapComponent;
+    private mapAerial: IgcGeographicMapComponent;
+    private mapRoad: IgcGeographicMapComponent;
+    private apiKey: string | undefined;
+    private dialog!: IgcDialogComponent;
+
+    constructor() {
+
+        this.mapWeather = document.getElementById('mapWeather') as IgcGeographicMapComponent;
+        this.mapAerial = document.getElementById('mapAerial') as IgcGeographicMapComponent;
+        this.mapRoad = document.getElementById('mapRoad') as IgcGeographicMapComponent;
+        var azurekeyInput = document.getElementById("azurekeyInput") as IgcInputComponent;
+
+        azurekeyInput.addEventListener('input', (ev: any) =>
+        {
+            this.apiKey = (ev.target as HTMLInputElement).value;
+
+            this.updateAzureMap(this.mapWeather, AzureMapsImageryStyle.WeatherInfraredOverlay);
+            this.updateAzureMap(this.mapAerial, AzureMapsImageryStyle.Satellite);
+            this.updateAzureMap(this.mapRoad, AzureMapsImageryStyle.Road);
+        });
+
+
+        window.addEventListener("DOMContentLoaded", async () => {
+            this.dialog = document.getElementById("dialog") as IgcDialogComponent;
+            var submitButton = document.getElementById("submitButton") as IgcButtonComponent;
+
+            // Show dialog immediately on startup
+            this.dialog.show();
+
+            submitButton.addEventListener("click", () => {
+                this.apiKey = azurekeyInput.value;
+                this.dialog.hide();
+            });
+        });
+
+    }
+
+    updateAzureMap(map: IgcGeographicMapComponent | undefined, style: AzureMapsImageryStyle) {
+        if (!map) {
+            return;
+        }
+        map.zoomable = true;
+
+        const tileSource = new IgcAzureMapsImagery();
+        tileSource.apiKey = this.apiKey ?? "";
+        tileSource.imageryStyle = style;
+
+        map.backgroundContent = tileSource;
+
+        // optional - navigating to a map region
+        MapUtils.navigateTo(map, MapRegion.Caribbean);
+    }
+
+}
+
+new MapDisplayImageryAzureTiles();
diff --git a/samples/maps/geo-map/display-azure-imagery/tsconfig.json b/samples/maps/geo-map/display-azure-imagery/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+      "noImplicitReturns": true,
+      "esModuleInterop": true,
+      "noImplicitAny": true,
+      "declarationDir": "dist/types",
+      "moduleResolution": "node",
+      "declaration": true,
+      "target": "es2015",
+      "module": "es2015",
+      "strict": true
+  },
+  "include": [
+      "src/**/*"
+  ],
+  "exclude": [
+      "node_modules",
+      "dist"
+  ]
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/* shared styles are loaded from: */
		/* https://static.infragistics.com/xplatform/css/samples */