diff --git a/samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile b/samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile index adf04bd95..cd7500bb4 100644 --- a/samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile +++ b/samples/maps/geo-map/display-azure-imagery/.codesandbox/Dockerfile @@ -1 +1 @@ -FROM node:18 \ No newline at end of file +FROM node:20 \ No newline at end of file diff --git a/samples/maps/geo-map/display-azure-imagery/package.json b/samples/maps/geo-map/display-azure-imagery/package.json index 97a35bbbc..ee04e7c26 100644 --- a/samples/maps/geo-map/display-azure-imagery/package.json +++ b/samples/maps/geo-map/display-azure-imagery/package.json @@ -1,46 +1,43 @@ { + "name": "demo", + "version": "0.0.0", "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" + "start": "ng serve", + "build": "ng build", + "watch": "ng build --watch --configuration development", + "test": "ng test" }, + "private": true, "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.1.0-rc.2", - "igniteui-angular-charts": "20.0.2-beta.3", - "igniteui-angular-core": "20.0.2-beta.3", + "@angular/animations": "20.3.2", + "@angular/common": "20.3.2", + "@angular/compiler": "20.3.2", + "@angular/core": "20.3.2", + "@angular/forms": "20.3.2", + "@angular/platform-browser": "20.3.2", + "@angular/platform-browser-dynamic": "20.3.2", + "@angular/router": "20.3.2", + "hammerjs": "^2.0.8", + "igniteui-angular": "20.1.0", + "igniteui-angular-charts": "^20.0.2-beta.3", + "igniteui-angular-core": "^20.0.2-beta.3", "igniteui-angular-maps": "20.0.2-beta.3", - "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" + "rxjs": "~7.8.2", + "tslib": "^2.8.1", + "zone.js": "~0.15.1" }, "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" + "@angular-devkit/build-angular": "20.3.2", + "@angular/cli": "20.3.2", + "@angular/compiler-cli": "20.3.2", + "@types/jasmine": "~5.1.9", + "jasmine-core": "~5.10.0", + "karma": "~6.4.4", + "karma-chrome-launcher": "~3.2.0", + "karma-coverage": "~2.2.1", + "karma-jasmine": "~5.1.0", + "karma-jasmine-html-reporter": "~2.1.0", + "typescript": "~5.8.3" } } 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 index bd3fabe03..8d5024301 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/app.component.html +++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.html @@ -1,42 +1,56 @@ -
-

* Note, if no key is entered, an image will be shown reflecting what the map will look like.

-
+
- - -
- vpn_key -
Azure Map Authentication
-
- + +
+ + -
- - - - -
+ + + + {{ s }} + + +
+ + + +
+
+

Azure Key

