diff --git a/samples/maps/geo-map/display-all-imagery/index.html b/samples/maps/geo-map/display-all-imagery/index.html index 496a6778a8..bbe1f75da5 100644 --- a/samples/maps/geo-map/display-all-imagery/index.html +++ b/samples/maps/geo-map/display-all-imagery/index.html @@ -4,33 +4,78 @@ MapImagerySources - + + +
+
+ + +
+ + -
-
- - -
+ + Enter Azure Key + +
- + + - + + + + -
+ + + +
+ Apply +
+ + +
- - <% if (false) { %><% } %> + <% if (false) { %><% } %> - \ No newline at end of file + diff --git a/samples/maps/geo-map/display-all-imagery/package.json b/samples/maps/geo-map/display-all-imagery/package.json index 9b5197c130..e4f00cdce6 100644 --- a/samples/maps/geo-map/display-all-imagery/package.json +++ b/samples/maps/geo-map/display-all-imagery/package.json @@ -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", diff --git a/samples/maps/geo-map/display-all-imagery/src/index.ts b/samples/maps/geo-map/display-all-imagery/src/index.ts index 517d27b3a5..4b2438b912 100644 --- a/samples/maps/geo-map/display-all-imagery/src/index.ts +++ b/samples/maps/geo-map/display-all-imagery/src/index.ts @@ -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 = { + "AzureMaps Satellite": AzureMapsImageryStyle.Satellite, + "AzureMaps Road": AzureMapsImageryStyle.Road, + "AzureMaps DarkGrey": AzureMapsImageryStyle.DarkGrey, + "AzureMaps TerraOverlay": AzureMapsImageryStyle.TerraOverlay + }; + + private azureFallbackImages: Record = { + "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 - + MapDisplayImageryBingTiles + - + + - + +
- -
+ +
+ + Enter Enterprise Key + +
-
- - - -
+ + +

+ Bing Maps Basic has been retired.
+ Please enter your Bing Maps Enterprise Key. +

