Skip to content

Mdd update bing samples #1081

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
HUSSAR-mtrela merged 7 commits into from
Nov 20, 2025
Merged

Mdd update bing samples #1081

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
c69c7f5
mdd-update-bing-sample
mddifilippo89 Nov 19, 2025
3b6e235
mdd-update-display-all
mddifilippo89 Nov 19, 2025
0a17198
mdd-review-update
mddifilippo89 Nov 20, 2025
08d47c7
Update index.html
mddifilippo89 Nov 20, 2025
bc929f4
Update index.ts
mddifilippo89 Nov 20, 2025
3a160a2
Merge branch 'vnext' into mdd-update-bing-samples
mddifilippo89 Nov 20, 2025
dec9719
mdd-update
mddifilippo89 Nov 20, 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
71 changes: 58 additions & 13 deletions samples/maps/geo-map/display-all-imagery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,78 @@
<title>MapImagerySources</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>
#enterAzureKeyBtn {
width: 200px;
align-self: center;
margin-bottom: 6px;
}

/* REQUIRED FIXES */

#geoMap.hidden {
display: none !important;
}

#placeholderImage.hidden {
display: none !important;
}

#placeholderImage {
max-width: 100%;
display: block;
margin-top: 8px;
}
</style>
</head>

<body>
<div id="root">
<div class="container sample">

<!-- Dropdown + Azure Key Button -->
<div class="options horizontal" style="align-items:center; gap: 8px;">
<label class="options-label">Imagery Tile Source</label>
<select id="mapTypeSelect"></select>

<div class="container sample">
<div class="options horizontal">
<label class="options-label">Imagery Tile Source</label>
<select id="mapTypeSelect">
</select>
</div>
<igc-button
id="enterAzureKeyBtn"
variant="contained"
disabled>
Enter Azure Key
</igc-button>
</div>

<igc-geographic-map id="geoMap" width="100%" height="100%">
<!-- Placeholder image (Azure only) -->
<img
id="placeholderImage"
class="hidden"
src=""
alt="Azure Placeholder" />

</igc-geographic-map>
<!-- Map -->
<igc-geographic-map id="geoMap" width="100%" height="800px">
<igc-geographic-tile-series id="azureSeries"></igc-geographic-tile-series>
</igc-geographic-map>

</div>
<!-- Azure Key Dialog -->
<igc-dialog id="enterpriseDialog" title="Azure Enterprise Key">
<igc-input id="enterpriseInput" placeholder="Enter Azure Maps Key"></igc-input>

<div slot="footer" style="display:flex;justify-content:flex-end;gap:8px;">
<igc-button id="applyKeyBtn" variant="flat">Apply</igc-button>
</div>
</igc-dialog>

</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>

<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>
</html>
1 change: 1 addition & 0 deletions samples/maps/geo-map/display-all-imagery/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"@webcomponents/template": "^1.4.2",
"babel-runtime": "^6.26.0",
"core-js": "^3.6.5",
"igniteui-webcomponents": "6.3.6",
"igniteui-webcomponents-charts": "6.3.0-beta.0",
"igniteui-webcomponents-core": "6.3.0-beta.0",
"igniteui-webcomponents-maps": "6.3.0-beta.0",
Expand Down
188 changes: 124 additions & 64 deletions samples/maps/geo-map/display-all-imagery/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,102 +1,162 @@
import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps';
import { IgcGeographicMapComponent, IgcOpenStreetMapImagery, IgcBingMapsMapImagery, IgcArcGISOnlineMapImagery, BingMapsImageryStyle } from 'igniteui-webcomponents-maps';
import {
IgcGeographicMapModule,
IgcGeographicMapComponent,
IgcOpenStreetMapImagery,
IgcArcGISOnlineMapImagery,
IgcAzureMapsImagery,
AzureMapsImageryStyle
} from 'igniteui-webcomponents-maps';

import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
import { ModuleManager } from 'igniteui-webcomponents-core';

import {
IgcDialogComponent,
IgcButtonComponent,
IgcInputComponent,
defineComponents
} from "igniteui-webcomponents";

import { EsriStyle } from './EsriUtility';
import { MapUtils } from './MapUtils';
import { MapUtils, MapRegion } from './MapUtils';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

ModuleManager.register(IgcDataChartInteractivityModule, IgcGeographicMapModule);

ModuleManager.register(
IgcDataChartInteractivityModule,
IgcGeographicMapModule
);
defineComponents(IgcDialogComponent, IgcButtonComponent, IgcInputComponent);

