IgniteUI · IGvaleries · Sep 24, 2025 · Sep 24, 2025
diff --git a/samples/maps/geo-map/display-azure-imagery/index.html b/samples/maps/geo-map/display-azure-imagery/index.html
@@ -3,38 +3,74 @@
   <head>
     <title>MapDisplayImageryAzureTiles</title>
     <meta charset="UTF-8" />
-
-    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
+    <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" />
+    <style>
+        igc-combo {
+            width: 100%; /* set a fixed width if needed */
+        }
+
+        igc-combo::part(input) {
+            text-align: center;
+        }
+
+        igc-combo::part(selected-item) {
+            justify-content: center;
+        }
 
-  </head>
+        #mapStyleSelect::part(clear-icon) {
+            display: none;
+        }
+    </style>
+</head>
 
-  <body>
-    <div id="root">
+<body>
+<div id="root">
+  <div class="container sample center" style="display: flex; flex-direction: column; align-items: center; gap: 5px;">
 
-<div class="container horizontal" >
-    <igc-button onclick="dialog.show()" variant="contained">Show Dialog</igc-button>
+    <!-- Button to open Azure key dialog -->
+    <igc-button onclick="azureDialog.show()" id="openDialogBtn" variant="contained" style="width: 300px;">
+      Enter your Azure Maps API Key
+    </igc-button>
 
+    <!-- Select box for choosing imagery -->
+    <igc-select id="mapStyleSelect" placeholder="Choose Azure Imagery">
+    </igc-select>
 
-    <igc-dialog id="dialog" title="Confirmation" >
-      <igc-input label="AzureKey" id="azurekeyInput" inputmode="text"></igc-input>
+    <!-- Azure Key Dialog -->
+    <igc-dialog id="azureDialog" title="Azure Key">
+      <form id="form" method="dialog" style="display: flex; flex-direction: column; gap: 10px;">
+        <igc-input id="azureKeyInput" label="Azure Key">
+          <igc-icon name="password" slot="prefix"></igc-icon>
+        </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>
+        <div style="display: flex; justify-content: flex-end; gap: 10px;">
+          <igc-button id="resetButton" type="reset" variant="flat">Reset</igc-button>
+          <igc-button id="submitButton" type="button" variant="flat">Submit</igc-button>
+        </div>
+      </form>
     </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>
 
+    <!-- Map / placeholder container -->
+    <div id="mapContainer" style="width: 100%; display: flex; justify-content: center;">
+      <!-- Placeholder image -->
+      <img id="mapImage" src="images/azure_satellite.png" alt="Map Imagery" />
     </div>
-    <!-- This script is needed only for parcel and it will be excluded for webpack -->
-    <% if (false) { %><script src="src/index.ts"></script><% } %>
 
-  </body>
+    <!-- Azure Map initially hidden -->
+    <igc-geographic-map id="azureMap" width="100%" height="100%" hidden></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
@@ -31,25 +31,25 @@
     "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",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-class-static-block": "^7.28.3",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-typescript": "^7.27.1",
     "@types/source-map": "^0.5.7",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^10.0.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",
+    "css-loader": "^7.1.2",
+    "csv-loader": "^3.0.5",
+    "file-loader": "^6.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",
+    "html-webpack-plugin": "^5.6.4",
+    "parcel-bundler": "^1.12.5",
+    "source-map": "^0.7.6",
+    "style-loader": "^4.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "typescript": "^5.9.2",
     "webpack": "^5.101.3",
     "webpack-cli": "^6.0.1",

diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/AzureHybridDarkGrey.png b/samples/maps/geo-map/display-azure-imagery/public/images/AzureHybridDarkGrey.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/AzureHybridRoad.png b/samples/maps/geo-map/display-azure-imagery/public/images/AzureHybridRoad.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_darkgrey.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_darkgrey.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_hybriddarkgrey.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_hybriddarkgrey.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_hybridroad.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_hybridroad.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_labelsdarkgrey.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_labelsdarkgrey.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_labelsroad.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_labelsroad.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_road.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_road.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_satellite.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_satellite.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_terra_overlay.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_terra_overlay.png
diff --git a/...les/maps/geo-map/display-azure-imagery/public/images/azure_traffic_absolute.png b/...les/maps/geo-map/display-azure-imagery/public/images/azure_traffic_absolute.png
diff --git a/...les/maps/geo-map/display-azure-imagery/public/images/azure_traffic_and_road.png b/...les/maps/geo-map/display-azure-imagery/public/images/azure_traffic_and_road.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_traffic_delay.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_traffic_delay.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_traffic_light.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_traffic_light.png
diff --git a/...les/maps/geo-map/display-azure-imagery/public/images/azure_traffic_relative.png b/...les/maps/geo-map/display-azure-imagery/public/images/azure_traffic_relative.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_trafficdelay.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_trafficdelay.png
diff --git a/...aps/geo-map/display-azure-imagery/public/images/azure_weather_Infrared_road.png b/...aps/geo-map/display-azure-imagery/public/images/azure_weather_Infrared_road.png
diff --git a/samples/maps/geo-map/display-azure-imagery/public/images/azure_weather_radar.png b/samples/maps/geo-map/display-azure-imagery/public/images/azure_weather_radar.png
diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.ts b/samples/maps/geo-map/display-azure-imagery/src/index.ts
@@ -1,74 +1,156 @@
-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 { 
+    defineComponents, 
+    IgcDialogComponent, 
+    IgcButtonComponent, 
+    IgcSelectComponent, 
+    IgcSelectItemComponent,
+    IgcInputComponent, 
+    registerIconFromText 
+} from 'igniteui-webcomponents';
+import { 
+    AzureMapsImageryStyle, 
+    IgcAzureMapsImagery, 
+    IgcGeographicMapComponent, 
+    IgcGeographicMapModule 
+} from 'igniteui-webcomponents-maps';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
+import { MapRegion, MapUtils } from './MapUtils';
+import { ModuleManager } from 'igniteui-webcomponents-core';
+import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
 
-defineComponents(IgcDialogComponent, IgcButtonComponent, IgcInputComponent);
+defineComponents(IgcDialogComponent, IgcButtonComponent, IgcSelectComponent, IgcInputComponent, IgcSelectItemComponent);
 
-ModuleManager.register(
-    IgcDataChartInteractivityModule,
-    IgcGeographicMapModule    
-);
+ModuleManager.register(IgcDataChartInteractivityModule, IgcGeographicMapModule);
 