+
+ + +
+ Cancel + Apply +
+ + + + +
- - <% if (false) { %><% } %> - - \ No newline at end of file + <% if (false) { %> + + <% } %> + + diff --git a/samples/maps/geo-map/display-bing-imagery/package.json b/samples/maps/geo-map/display-bing-imagery/package.json index f7f87948ca..c8dace8fb9 100644 --- a/samples/maps/geo-map/display-bing-imagery/package.json +++ b/samples/maps/geo-map/display-bing-imagery/package.json @@ -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", diff --git a/samples/maps/geo-map/display-bing-imagery/src/index.ts b/samples/maps/geo-map/display-bing-imagery/src/index.ts index 129a9f5a39..d2f3e840f4 100644 --- a/samples/maps/geo-map/display-bing-imagery/src/index.ts +++ b/samples/maps/geo-map/display-bing-imagery/src/index.ts @@ -1,92 +1,98 @@ -import { MapUtils, MapRegion } from './MapUtils'; -import { IgcGeographicMapModule } from 'igniteui-webcomponents-maps'; -import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps'; -import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts'; -import { BingMapsImageryStyle } from 'igniteui-webcomponents-maps'; -import { IgcBingMapsMapImagery } from 'igniteui-webcomponents-maps'; -import { ModuleManager } from 'igniteui-webcomponents-core'; - -ModuleManager.register( - IgcDataChartInteractivityModule, - IgcGeographicMapModule +import { + defineComponents, + IgcDialogComponent, + IgcButtonComponent, + IgcInputComponent +} from "igniteui-webcomponents"; + +import { + IgcGeographicMapModule, + IgcGeographicMapComponent, + IgcBingMapsMapImagery, + BingMapsImageryStyle +} from "igniteui-webcomponents-maps"; +import { + IgcOpenStreetMapImagery +} from "igniteui-webcomponents-maps"; +import { MapUtils, MapRegion } from "./MapUtils"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; +import { ModuleManager } from "igniteui-webcomponents-core"; + +defineComponents( + IgcDialogComponent, + IgcButtonComponent, + IgcInputComponent ); -export class MapDisplayImageryBingTiles { - - private geoMap1: IgcGeographicMapComponent; - private geoMap2: IgcGeographicMapComponent; - private geoMap3: IgcGeographicMapComponent; - - constructor() { +ModuleManager.register(IgcGeographicMapModule); - this.geoMap1 = document.getElementById('map1') as IgcGeographicMapComponent; - this.geoMap2 = document.getElementById('map2') as IgcGeographicMapComponent; - this.geoMap3 = document.getElementById('map3') as IgcGeographicMapComponent; +export class MapDisplayImageryBingTiles { - this.createMap1(this.geoMap1); - this.createMap2(this.geoMap2); - this.createMap3(this.geoMap3); - } + private map!: IgcGeographicMapComponent; + private dialog!: IgcDialogComponent; + private keyInput!: IgcInputComponent; - createMap1(map: IgcGeographicMapComponent) { - map.zoomable = true; - - const tileSource = new IgcBingMapsMapImagery(); - tileSource.apiKey = MapUtils.getBingKey(); - tileSource.imageryStyle = BingMapsImageryStyle.Aerial; - // 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 imagery!: IgcBingMapsMapImagery; + private enterpriseKey = ""; - map.backgroundContent = tileSource; + constructor() { - // optional - navigating to a map region - MapUtils.navigateTo(map, MapRegion.Caribbean); + // element refs + this.map = document.getElementById("bingMap") as IgcGeographicMapComponent; + this.dialog = document.getElementById("bingDialog") as IgcDialogComponent; + this.keyInput = document.getElementById("bingKeyInput") as IgcInputComponent; + + const btnOpen = document.getElementById("enterKeyBtn") as IgcButtonComponent; + const btnCancel = document.getElementById("cancelBtn") as IgcButtonComponent; + const btnApply = document.getElementById("applyBtn") as IgcButtonComponent; + + // map setup + this.imagery = new IgcBingMapsMapImagery(); + this.imagery.imageryStyle = BingMapsImageryStyle.AerialWithLabels; + this.map.backgroundContent = this.imagery; + + // initial zoom + MapUtils.navigateTo(this.map, MapRegion.Caribbean); + + // show dialog automatically on startup + requestAnimationFrame(() => { + this.dialog.open = true; + }); + + // manual open + btnOpen.addEventListener("click", () => { + this.dialog.open = true; + }); + + // cancel dialog + btnCancel.addEventListener("click", () => { + this.dialog.open = false; + }); + + // apply key + btnApply.addEventListener("click", () => { + const key = (this.keyInput.value || "").trim(); + if (key.length > 0) { + this.enterpriseKey = key; + this.applyKey(); + } + this.dialog.open = false; + }); } - createMap2(map: IgcGeographicMapComponent) { - map.zoomable = true; - const tileSource = new IgcBingMapsMapImagery(); - tileSource.apiKey = MapUtils.getBingKey(); - tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; - // 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 applyKey() { + this.imagery.apiKey = this.enterpriseKey; - map.backgroundContent = tileSource; + // protocol correction like Angular/React + const uri = this.imagery.actualBingImageryRestUri; - // optional - navigating to a map region - MapUtils.navigateTo(map, MapRegion.Caribbean); - } - - createMap3(map: IgcGeographicMapComponent) { - map.zoomable = true; - const tileSource = new IgcBingMapsMapImagery(); - tileSource.apiKey = MapUtils.getBingKey(); - tileSource.imageryStyle = BingMapsImageryStyle.Road; - // 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:'); + if (location.protocol === "https:") { + this.imagery.bingImageryRestUri = uri.replace("http:", "https:"); } else { - tileSource.bingImageryRestUri = tileUri.replace('https:', 'http:'); + this.imagery.bingImageryRestUri = uri.replace("https:", "http:"); } - map.backgroundContent = tileSource; - - // optional - navigating to a map region - MapUtils.navigateTo(map, MapRegion.Caribbean); + this.map.backgroundContent = this.imagery; } }