export class MapImagerySources {

private geoMap: IgcGeographicMapComponent;
private geoMap!: IgcGeographicMapComponent;
private dialog!: IgcDialogComponent;
private keyInput!: IgcInputComponent;
private azureButton!: IgcButtonComponent;
private azureFallback!: HTMLImageElement;

private azureKey = "";

private azureStyles: Record<string, AzureMapsImageryStyle> = {
"AzureMaps Satellite": AzureMapsImageryStyle.Satellite,
"AzureMaps Road": AzureMapsImageryStyle.Road,
"AzureMaps DarkGrey": AzureMapsImageryStyle.DarkGrey,
"AzureMaps TerraOverlay": AzureMapsImageryStyle.TerraOverlay
};

private azureFallbackImages: Record<string, string> = {
"AzureMaps Satellite": "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_satellite.png",
"AzureMaps Road": "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_road.png",
"AzureMaps DarkGrey": "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_darkgrey.png",
"AzureMaps TerraOverlay": "https://static.infragistics.com/xplatform/images/browsers/azure-maps/azure_terra_overlay.png"
};

constructor() {

this.onMapTypeSelectionChange = this.onMapTypeSelectionChange.bind(this);
this.geoMap = document.getElementById("geoMap") as IgcGeographicMapComponent;
this.dialog = document.getElementById("enterpriseDialog") as IgcDialogComponent;
this.keyInput = document.getElementById("enterpriseInput") as IgcInputComponent;
this.azureButton = document.getElementById("enterAzureKeyBtn") as IgcButtonComponent;
this.azureFallback = document.getElementById("placeholderImage") as HTMLImageElement;

this.geoMap = document.getElementById('geoMap') as IgcGeographicMapComponent;
this.geoMap.zoomToGeographic({ left: -120, top: 30, width: 45, height: 20 });
this.azureButton.disabled = true;

let dropDown: HTMLSelectElement = document.getElementById('mapTypeSelect') as HTMLSelectElement;
dropDown.addEventListener("change", this.onMapTypeSelectionChange);
const select = document.getElementById("mapTypeSelect") as HTMLSelectElement;
select.addEventListener("change", (e) => this.onMapTypeSelectionChange(e));

let openStreetOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
openStreetOption.textContent = "OpenStreetMaps (default)";
this.azureButton.addEventListener("click", () => this.dialog.show());

let bingOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
bingOption.textContent = "Bing Maps Road";
const applyBtn = document.getElementById("applyKeyBtn") as IgcButtonComponent;
applyBtn.addEventListener("click", () => this.applyKey());

let bingAerialNoLabelsOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
bingAerialNoLabelsOption.textContent = "Bing Maps Aerial Without Labels";
this.populateImageryList(select);

let bingAerialLabelsOption: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
bingAerialLabelsOption.textContent = "Bing Maps Aerial With Labels";
this.showMapOnly();
this.geoMap.backgroundContent = new IgcOpenStreetMapImagery();
}

private populateImageryList(select: HTMLSelectElement) {
select.add(new Option("OpenStreetMaps (default)"));

for (const key of Object.keys(this.azureStyles)) {
select.add(new Option(key));
}

dropDown.add(openStreetOption);
dropDown.add(bingOption);
dropDown.add(bingAerialNoLabelsOption);
dropDown.add(bingAerialLabelsOption);
for (const key of Object.keys(EsriStyle)) {
select.add(new Option("Esri " + key, EsriStyle[key as keyof typeof EsriStyle]));
}
}

const esriKeys = Object.keys(EsriStyle);
const esriVals = Object.values(EsriStyle);
private applyKey() {
const key = (this.keyInput.value || "").trim();
if (key) this.azureKey = key;

for (let i=0; i<esriKeys.length; i++) {
let option: HTMLOptionElement = document.createElement('option') as HTMLOptionElement;
let style = esriKeys[i];
this.dialog.hide();

option.textContent = "Esri " + style;
option.value = esriVals[i];
const select = document.getElementById("mapTypeSelect") as HTMLSelectElement;
const text = select.selectedOptions[0].textContent;

dropDown.add(option);
if (text.startsWith("AzureMaps")) {
this.applyAzureImagery(text);
}
}

public onMapTypeSelectionChange(e: any){
if (this.geoMap === undefined) return;
public onMapTypeSelectionChange(e: any) {
const text = e.target.selectedOptions[0].textContent;
const value = e.target.value;

let value: string = e.target.value;
this.azureButton.disabled = !text.startsWith("AzureMaps");

if(value.includes("OpenStreetMap")){
console.log("OSM");
// OSM
if (text.includes("OpenStreetMap")) {
this.showMapOnly();
this.geoMap.backgroundContent = new IgcOpenStreetMapImagery();
}
else if(value.includes("Bing Maps")){
if(value.includes("Aerial Without Labels")){
this.geoMap.backgroundContent = this.getBingMapsImagery(BingMapsImageryStyle.Aerial);
}
else if(value.includes("Aerial")){
this.geoMap.backgroundContent = this.getBingMapsImagery(BingMapsImageryStyle.AerialWithLabels);
}
else{
this.geoMap.backgroundContent = this.getBingMapsImagery(BingMapsImageryStyle.Road);

// Azure
else if (text.startsWith("AzureMaps")) {

if (!this.azureKey) {
let url = this.azureFallbackImages[text];
if (location.protocol !== "https:") {
url = url.replace("https:", "http:");
}

this.showAzureFallback(url);
} else {
this.applyAzureImagery(text);
}
}

// ESRI
else {
let uri = value;
const tileSource = new IgcArcGISOnlineMapImagery();
tileSource.mapServerUri = uri;
this.geoMap.backgroundContent = tileSource;
this.showMapOnly();
const esri = new IgcArcGISOnlineMapImagery();
esri.mapServerUri = value;
this.geoMap.backgroundContent = esri;
}
}

public getBingMapsImagery(mapStyle: BingMapsImageryStyle): IgcBingMapsMapImagery {
const tileSource = new IgcBingMapsMapImagery();
tileSource.apiKey = MapUtils.getBingKey();
tileSource.imageryStyle = mapStyle;
// resolving BingMaps uri based on HTTP protocol of hosting website
let tileUri = tileSource.actualBingImageryRestUri;
let isHttpSecured = window.location.toString().startsWith("https:");
if (isHttpSecured) {
tileSource.bingImageryRestUri = tileUri.replace("http:", "https:");
} else {
tileSource.bingImageryRestUri = tileUri.replace("https:", "http:");
}
private applyAzureImagery(text: string) {
this.showMapOnly();

const style = this.azureStyles[text];
const imagery = new IgcAzureMapsImagery();
imagery.apiKey = this.azureKey;
imagery.imageryStyle = style;

this.geoMap.backgroundContent = imagery;

MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates);
}

private showAzureFallback(url: string) {
this.azureFallback.src = url;
this.azureFallback.classList.remove("hidden");
this.geoMap.classList.add("hidden");
}

return tileSource;
private showMapOnly() {
this.azureFallback.classList.add("hidden");
this.geoMap.classList.remove("hidden");
}
}

Expand Down
53 changes: 39 additions & 14 deletions samples/maps/geo-map/display-bing-imagery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<head>
<title>MapDisplayImageryBingTiles</title>
<meta charset="UTF-8" />

<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<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>

</head>
<body>
<div class="container sample center" style="display:flex; flex-direction:column; gap:12px;">

<body>
<div id="root">
<!-- Button -->
<div style="width: 100%; display: flex; justify-content: center; margin-top: 8px;">
<igc-button
id="enterKeyBtn"
variant="contained"
style="min-width: 200px;"
>
Enter Enterprise Key
</igc-button>
</div>

<div class="container horizontal" >
<igc-geographic-map id="map1" class="container" height="100%" width="100%"></igc-geographic-map>
<igc-geographic-map id="map2" class="container" height="100%" width="100%"></igc-geographic-map>
<igc-geographic-map id="map3" class="container" height="100%" width="100%"></igc-geographic-map>
</div>
<!-- Enterprise Key Dialog -->
<igc-dialog id="bingDialog" title="Bing Maps Enterprise Key">
<p>
Bing Maps Basic has been retired.<br />
Please enter your <b>Bing Maps Enterprise Key</b>.
</p>
<br/>
<igc-input id="bingKeyInput" placeholder=""></igc-input>

<div slot="footer" style="display:flex; justify-content:flex-end; gap:8px;">
<igc-button id="cancelBtn" variant="flat">Cancel</igc-button>
<igc-button id="applyBtn" variant="flat">Apply</igc-button>
</div>
</igc-dialog>

<!-- Geographic Map -->
<igc-geographic-map id="bingMap" width="100%" height="100%">
</igc-geographic-map>

</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>
<% if (false) { %>
<script src="src/index.ts"></script>
<% } %>
</body>
</html>
Loading