-export class MapDisplayImageryAzureTiles {
+const passwordIcon = `<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.0151 13.6556C14.8093 14.3587 16.9279 13.9853 18.3777 12.5355C20.3304 10.5829 20.3304 7.41709 18.3777 5.46447C16.4251 3.51184 13.2593 3.51184 11.3067 5.46447C9.85687 6.91426 9.48353 9.03288 10.1866 10.8271M12.9964 13.6742L6.82843 19.8422L4.2357 19.6065L4 17.0138L10.168 10.8458M15.5493 8.31568V8.29289" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
 
-    private mapWeather: IgcGeographicMapComponent;
-    private mapAerial: IgcGeographicMapComponent;
-    private mapRoad: IgcGeographicMapComponent;
-    private apiKey: string | undefined;
+export class MapDisplayImageryAzureTiles {
+    private map!: IgcGeographicMapComponent;
     private dialog!: IgcDialogComponent;
+    private azureKeyInput!: IgcInputComponent;
+    private submitButton!: IgcButtonComponent;
+    private mapImage!: HTMLImageElement;
+    private apiKey?: string;
+    private mapStyleSelect!: IgcSelectComponent;
+
+    private readonly placeholderImages: Record<string, string> = {
+        Satellite: "images/azure_satellite.png",
+        Road: "images/azure_road.png",
+        DarkGrey: "images/azure_darkgrey.png",
+        HybridRoadOverlay: "images/azurehybridroad.png",
+        HybridDarkGreyOverlay: "images/azurehybriddarkgrey.png",
+        LabelsRoadOverlay: "images/azure_labelsroad.png",
+        LabelsDarkGreyOverlay: "images/azure_labelsdarkgrey.png",
+        TrafficDelayOverlay: "images/azure_trafficdelay.png",
+        TerraOverlay: "images/azure_terra_overlay.png",
+        TrafficAbsoluteOverlay: "images/azure_traffic_absolute.png",
+        TrafficReducedOverlay: "images/azure_traffic_light.png",
+        TrafficRelativeOverlay: "images/azure_traffic_relative.png",
+        WeatherInfraredOverlay: "images/azure_weather_infrared_road.png",
+        WeatherRadarOverlay: "images/azure_weather_radar.png"
+    };
 
     constructor() {
+        registerIconFromText("password", passwordIcon);
 
-        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;
+        this.dialog = document.getElementById('azureDialog') as IgcDialogComponent;
+        this.azureKeyInput = document.getElementById('azureKeyInput') as IgcInputComponent;
+        this.submitButton = document.getElementById('submitButton') as IgcButtonComponent;
+        this.mapImage = document.getElementById('mapImage') as HTMLImageElement;
+        this.map = document.getElementById('azureMap') as IgcGeographicMapComponent;
+        this.mapStyleSelect = document.getElementById('mapStyleSelect') as IgcSelectComponent;
 
-        azurekeyInput.addEventListener('input', (ev: any) =>
-        {
-            this.apiKey = (ev.target as HTMLInputElement).value;
+        this.populateSelect();
 
-            this.updateAzureMap(this.mapWeather, AzureMapsImageryStyle.WeatherInfraredOverlay);
-            this.updateAzureMap(this.mapAerial, AzureMapsImageryStyle.Satellite);
-            this.updateAzureMap(this.mapRoad, AzureMapsImageryStyle.Road);
+        // Ensure Satellite is selected on startup
+        requestAnimationFrame(() => {
+            this.mapStyleSelect.value = "Satellite";
+            this.mapImage.src = this.placeholderImages["Satellite"];
         });
 
+        // Initially hide the map
+        customElements.whenDefined('igc-geographic-map').then(() => {
+            setTimeout(() => {
+                this.map.style.opacity = '0';
+            });
+        });
 
-        window.addEventListener("DOMContentLoaded", async () => {
-            this.dialog = document.getElementById("dialog") as IgcDialogComponent;
-            var submitButton = document.getElementById("submitButton") as IgcButtonComponent;
+        // Show dialog on startup
+        this.dialog.show();
 
-            // Show dialog immediately on startup
-            this.dialog.show();
+        // Submit button click
+        this.submitButton.addEventListener('click', () => {
+            const key = this.azureKeyInput.value?.trim();
+            if (!key) return;
+            this.apiKey = key;
 
-            submitButton.addEventListener("click", () => {
-                this.apiKey = azurekeyInput.value;
-                this.dialog.hide();
-            });
+            const selectedStyleValue = this.mapStyleSelect.value as keyof typeof AzureMapsImageryStyle;
+            if (!selectedStyleValue) return;
+
+            this.updateAzureMap(AzureMapsImageryStyle[selectedStyleValue]);
+
+            this.showMapSafely();
+            this.dialog.hide();
+        });
+
+        // Handle style changes
+        this.mapStyleSelect.addEventListener('igcChange', (evt: any) => {
+            const selectedValue = evt.detail.value as keyof typeof AzureMapsImageryStyle;
+            if (!selectedValue) return;
+
+            this.mapImage.src = this.placeholderImages[selectedValue];
+
+            if (this.apiKey) {
+                requestAnimationFrame(() => {
+                    this.updateAzureMap(AzureMapsImageryStyle[selectedValue]);
+                });
+            }
         });
+    }
 
+    private populateSelect() {
+        Object.keys(this.placeholderImages).forEach(key => {
+            const item = document.createElement('igc-select-item');
+            item.value = key;
+            item.textContent = key;
+            this.mapStyleSelect.appendChild(item);
+        });
     }
 
-    updateAzureMap(map: IgcGeographicMapComponent | undefined, style: AzureMapsImageryStyle) {
-        if (!map) {
-            return;
-        }
-        map.zoomable = true;
+    private showMapSafely() {
+        if (!this.map) return;
 
-        const tileSource = new IgcAzureMapsImagery();
-        tileSource.apiKey = this.apiKey ?? "";
-        tileSource.imageryStyle = style;
+        requestAnimationFrame(() => {
+            this.map.style.opacity = '1';
+            this.map.style.pointerEvents = 'auto';
+            this.mapImage.hidden = true;
+        });
+    }
 
-        map.backgroundContent = tileSource;
+    private updateAzureMap(style: AzureMapsImageryStyle) {
+        if (!this.map) return;
 
-        // optional - navigating to a map region
-        MapUtils.navigateTo(map, MapRegion.Caribbean);
+        const tileSource = new IgcAzureMapsImagery();
+        tileSource.apiKey = this.apiKey ?? '';
+        tileSource.imageryStyle = style;
+        this.map.backgroundContent = tileSource;
+
+        if (
+            style === AzureMapsImageryStyle.TrafficDelayOverlay ||
+            style === AzureMapsImageryStyle.TrafficAbsoluteOverlay ||
+            style === AzureMapsImageryStyle.TrafficReducedOverlay ||
+            style === AzureMapsImageryStyle.TrafficRelativeOverlay
+        ) {
+            this.map.zoomToGeographic({
+                left: -74.2591,
+                top: 40.9176,
+                width: -73.7004 - (-74.2591),
+                height: 40.4774 - 40.9176
+            });
+        } else {
+            MapUtils.navigateTo(this.map, MapRegion.UnitedStates);
+        }
     }
-
 }
 
 new MapDisplayImageryAzureTiles();