diff --git a/samples/maps/geo-map/display-azure-imagery/index.html b/samples/maps/geo-map/display-azure-imagery/index.html index 4cb203e80..24390bd5b 100644 --- a/samples/maps/geo-map/display-azure-imagery/index.html +++ b/samples/maps/geo-map/display-azure-imagery/index.html @@ -28,7 +28,7 @@
- + diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.ts b/samples/maps/geo-map/display-azure-imagery/src/index.ts index 8011d92a8..c003f710c 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/index.ts +++ b/samples/maps/geo-map/display-azure-imagery/src/index.ts @@ -19,10 +19,11 @@ import { MapRegion, MapUtils } from './MapUtils'; import { ModuleManager } from 'igniteui-webcomponents-core'; import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts'; +// Register components and modules defineComponents(IgcDialogComponent, IgcButtonComponent, IgcSelectComponent, IgcInputComponent, IgcSelectItemComponent); - ModuleManager.register(IgcDataChartInteractivityModule, IgcGeographicMapModule); +// Password icon SVG const passwordIcon = ``; export class MapDisplayImageryAzureTiles { @@ -32,29 +33,45 @@ export class MapDisplayImageryAzureTiles { private azureKeyInput!: IgcInputComponent; private submitButton!: IgcButtonComponent; private mapImage!: HTMLImageElement; - private apiKey?: string; private mapStyleSelect!: IgcSelectComponent; - - private readonly placeholderImages: Record = { - Satellite: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png", - Road: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_road.png", - DarkGrey: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_darkgrey.png", - TerraOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_terra_overlay.png", - HybridRoadOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/AzureHybridRoad.png", - HybridDarkGreyOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_hybriddarkgrey.png", - LabelsRoadOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsroad.png", - LabelsDarkGreyOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_labelsdarkgrey.png", - TrafficDelayOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_trafficdelay.png", - TrafficAbsoluteOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_absolute.png", - TrafficReducedOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_light.png", - TrafficRelativeOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_traffic_relative.png", - WeatherInfraredOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_Infrared_road.png", - WeatherRadarOverlay: "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_weather_radar.png" + + private apiKey?: string; + private azureTileSource!: IgcAzureMapsImagery; + private azureBackground!: IgcAzureMapsImagery; + + private styleChangeTimeout?: number; + + private readonly 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() } }; constructor() { registerIconFromText("password", passwordIcon); + // Inject smooth fade-in CSS for map + const style = document.createElement('style'); + style.textContent = ` + #azureMap { + opacity: 0; + transition: opacity 0.5s ease-in-out; + } + `; + document.head.appendChild(style); + + // Initialize map and UI references this.dialog = document.getElementById('azureDialog') as IgcDialogComponent; this.azureKeyInput = document.getElementById('azureKeyInput') as IgcInputComponent; this.submitButton = document.getElementById('submitButton') as IgcButtonComponent; @@ -64,123 +81,71 @@ export class MapDisplayImageryAzureTiles { this.mapStyleSelect = document.getElementById('mapStyleSelect') as IgcSelectComponent; this.populateSelect(); + this.preloadImages(); - // Ensure Satellite is selected on startup requestAnimationFrame(() => { this.mapStyleSelect.value = "Satellite"; - this.mapImage.src = this.placeholderImages["Satellite"]; + this.mapImage.src = this.styleConfig["Satellite"].placeholder; }); - // Initially hide the map - customElements.whenDefined('igc-geographic-map').then(() => { - setTimeout(() => { - this.map.style.opacity = '0'; - }); - }); - - // Show dialog on startup + customElements.whenDefined('igc-geographic-map').then(() => setTimeout(() => this.map.style.opacity = '0')); this.dialog.show(); - // Submit button click - this.submitButton.addEventListener('click', () => { - const key = this.azureKeyInput.value?.trim(); - if (!key) return; - this.apiKey = key; - - 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; + // Initialize reusable imagery + this.azureTileSource = new IgcAzureMapsImagery(); + this.imagerySeries.tileImagery = this.azureTileSource; - this.mapImage.src = this.placeholderImages[selectedValue]; + this.azureBackground = new IgcAzureMapsImagery(); + this.azureBackground.imageryStyle = AzureMapsImageryStyle.DarkGrey; + this.map.backgroundContent = this.azureBackground; - if (this.apiKey) { - requestAnimationFrame(() => { - this.updateAzureMap(AzureMapsImageryStyle[selectedValue]); - }); - } - }); + // Event handlers + this.submitButton.addEventListener('click', () => this.onSubmit()); + this.mapStyleSelect.addEventListener('igcChange', (evt: any) => this.onStyleChange(evt.detail.value)); } private populateSelect() { - Object.keys(this.placeholderImages).forEach(key => { + Object.keys(this.styleConfig).forEach(key => { const item = document.createElement('igc-select-item'); - item.value = key; - item.textContent = key; + item.value = key; item.textContent = key; this.mapStyleSelect.appendChild(item); }); } - private showMapSafely() { - if (!this.map) return; + private preloadImages() { + Object.values(this.styleConfig).forEach(cfg => { const img = new Image(); img.src = cfg.placeholder; }); + } - requestAnimationFrame(() => { - this.map.style.opacity = '1'; - this.map.style.pointerEvents = 'auto'; - this.mapImage.hidden = true; - }); + private showMap() { + requestAnimationFrame(() => { this.map.style.opacity = '1'; this.map.style.pointerEvents = 'auto'; this.mapImage.hidden = true; }); + } + + private zoomNY() { this.map.zoomToGeographic({ left:-74.2591, top:40.9176, width:-73.7004-(-74.2591), height:40.4774-40.9176 }); } + private zoomUS() { MapUtils.navigateTo(this.map, MapRegion.UnitedStates); } + + private setApiKey(key: string) { this.apiKey = key; this.azureTileSource.apiKey = key; this.azureBackground.apiKey = key; } + + private onSubmit() { + const key = this.azureKeyInput.value?.trim(); + if (!key) return; + this.setApiKey(key); + if (this.mapStyleSelect.value) this.updateAzureMap(this.mapStyleSelect.value); + this.showMap(); + this.dialog.hide(); + } + + private onStyleChange(value: string) { + const cfg = this.styleConfig[value]; if (!cfg || !this.apiKey) return; + this.mapImage.src = cfg.placeholder; + if (this.styleChangeTimeout) clearTimeout(this.styleChangeTimeout); + this.styleChangeTimeout = window.setTimeout(() => this.updateAzureMap(value), 30); } - private updateAzureMap(style: AzureMapsImageryStyle) { - if (!this.map) return; - - const tileSource = new IgcAzureMapsImagery(); - tileSource.apiKey = this.apiKey ?? ''; - tileSource.imageryStyle = style; - - 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); - } - - if ( - style === AzureMapsImageryStyle.Satellite || - style === AzureMapsImageryStyle.Road || - style === AzureMapsImageryStyle.DarkGrey - ) { - this.imagerySeries.tileImagery = tileSource;//no additional background - } - else if ( - style === AzureMapsImageryStyle.TrafficDelayOverlay || - style === AzureMapsImageryStyle.TrafficAbsoluteOverlay || - style === AzureMapsImageryStyle.TrafficReducedOverlay || - style === AzureMapsImageryStyle.TrafficRelativeOverlay || - style === AzureMapsImageryStyle.WeatherInfraredOverlay || - style === AzureMapsImageryStyle.WeatherRadarOverlay - ) { - const bgImagery = new IgcAzureMapsImagery(); - bgImagery.imageryStyle = AzureMapsImageryStyle.DarkGrey; - bgImagery.apiKey = this.apiKey ?? ''; - this.imagerySeries.tileImagery = tileSource; - this.map.backgroundContent = bgImagery; //background dark grey - } - else { - const bgImagery = new IgcAzureMapsImagery(); - bgImagery.imageryStyle = AzureMapsImageryStyle.Satellite; - bgImagery.apiKey = this.apiKey ?? ''; - this.imagerySeries.tileImagery = tileSource; - this.map.backgroundContent = bgImagery; //background satellite - } + private updateAzureMap(styleName: string) { + const cfg = this.styleConfig[styleName]; if (!cfg) return; + this.azureTileSource.imageryStyle = AzureMapsImageryStyle[styleName as keyof typeof AzureMapsImageryStyle]; + this.azureBackground.imageryStyle = cfg.background ?? AzureMapsImageryStyle.DarkGrey; + cfg.zoom(); } }