Skip to content

mdd-refactored-azure-sample #1056

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 29, 2025
+81 −116
Merged

mdd-refactored-azure-sample #1056

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d541188
mdd-refactored-azure-sample
mddifilippo89 Sep 27, 2025
01f6467
Merge branch 'vnext' into mdd-refactored-azure-sample
mddifilippo89 Sep 29, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion samples/maps/geo-map/display-azure-imagery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<!-- 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-input id="azureKeyInput" label="An image will remain visible when no key is entered.">
<igc-icon name="password" slot="prefix"></igc-icon>
</igc-input>

Expand Down
195 changes: 80 additions & 115 deletions samples/maps/geo-map/display-azure-imagery/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `<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>`;

export class MapDisplayImageryAzureTiles {
Expand All @@ -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<string, string> = {
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<string, { placeholder: string; background?: AzureMapsImageryStyle; zoom: () => 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;
Expand All @@ -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();
}
}

Expand Down