+
-
- - -
- +
+ + +
+ +
+ + +
+
+ -
- - Satellite View - Road View + +
+ + Map Imagery - - - - - -
\ 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 index 0b1ef3bb9..e251c7fa3 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/app.component.scss +++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.scss @@ -1,26 +1,89 @@ -:host { - display: inline; - padding: 16px; +/* Overall container centers everything like WC */ +.container.sample.center { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + width: 100%; + margin-top: 10px; + font-family: 'Titillium Web', sans-serif; } -.keyInForm { - igx-input-group + igx-input-group { - margin-top: 24px; - } +/* Controls row: button + select + preview thumbnail */ +.controls-row { + display: flex; + gap: 8px; + align-items: center; + margin-bottom: 0rem; + + button[igxButton] { + min-width: 240px; + } + + igx-select { + width: 240px; + } + + .preview-current img { + width: 40px; + height: 40px; + border: 1px solid #ccc; + object-fit: cover; + border-radius: 4px; + } } -.dialog-container{ - display: flex; +/* Map container centers map/placeholder like WC */ +.map-container { + width: 100%; + display: flex; + justify-content: center; + margin-top: 8px; - igx-icon { - margin-right: 8px; - } + .placeholder { + width: 100%; + max-width: 800px; + border: 1px solid #ccc; + border-radius: 4px; + object-fit: cover; + } + + igx-geographic-map { + width: 100%; + max-width: 100%; + height: 500px; + } } -.hidden { - display: none; +/* Dialog header and content spacing */ +.dialog-header { + padding-bottom: 0.5rem; + text-align: left; } -.show { - display: inline; -} \ No newline at end of file +.dialog-content { + display: flex; + flex-direction: column; + gap: 12px; + + input[type='text'] { + padding: 0.4rem; + border-radius: 4px; + border: 1px solid #ccc; + font-size: 14px; + } +} + +/* Dialog actions: buttons on right side */ +.dialog-actions { + margin-top: 16px; + display: flex; + justify-content: flex-end; + gap: 8px; + + button { + min-width: 80px; + padding: 0.4rem 1rem; + border-radius: 4px; + } +} 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 index e9da18b34..03918d0fe 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/app.component.ts +++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.ts @@ -1,61 +1,159 @@ -import { AfterViewInit, Component, ViewChild } from "@angular/core"; -import { AzureMapsImageryStyle, GeographicMapImagery, IgxGeographicMapImagery } from "igniteui-angular-maps"; -import { IgxAzureMapsImagery } from "igniteui-angular-maps"; -import { IgxGeographicMapComponent } from "igniteui-angular-maps"; -import { IgxDialogComponent } from "igniteui-angular"; +import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core'; +import { NgForm } from '@angular/forms'; +import { + AzureMapsImageryStyle, + IgxAzureMapsImagery, + IgxGeographicMapComponent, + IgxGeographicTileSeriesComponent +} from 'igniteui-angular-maps'; +import { + IgxDialogComponent, + IgxSelectComponent +} from 'igniteui-angular'; +import { MapRegion, MapUtility } from './MapUtility'; @Component({ - standalone: false, - selector: "app-root", - styleUrls: ["./app.component.scss"], - templateUrl: "./app.component.html" + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], + standalone: false }) +export class AppComponent implements OnInit, AfterViewInit { -export class AppComponent implements AfterViewInit { - - @ViewChild("map", { static: true }) - public map: IgxGeographicMapComponent; - @ViewChild("map2", { static: true }) - public map2: IgxGeographicMapComponent; - public apiKey: string; - @ViewChild("form", { static: true }) - public form!: IgxDialogComponent; - - showMap = false; // Controls visibility of maps - showImages = true; // Controls visibility of images - - public applyApiKey(key: string) { - if (!key) return; - this.apiKey = key; - - // Wait for the next tick to ensure the map is in the DOM - setTimeout(() => { - if (this.map && this.map2) { - const azureImagery = new IgxAzureMapsImagery(); - azureImagery.apiKey = this.apiKey; - azureImagery.imageryStyle = AzureMapsImageryStyle.Satellite; - this.map.backgroundContent = azureImagery; - - const azureImagery2 = new IgxAzureMapsImagery(); - azureImagery2.apiKey = this.apiKey; - azureImagery2.imageryStyle = AzureMapsImageryStyle.Road; - this.map2.backgroundContent = azureImagery2; - } - }); + @ViewChild('map', { static: false }) map!: IgxGeographicMapComponent; + @ViewChild('tileSeries', { static: false }) tileSeries!: IgxGeographicTileSeriesComponent; + @ViewChild('dialog', { static: false }) dialog!: IgxDialogComponent; + @ViewChild('styleSelect', { static: false }) styleSelect!: IgxSelectComponent; + + // Bound to the input in the dialog + public apiKeyInputValue: string = ''; + + public azureTile!: IgxAzureMapsImagery; + public azureBackground!: IgxAzureMapsImagery; + public apiKey?: string; + public styleChangeTimeout?: number; + + public styleOptions: string[] = []; + public selectedStyle!: string; + public previewImageSrc: string = ''; + + public styleConfig: Record void }> = { + Satellite: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png", zoom: () => this.zoomUS() }, + Road: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_road.png", zoom: () => this.zoomUS() }, + DarkGrey: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_darkgrey.png", zoom: () => this.zoomUS() }, + TerraOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_terra_overlay.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + HybridRoadOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/AzureHybridRoad.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + HybridDarkGreyOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_hybriddarkgrey.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + LabelsRoadOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsroad.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + LabelsDarkGreyOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsdarkgrey.png", background: AzureMapsImageryStyle.Satellite, zoom: () => this.zoomUS() }, + TrafficDelayOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_trafficdelay.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + TrafficAbsoluteOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_absolute.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + TrafficReducedOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_light.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + TrafficRelativeOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_relative.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomNY() }, + WeatherInfraredOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_Infrared_road.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomUS() }, + WeatherRadarOverlay: { placeholder: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_radar.png", background: AzureMapsImageryStyle.DarkGrey, zoom: () => this.zoomUS() } + }; + + ngOnInit(): void { + // Preload preview images + Object.values(this.styleConfig).forEach(cfg => new Image().src = cfg.placeholder); + + // Populate dropdown options + default style + this.styleOptions = Object.keys(this.styleConfig); + this.selectedStyle = this.styleOptions[0]; + this.previewImageSrc = this.styleConfig[this.selectedStyle].placeholder; + } + + ngAfterViewInit(): void { + // We'll initialize tile imagery after the user sets the API key + } + + public openDialog() { + this.dialog.open(); + } + + private zoomUS() { + if (this.map) MapUtility.navigateTo(this.map, MapRegion.UnitedStates); + } + + private zoomNY() { + if (this.map) { + this.map.zoomToGeographic({ + left: -74.2591, + top: 40.9176, + width: -73.7004 - (-74.2591), + height: 40.4774 - 40.9176 + }); } + } + + private setApiKey(key: string) { + this.apiKey = key; - constructor() { + // create azureTile & background if not yet + if (!this.azureTile) { + this.azureTile = new IgxAzureMapsImagery(); + this.tileSeries.tileImagery = this.azureTile; + } + if (!this.azureBackground) { + this.azureBackground = new IgxAzureMapsImagery(); + this.azureBackground.imageryStyle = AzureMapsImageryStyle.DarkGrey; + this.map.backgroundContent = this.azureBackground; } - public ngAfterViewInit(): void { - - - setTimeout(() => { - if (this.form) { - - this.form.open(); - } - }); + this.azureTile.apiKey = key; + this.azureBackground.apiKey = key; + } + + public onSubmit(form: NgForm) { + const key = this.apiKeyInputValue; + if (!key) return; + + this.setApiKey(key); + if (this.selectedStyle) this.updateAzureMap(this.selectedStyle); + + // Close the dialog first, then reset form after a tick + setTimeout(() => { + this.dialog.close(); + form.resetForm(); + }); + } + + public onReset(form: NgForm) { + this.apiKey = undefined; + this.apiKeyInputValue = ''; + if (this.azureTile) this.azureTile.apiKey = ''; + if (this.azureBackground) this.azureBackground.apiKey = ''; + this.previewImageSrc = this.styleConfig[this.selectedStyle].placeholder; + + setTimeout(() => { + this.dialog.close(); + form.resetForm(); + }); + } + + public onStyleChange(value: string) { + const cfg = this.styleConfig[value]; + if (!cfg) return; + + this.previewImageSrc = cfg.placeholder; + + if (this.apiKey) { + if (this.styleChangeTimeout) clearTimeout(this.styleChangeTimeout); + this.styleChangeTimeout = window.setTimeout(() => this.updateAzureMap(value), 30); } - + } + + private updateAzureMap(styleName: string) { + if (!this.azureTile || !this.azureBackground) return; + + const cfg = this.styleConfig[styleName]; + if (!cfg) return; + + this.azureTile.imageryStyle = + AzureMapsImageryStyle[styleName as keyof typeof AzureMapsImageryStyle]; + + this.azureBackground.imageryStyle = cfg.background ?? AzureMapsImageryStyle.DarkGrey; + cfg.zoom(); + } } 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 index 00c54f7a7..2e023fdcf 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/app.module.ts +++ b/samples/maps/geo-map/display-azure-imagery/src/app.module.ts @@ -1,19 +1,21 @@ -import { NgModule } from "@angular/core"; +import { NgModule, CUSTOM_ELEMENTS_SCHEMA } 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"; + +// Ignite UI Maps & Charts import { IgxAzureMapsImageryModule, IgxGeographicMapModule } from "igniteui-angular-maps"; import { IgxDataChartInteractivityModule } from "igniteui-angular-charts"; -import { IgxDialogModule, IgxIconModule, IgxInputGroupModule } from "igniteui-angular"; +// Ignite UI Angular components +import { IgxButtonModule, IgxDialogModule, IgxIconModule, IgxInputGroupModule, IgxSelectModule } from "igniteui-angular"; @NgModule({ - bootstrap: [AppComponent], declarations: [ AppComponent -], + ], imports: [ BrowserModule, BrowserAnimationsModule, @@ -22,11 +24,14 @@ import { IgxDialogModule, IgxIconModule, IgxInputGroupModule } from "igniteui-an IgxGeographicMapModule, IgxAzureMapsImageryModule, IgxDataChartInteractivityModule, - IgxDialogModule, + IgxDialogModule, IgxInputGroupModule, - IgxIconModule -], + IgxIconModule, + IgxButtonModule, + IgxSelectModule // <-- Add this for the dropdown combo + ], providers: [], - schemas: [] + bootstrap: [AppComponent], + schemas: [CUSTOM_ELEMENTS_SCHEMA] // <-- Needed to allow Web Components like igx-combo }) export class AppModule {} diff --git a/samples/maps/geo-map/display-azure-imagery/src/main.ts b/samples/maps/geo-map/display-azure-imagery/src/main.ts index ec9adcd4a..d203a2594 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/main.ts +++ b/samples/maps/geo-map/display-azure-imagery/src/main.ts @@ -3,6 +3,7 @@ import "./polyfills"; import { enableProdMode } from "@angular/core"; import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; import { AppModule } from "./app.module"; +import 'hammerjs'; platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { // ensure Angular destroys itself on hot reloads.