From 670d2f11dbf413a577c9f513fd15b8c0a6a96a25 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Mon, 8 Sep 2025 15:19:55 -0400 Subject: [PATCH 1/4] mdd-azure-map mdd-azure-map --- .../display-azure-imagery/.eslintrc.js | 75 +++++++++++ .../geo-map/display-azure-imagery/README.md | 56 +++++++++ .../display-azure-imagery/package.json | 39 ++++++ .../display-azure-imagery/public/index.html | 10 ++ .../display-azure-imagery/sandbox.config.json | 5 + .../display-azure-imagery/src/MapUtils.ts | 109 ++++++++++++++++ .../display-azure-imagery/src/index.css | 0 .../display-azure-imagery/src/index.tsx | 118 ++++++++++++++++++ .../src/react-app-env.d.ts | 1 + .../display-azure-imagery/tsconfig.json | 44 +++++++ 10 files changed, 457 insertions(+) create mode 100644 samples/maps/geo-map/display-azure-imagery/.eslintrc.js create mode 100644 samples/maps/geo-map/display-azure-imagery/README.md create mode 100644 samples/maps/geo-map/display-azure-imagery/package.json create mode 100644 samples/maps/geo-map/display-azure-imagery/public/index.html create mode 100644 samples/maps/geo-map/display-azure-imagery/sandbox.config.json create mode 100644 samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts create mode 100644 samples/maps/geo-map/display-azure-imagery/src/index.css create mode 100644 samples/maps/geo-map/display-azure-imagery/src/index.tsx create mode 100644 samples/maps/geo-map/display-azure-imagery/src/react-app-env.d.ts create mode 100644 samples/maps/geo-map/display-azure-imagery/tsconfig.json diff --git a/samples/maps/geo-map/display-azure-imagery/.eslintrc.js b/samples/maps/geo-map/display-azure-imagery/.eslintrc.js new file mode 100644 index 0000000000..b45160a9ee --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/.eslintrc.js @@ -0,0 +1,75 @@ +// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project +module.exports = { + parser: "@typescript-eslint/parser", // Specifies the ESLint parser + parserOptions: { + ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features + sourceType: "module", // Allows for the use of imports + ecmaFeatures: { + jsx: true // Allows for the parsing of JSX + } + }, + settings: { + react: { + version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use + } + }, + extends: [ + "eslint:recommended", + "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react + "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin + ], + rules: { + // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + }, + "overrides": [ + { + "files": ["*.ts", "*.tsx"], + "rules": { + "default-case": "off", + "no-undef": "off", + "no-unused-vars": "off", + "no-extend-native": "off", + "no-throw-literal": "off", + "no-useless-concat": "off", + "no-mixed-operators": "off", + "no-prototype-builtins": "off", + "prefer-const": "off", + "prefer-rest-params": "off", + "jsx-a11y/alt-text": "off", + "jsx-a11y/iframe-has-title": "off", + "@typescript-eslint/no-unused-vars": "off", + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-useless-constructor": "off", + "@typescript-eslint/no-use-before-define": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/interface-name-prefix": "off", + "@typescript-eslint/prefer-namespace-keyword": "off", + "@typescript-eslint/explicit-function-return-type": "off", + "@typescript-eslint/explicit-module-boundary-types": "off" + } + } + ] + }; \ No newline at end of file diff --git a/samples/maps/geo-map/display-azure-imagery/README.md b/samples/maps/geo-map/display-azure-imagery/README.md new file mode 100644 index 0000000000..ba2090c097 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/README.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of React application with example of Display Bing Imagery feature using [Geo Map](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-react-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-react-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +Follow these instructions to run this example: + + +``` +git clone https://github.com/IgniteUI/igniteui-react-examples.git +git checkout master +cd ./igniteui-react-examples +cd ./samples/maps/geo-map/display-bing-imagery +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install --legacy-peer-deps +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for React** components, check out the [React documentation](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html). diff --git a/samples/maps/geo-map/display-azure-imagery/package.json b/samples/maps/geo-map/display-azure-imagery/package.json new file mode 100644 index 0000000000..5a58504541 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/package.json @@ -0,0 +1,39 @@ +{ + "name": "react-geographic-map-display-imagery-bing", + "description": "This project provides example of Geographic Map Display Imagery Bing using Infragistics React components", + "author": "Infragistics", + "homepage": ".", + "version": "1.4.0", + "private": true, + "scripts": { + "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start", + "build": "react-scripts --max_old_space_size=10240 build ", + "test": "react-scripts test --env=jsdom", + "eject": "react-scripts eject" + }, + "dependencies": { + "igniteui-react": "^19.2.0", + "igniteui-react-charts": "^19.0.2-beta.0", + "igniteui-react-core": "^19.0.2-beta.0", + "igniteui-react-maps": "^19.0.2-beta.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-scripts": "^5.0.1", + "tslib": "^2.4.0" + }, + "devDependencies": { + "@types/jest": "^29.2.0", + "@types/node": "^18.11.7", + "@types/react": "^18.0.24", + "@types/react-dom": "^18.0.8", + "react-app-rewired": "^2.2.1", + "typescript": "^4.8.4", + "worker-loader": "^3.0.8" + }, + "browserslist": [ + ">0.2%", + "not dead", + "not ie <= 11", + "not op_mini all" + ] +} diff --git a/samples/maps/geo-map/display-azure-imagery/public/index.html b/samples/maps/geo-map/display-azure-imagery/public/index.html new file mode 100644 index 0000000000..42f103e606 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/public/index.html @@ -0,0 +1,10 @@ + + + + MapDisplayImageryBingTiles + + + +
+ + \ No newline at end of file diff --git a/samples/maps/geo-map/display-azure-imagery/sandbox.config.json b/samples/maps/geo-map/display-azure-imagery/sandbox.config.json new file mode 100644 index 0000000000..00acba0c10 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts b/samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts new file mode 100644 index 0000000000..2e3936eb13 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts @@ -0,0 +1,109 @@ +import { IgrGeographicMap } from 'igniteui-react-maps'; + +export enum MapRegion { + Caribbean = "Caribbean", + UnitedStates = "United States", + UnitedKingdom = "United Kingdom", + European = "European", + SouthAfrica = "South Africa", + Poland = "Poland", + Australia = "Australia", + Japan = "Japan", + Uruguay = "Uruguay", + Egypt = "Egypt", + Hawaii = "Hawaii", +} + +export class MapUtils { + + public static navigateTo(geoMap: IgrGeographicMap, name: MapRegion): void { + + const geoRect = this.getRegions()[name]; + // console.log("MapUtils " + name) ; + geoMap.zoomToGeographic(geoRect); + } + + public static toPixel(num: number): string { + const s = Math.abs(num).toFixed(0); + return s + " px"; + } + + public static toLng(num: number): string { + num = this.clamp(num, -180, 180); + + let s = Math.abs(num).toFixed(1); + if (num < 100) { + s = " " + s + } + + if (num > 0) { + return s + "°E"; + } else { + return s + "°W"; + } + } + + public static toLat(num: number): string { + num = this.clamp(num, -90, 90); + + let s = Math.abs(num).toFixed(1); + if (num < 100) { + s = " " + s + } + + if (num > 0) { + return s + "°N"; + } else { + return s + "°S"; + } + } + + public static clamp(num: number, min: number, max: number): number { + return Math.max(min, Math.min(max, num)); + } + + public static pad(num: number, places?: number): string { + places = places || 20; + let s = num.toFixed(1).toString(); + while (s.length < places) {s = " " + s;} + return s; + } + + public static getBingKey(): string { + return "Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq"; + } + + public static getRegions(): any { + // create regions only once + if (this.Regions === undefined) { + this.createRegions(); + } + return this.Regions; + } + + private static Regions: any; + + private static addRegion(name: string, geoRect: any): void { + geoRect.name = name; + geoRect.longitude = geoRect.left + (geoRect.width / 2); + geoRect.latitude = geoRect.top + (geoRect.height / 2); + + this.Regions[name] = geoRect; + } + + private static createRegions(): void { + this.Regions = {}; + this.addRegion(MapRegion.Australia, { left: 81.5, top: -52.0, width: 98.0, height: 56.0 }); + this.addRegion(MapRegion.Caribbean, { left: -92.9, top: 5.4, width: 35.1, height: 25.8 }); + this.addRegion(MapRegion.Egypt, { left: 19.3, top: 19.9, width: 19.3, height: 13.4 }); + this.addRegion(MapRegion.European, { left: -36.0, top:31.0, width: 98.0, height: 38.0 }); + this.addRegion(MapRegion.Japan, { left: 122.7, top: 29.4, width: 27.5, height: 17.0 }); + this.addRegion(MapRegion.Hawaii, { left: -161.2, top: 18.5, width: 6.6, height: 4.8 }); + this.addRegion(MapRegion.Poland, { left: 13.0, top: 48.0, width: 11.0, height: 9.0 }); + this.addRegion(MapRegion.SouthAfrica, { left: 9.0, top: -37.1, width: 26.0, height: 17.8 }); + this.addRegion(MapRegion.UnitedStates, { left: -134.5, top: 16.0, width: 70.0, height: 37.0 }); + this.addRegion(MapRegion.UnitedKingdom, { left: -15.0, top: 49.5, width: 22.5, height: 8.0 }); + this.addRegion(MapRegion.Uruguay, { left: -62.1, top: -35.7, width: 10.6, height: 7.0 }); + } + +} diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.css b/samples/maps/geo-map/display-azure-imagery/src/index.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.tsx b/samples/maps/geo-map/display-azure-imagery/src/index.tsx new file mode 100644 index 0000000000..193477c4cd --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/src/index.tsx @@ -0,0 +1,118 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import { MapUtils, MapRegion } from './MapUtils'; +import { IgrGeographicMapModule } from 'igniteui-react-maps'; +import { IgrGeographicMap } from 'igniteui-react-maps'; +import { IgrAzureMapsMapImagery } from 'igniteui-react-maps'; +import { AzureMapsImageryStyle } from 'igniteui-react-maps'; +import { IgrButton, IgrDialog, IgrInput } from 'igniteui-react'; +import { IgrDataChartInteractivityModule } from 'igniteui-react-charts'; +// for handling of maps events and styling +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +IgrGeographicMapModule.register(); +IgrDataChartInteractivityModule.register(); + +export default class MapDisplayImageryAzure extends React.Component { + + public mapWeather?: IgrGeographicMap; + public mapAerial?: IgrGeographicMap; + public mapRoad?: IgrGeographicMap; + public apiKey: string; + public dialogRef: IgrDialog; + + constructor(props: any) { + super(props); + this.state = { apiKey: "" }; + this.onDialogRef = this.onDialogRef.bind(this); + this.onDialogShow = this.onDialogShow.bind(this); + this.onDialogHide = this.onDialogHide.bind(this); + this.onApiKeyChange = this.onApiKeyChange.bind(this); + + } + + public render(): JSX.Element { + return ( +
+ + Show Dialog + + + + + + + +
+ Cancel + OK +
+ + +
+ { this.mapWeather = ref!; }} + width="100%" height="100%" zoomable="true"/> +
+
+ { this.mapAerial = ref!; }} + width="100%" height="100%" zoomable="true"/> +
+
+ { this.mapRoad = ref!; }} + + width="100%" height="100%" zoomable="true"/> +
+
Imagery Tiles: @Azure Maps
+
+ ); + } + + public onApiKeyChange(e: any) { + console.log(e.detail); + this.setState({ apiKey: e.detail}, () => { + this.updateAzureMap(this.mapWeather, AzureMapsImageryStyle.WeatherInfrared); + this.updateAzureMap(this.mapAerial, AzureMapsImageryStyle.Imagery); + this.updateAzureMap(this.mapRoad, AzureMapsImageryStyle.Road); + } + ); + } + + public updateAzureMap = (geoMap: IgrGeographicMap | undefined, style: AzureMapsImageryStyle) => { + if (!geoMap || !this.state.apiKey) { return; } + + const tileSource = new IgrAzureMapsMapImagery(); + tileSource.apiKey = this.state.apiKey; + tileSource.imageryStyle = style; + + geoMap.backgroundContent = tileSource; + + // optional - navigating to a map region + MapUtils.navigateTo(geoMap, MapRegion.Caribbean); + } + + public onDialogRef(dialog: IgrDialog){ + if (!dialog) { return; } + this.dialogRef = dialog; + } + + public onDialogShow() { + if(this.dialogRef){ + this.dialogRef.show(); + } + } + + public onDialogHide() { + if(this.dialogRef){ + this.dialogRef.hide(); + } + } + +} + +// rendering above class to the React DOM +const root = ReactDOM.createRoot(document.getElementById('root')); +root.render(); diff --git a/samples/maps/geo-map/display-azure-imagery/src/react-app-env.d.ts b/samples/maps/geo-map/display-azure-imagery/src/react-app-env.d.ts new file mode 100644 index 0000000000..6431bc5fc6 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/samples/maps/geo-map/display-azure-imagery/tsconfig.json b/samples/maps/geo-map/display-azure-imagery/tsconfig.json new file mode 100644 index 0000000000..8c0d146f95 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "resolveJsonModule": true, + "esModuleInterop": true, + "baseUrl": ".", + "outDir": "build/dist", + "module": "esnext", + "target": "es5", + "lib": [ + "es6", + "dom" + ], + "sourceMap": true, + "allowJs": true, + "jsx": "react-jsx", + "moduleResolution": "node", + "rootDir": "src", + "forceConsistentCasingInFileNames": true, + "noImplicitReturns": true, + "noImplicitThis": true, + "noImplicitAny": true, + "noUnusedLocals": false, + "importHelpers": true, + "allowSyntheticDefaultImports": true, + "skipLibCheck": true, + "strict": false, + "isolatedModules": true, + "noEmit": true + }, + "exclude": [ + "node_modules", + "build", + "scripts", + "acceptance-tests", + "webpack", + "jest", + "src/setupTests.ts", + "**/odatajs-4.0.0.js", + "config-overrides.js" + ], + "include": [ + "src" + ] +} From 37574ace0332fbcf21b1eabe356e0f6c6c379c60 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Mon, 8 Sep 2025 15:22:08 -0400 Subject: [PATCH 2/4] update update --- samples/maps/geo-map/display-azure-imagery/README.md | 8 ++++---- samples/maps/geo-map/display-azure-imagery/package.json | 4 ++-- .../maps/geo-map/display-azure-imagery/public/index.html | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/samples/maps/geo-map/display-azure-imagery/README.md b/samples/maps/geo-map/display-azure-imagery/README.md index ba2090c097..d2dc0bef00 100644 --- a/samples/maps/geo-map/display-azure-imagery/README.md +++ b/samples/maps/geo-map/display-azure-imagery/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of React application with example of Display Bing Imagery feature using [Geo Map](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. +This folder contains implementation of React application with example of Display Azure Imagery feature using [Geo Map](https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html) component. @@ -12,10 +12,10 @@ This folder contains implementation of React application with example of Display View Code - + Run Sample - + Run Sample @@ -34,7 +34,7 @@ Follow these instructions to run this example: git clone https://github.com/IgniteUI/igniteui-react-examples.git git checkout master cd ./igniteui-react-examples -cd ./samples/maps/geo-map/display-bing-imagery +cd ./samples/maps/geo-map/display-azure-imagery ``` open above folder in VS Code or type: diff --git a/samples/maps/geo-map/display-azure-imagery/package.json b/samples/maps/geo-map/display-azure-imagery/package.json index 5a58504541..3e4ec11c29 100644 --- a/samples/maps/geo-map/display-azure-imagery/package.json +++ b/samples/maps/geo-map/display-azure-imagery/package.json @@ -1,6 +1,6 @@ { - "name": "react-geographic-map-display-imagery-bing", - "description": "This project provides example of Geographic Map Display Imagery Bing using Infragistics React components", + "name": "react-geographic-map-display-imagery-azure", + "description": "This project provides example of Geographic Map Display Imagery Azure using Infragistics React components", "author": "Infragistics", "homepage": ".", "version": "1.4.0", diff --git a/samples/maps/geo-map/display-azure-imagery/public/index.html b/samples/maps/geo-map/display-azure-imagery/public/index.html index 42f103e606..e9393dc8ee 100644 --- a/samples/maps/geo-map/display-azure-imagery/public/index.html +++ b/samples/maps/geo-map/display-azure-imagery/public/index.html @@ -1,7 +1,7 @@ - MapDisplayImageryBingTiles + MapDisplayImageryAzureTiles From eaea916015eed9eecb8481df80de7d228dd6bf04 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Thu, 25 Sep 2025 17:16:41 -0400 Subject: [PATCH 3/4] mdd-improve-azure-react-sample mdd-improve-azure-react-sample --- .../display-azure-imagery/src/index.tsx | 337 +++++++++++++----- 1 file changed, 246 insertions(+), 91 deletions(-) diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.tsx b/samples/maps/geo-map/display-azure-imagery/src/index.tsx index 193477c4cd..1877aa61c3 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/index.tsx +++ b/samples/maps/geo-map/display-azure-imagery/src/index.tsx @@ -1,116 +1,271 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { MapUtils, MapRegion } from './MapUtils'; -import { IgrGeographicMapModule } from 'igniteui-react-maps'; -import { IgrGeographicMap } from 'igniteui-react-maps'; -import { IgrAzureMapsMapImagery } from 'igniteui-react-maps'; -import { AzureMapsImageryStyle } from 'igniteui-react-maps'; -import { IgrButton, IgrDialog, IgrInput } from 'igniteui-react'; -import { IgrDataChartInteractivityModule } from 'igniteui-react-charts'; -// for handling of maps events and styling -import 'igniteui-webcomponents/themes/light/bootstrap.css'; +import { + IgrGeographicMapModule, + IgrGeographicMap, + IgrAzureMapsMapImagery, + AzureMapsImageryStyle, + IgrGeographicTileSeries +} from "igniteui-react-maps"; +import { IgrButton, IgrDialog, IgrInput, IgrSelect, IgrSelectItem } from "igniteui-react"; +import { IgrDataChartInteractivityModule } from "igniteui-react-charts"; +import "igniteui-webcomponents/themes/light/bootstrap.css"; IgrGeographicMapModule.register(); IgrDataChartInteractivityModule.register(); +enum MapRegion { UnitedStates } + +class MapUtils { + public static navigateTo(geoMap: IgrGeographicMap | undefined, region: MapRegion) { + if (!geoMap) return; + if (region === MapRegion.UnitedStates) + geoMap.zoomToGeographic({ left: -125, top: 50, width: 60, height: 25 }); + } + + public static zoomToNYC(geoMap: IgrGeographicMap | undefined) { + if (!geoMap) return; + geoMap.zoomToGeographic({ left: -74.2591, top: 40.9176, width: -73.7004 - (-74.2591), height: 40.4774 - 40.9176 }); + } +} + +const 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" +}; + +const trafficWeatherStyles = [ + AzureMapsImageryStyle.TrafficDelay, + AzureMapsImageryStyle.TrafficAbsolute, + AzureMapsImageryStyle.TrafficReduced, + AzureMapsImageryStyle.TrafficRelativeDark, + AzureMapsImageryStyle.WeatherInfrared, + AzureMapsImageryStyle.WeatherRadar +]; + export default class MapDisplayImageryAzure extends React.Component { + private geoMap?: IgrGeographicMap; + private dialogRef?: IgrDialog; - public mapWeather?: IgrGeographicMap; - public mapAerial?: IgrGeographicMap; - public mapRoad?: IgrGeographicMap; - public apiKey: string; - public dialogRef: IgrDialog; + constructor(props: any) { + super(props); + this.state = { apiKey: "", styleName: "Satellite", mapVisible: false }; - constructor(props: any) { - super(props); - this.state = { apiKey: "" }; - this.onDialogRef = this.onDialogRef.bind(this); - this.onDialogShow = this.onDialogShow.bind(this); - this.onDialogHide = this.onDialogHide.bind(this); - this.onApiKeyChange = this.onApiKeyChange.bind(this); + this.onDialogRef = this.onDialogRef.bind(this); + this.onDialogShow = this.onDialogShow.bind(this); + this.onDialogHide = this.onDialogHide.bind(this); + this.onApiKeyChange = this.onApiKeyChange.bind(this); + this.onApplyKey = this.onApplyKey.bind(this); + this.onResetKey = this.onResetKey.bind(this); + this.onStyleChange = this.onStyleChange.bind(this); + } - } + render(): JSX.Element { + return ( +
+ {/* Controls panel */} +
+ + Enter Azure Maps API Key + - public render(): JSX.Element { - return ( -
- - Show Dialog - - - - - - - -
- Cancel - OK -
- - -
- { this.mapWeather = ref!; }} - width="100%" height="100%" zoomable="true"/> -
-
- { this.mapAerial = ref!; }} - width="100%" height="100%" zoomable="true"/> -
-
- { this.mapRoad = ref!; }} - - width="100%" height="100%" zoomable="true"/> -
-
Imagery Tiles: @Azure Maps
-
- ); - } + + {Object.keys(placeholderImages).map((key) => ( + + {key} + + ))} + +
- public onApiKeyChange(e: any) { - console.log(e.detail); - this.setState({ apiKey: e.detail}, () => { - this.updateAzureMap(this.mapWeather, AzureMapsImageryStyle.WeatherInfrared); - this.updateAzureMap(this.mapAerial, AzureMapsImageryStyle.Imagery); - this.updateAzureMap(this.mapRoad, AzureMapsImageryStyle.Road); - } - ); - } + {/* Placeholder image */} + {!this.state.mapVisible && ( +
+ {this.state.styleName} +
+ )} + + {/* Map container */} +
+ (this.geoMap = r!)} + width="100%" + height="100%" + zoomable={true} + /> +
- public updateAzureMap = (geoMap: IgrGeographicMap | undefined, style: AzureMapsImageryStyle) => { - if (!geoMap || !this.state.apiKey) { return; } + {/* Dialog for API key */} + + +
+ + Reset + + + Submit + +
+ +
+ ); +} - const tileSource = new IgrAzureMapsMapImagery(); - tileSource.apiKey = this.state.apiKey; - tileSource.imageryStyle = style; - - geoMap.backgroundContent = tileSource; + private onDialogRef(dialog: IgrDialog) { this.dialogRef = dialog; } + private onDialogShow() { this.dialogRef?.show(); } + private onDialogHide() { this.dialogRef?.hide(); } + private onApiKeyChange(e: any) { this.setState({ apiKey: e.detail ?? e.target?.value ?? "" }); } + private onResetKey() { this.setState({ apiKey: "", mapVisible: false }); this.onDialogHide(); } - // optional - navigating to a map region - MapUtils.navigateTo(geoMap, MapRegion.Caribbean); - } + private onApplyKey() { + if (!this.state.apiKey) { this.onDialogHide(); return; } + this.setState({ mapVisible: true }, () => this.updateAzureMap(this.mapStyleFromName(this.state.styleName))); + this.onDialogHide(); + } - public onDialogRef(dialog: IgrDialog){ - if (!dialog) { return; } - this.dialogRef = dialog; - } + private onStyleChange(e: CustomEvent) { + const selected = e.detail.value as string; + this.setState({ styleName: selected }, () => { + if (this.state.apiKey) this.updateAzureMap(this.mapStyleFromName(selected)); + }); + } - public onDialogShow() { - if(this.dialogRef){ - this.dialogRef.show(); - } + private mapStyleFromName(name: string): AzureMapsImageryStyle { + switch (name) { + case "Satellite": return AzureMapsImageryStyle.Imagery; + case "Road": return AzureMapsImageryStyle.Road; + case "DarkGrey": return AzureMapsImageryStyle.DarkGrey; + case "TerraOverlay": return AzureMapsImageryStyle.Terra; + case "HybridRoadOverlay": return AzureMapsImageryStyle.HybridRoad; + case "HybridDarkGreyOverlay": return AzureMapsImageryStyle.HybridDarkGrey; + case "LabelsRoadOverlay": return AzureMapsImageryStyle.LabelsRoad; + case "LabelsDarkGreyOverlay": return AzureMapsImageryStyle.LabelsDarkGrey; + case "TrafficDelayOverlay": return AzureMapsImageryStyle.TrafficDelay; + case "TrafficAbsoluteOverlay": return AzureMapsImageryStyle.TrafficAbsolute; + case "TrafficReducedOverlay": return AzureMapsImageryStyle.TrafficReduced; + case "TrafficRelativeOverlay": return AzureMapsImageryStyle.TrafficRelativeDark; + case "WeatherInfraredOverlay": return AzureMapsImageryStyle.WeatherInfrared; + case "WeatherRadarOverlay": return AzureMapsImageryStyle.WeatherRadar; + default: return AzureMapsImageryStyle.Imagery; } + } + + private updateAzureMap(style: AzureMapsImageryStyle) { + if (!this.geoMap || !this.state.apiKey) return; + + this.geoMap.series.clear(); + const tileSource = new IgrAzureMapsMapImagery(); + tileSource.apiKey = this.state.apiKey; - public onDialogHide() { - if(this.dialogRef){ - this.dialogRef.hide(); - } + const series = new IgrGeographicTileSeries({ name: "AzureTileSeries", tileImagery: tileSource }); + series.tileImagery = tileSource; + + if (trafficWeatherStyles.includes(style)) { + const bg = new IgrAzureMapsMapImagery(); + bg.apiKey = this.state.apiKey; + bg.imageryStyle = AzureMapsImageryStyle.DarkGrey; + this.geoMap.backgroundContent = bg; + + tileSource.imageryStyle = style; + this.geoMap.series.add(series); + + if (style === AzureMapsImageryStyle.WeatherInfrared || style === AzureMapsImageryStyle.WeatherRadar) { + MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates); + } else { + MapUtils.zoomToNYC(this.geoMap); + } } + else if (style === AzureMapsImageryStyle.Terra) { + const bg = new IgrAzureMapsMapImagery(); + bg.apiKey = this.state.apiKey; + bg.imageryStyle = AzureMapsImageryStyle.Imagery; + this.geoMap.backgroundContent = bg; + tileSource.imageryStyle = style; + this.geoMap.series.add(series); + MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates); + } + else { + tileSource.imageryStyle = style; + this.geoMap.series.add(series); + const bg = new IgrAzureMapsMapImagery(); + bg.apiKey = this.state.apiKey; + bg.imageryStyle = AzureMapsImageryStyle.Imagery; + this.geoMap.backgroundContent = bg; + MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates); + } + } } // rendering above class to the React DOM From e5a103d6ab31f8f8be39a5733ddd1d4bdaea69f4 Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Thu, 25 Sep 2025 17:22:04 -0400 Subject: [PATCH 4/4] update-changes-from-19.0.2-beta.2 19.0.2-beta.2 --- .../display-azure-imagery/package.json | 6 +- .../display-azure-imagery/src/index.tsx | 56 +++++++++---------- 2 files changed, 31 insertions(+), 31 deletions(-) diff --git a/samples/maps/geo-map/display-azure-imagery/package.json b/samples/maps/geo-map/display-azure-imagery/package.json index 3e4ec11c29..679ab97a54 100644 --- a/samples/maps/geo-map/display-azure-imagery/package.json +++ b/samples/maps/geo-map/display-azure-imagery/package.json @@ -13,9 +13,9 @@ }, "dependencies": { "igniteui-react": "^19.2.0", - "igniteui-react-charts": "^19.0.2-beta.0", - "igniteui-react-core": "^19.0.2-beta.0", - "igniteui-react-maps": "^19.0.2-beta.0", + "igniteui-react-charts": "^19.0.2-beta.2", + "igniteui-react-core": "^19.0.2-beta.2", + "igniteui-react-maps": "^19.0.2-beta.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "^5.0.1", diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.tsx b/samples/maps/geo-map/display-azure-imagery/src/index.tsx index 1877aa61c3..4a31780674 100644 --- a/samples/maps/geo-map/display-azure-imagery/src/index.tsx +++ b/samples/maps/geo-map/display-azure-imagery/src/index.tsx @@ -4,7 +4,7 @@ import './index.css'; import { IgrGeographicMapModule, IgrGeographicMap, - IgrAzureMapsMapImagery, + IgrAzureMapsImagery, AzureMapsImageryStyle, IgrGeographicTileSeries } from "igniteui-react-maps"; @@ -48,12 +48,12 @@ const placeholderImages: Record = { }; const trafficWeatherStyles = [ - AzureMapsImageryStyle.TrafficDelay, - AzureMapsImageryStyle.TrafficAbsolute, - AzureMapsImageryStyle.TrafficReduced, - AzureMapsImageryStyle.TrafficRelativeDark, - AzureMapsImageryStyle.WeatherInfrared, - AzureMapsImageryStyle.WeatherRadar + AzureMapsImageryStyle.TrafficDelayOverlay, + AzureMapsImageryStyle.TrafficAbsoluteOverlay, + AzureMapsImageryStyle.TrafficReducedOverlay, + AzureMapsImageryStyle.TrafficRelativeDarkOverlay, + AzureMapsImageryStyle.WeatherInfraredOverlay, + AzureMapsImageryStyle.WeatherRadarOverlay ]; export default class MapDisplayImageryAzure extends React.Component { @@ -203,21 +203,21 @@ export default class MapDisplayImageryAzure extends React.Component { private mapStyleFromName(name: string): AzureMapsImageryStyle { switch (name) { - case "Satellite": return AzureMapsImageryStyle.Imagery; + case "Satellite": return AzureMapsImageryStyle.Satellite; case "Road": return AzureMapsImageryStyle.Road; case "DarkGrey": return AzureMapsImageryStyle.DarkGrey; - case "TerraOverlay": return AzureMapsImageryStyle.Terra; - case "HybridRoadOverlay": return AzureMapsImageryStyle.HybridRoad; - case "HybridDarkGreyOverlay": return AzureMapsImageryStyle.HybridDarkGrey; - case "LabelsRoadOverlay": return AzureMapsImageryStyle.LabelsRoad; - case "LabelsDarkGreyOverlay": return AzureMapsImageryStyle.LabelsDarkGrey; - case "TrafficDelayOverlay": return AzureMapsImageryStyle.TrafficDelay; - case "TrafficAbsoluteOverlay": return AzureMapsImageryStyle.TrafficAbsolute; - case "TrafficReducedOverlay": return AzureMapsImageryStyle.TrafficReduced; - case "TrafficRelativeOverlay": return AzureMapsImageryStyle.TrafficRelativeDark; - case "WeatherInfraredOverlay": return AzureMapsImageryStyle.WeatherInfrared; - case "WeatherRadarOverlay": return AzureMapsImageryStyle.WeatherRadar; - default: return AzureMapsImageryStyle.Imagery; + case "TerraOverlay": return AzureMapsImageryStyle.TerraOverlay; + case "HybridRoadOverlay": return AzureMapsImageryStyle.HybridRoadOverlay; + case "HybridDarkGreyOverlay": return AzureMapsImageryStyle.HybridDarkGreyOverlay; + case "LabelsRoadOverlay": return AzureMapsImageryStyle.LabelsRoadOverlay; + case "LabelsDarkGreyOverlay": return AzureMapsImageryStyle.LabelsDarkGreyOverlay; + case "TrafficDelayOverlay": return AzureMapsImageryStyle.TrafficDelayOverlay; + case "TrafficAbsoluteOverlay": return AzureMapsImageryStyle.TrafficAbsoluteOverlay; + case "TrafficReducedOverlay": return AzureMapsImageryStyle.TrafficReducedOverlay; + case "TrafficRelativeOverlay": return AzureMapsImageryStyle.TrafficRelativeDarkOverlay; + case "WeatherInfraredOverlay": return AzureMapsImageryStyle.WeatherInfraredOverlay; + case "WeatherRadarOverlay": return AzureMapsImageryStyle.WeatherRadarOverlay; + default: return AzureMapsImageryStyle.Satellite; } } @@ -225,14 +225,14 @@ export default class MapDisplayImageryAzure extends React.Component { if (!this.geoMap || !this.state.apiKey) return; this.geoMap.series.clear(); - const tileSource = new IgrAzureMapsMapImagery(); + const tileSource = new IgrAzureMapsImagery(); tileSource.apiKey = this.state.apiKey; const series = new IgrGeographicTileSeries({ name: "AzureTileSeries", tileImagery: tileSource }); series.tileImagery = tileSource; if (trafficWeatherStyles.includes(style)) { - const bg = new IgrAzureMapsMapImagery(); + const bg = new IgrAzureMapsImagery(); bg.apiKey = this.state.apiKey; bg.imageryStyle = AzureMapsImageryStyle.DarkGrey; this.geoMap.backgroundContent = bg; @@ -240,16 +240,16 @@ export default class MapDisplayImageryAzure extends React.Component { tileSource.imageryStyle = style; this.geoMap.series.add(series); - if (style === AzureMapsImageryStyle.WeatherInfrared || style === AzureMapsImageryStyle.WeatherRadar) { + if (style === AzureMapsImageryStyle.WeatherInfraredOverlay || style === AzureMapsImageryStyle.WeatherRadarOverlay) { MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates); } else { MapUtils.zoomToNYC(this.geoMap); } } - else if (style === AzureMapsImageryStyle.Terra) { - const bg = new IgrAzureMapsMapImagery(); + else if (style === AzureMapsImageryStyle.TerraOverlay) { + const bg = new IgrAzureMapsImagery(); bg.apiKey = this.state.apiKey; - bg.imageryStyle = AzureMapsImageryStyle.Imagery; + bg.imageryStyle = AzureMapsImageryStyle.Satellite; this.geoMap.backgroundContent = bg; tileSource.imageryStyle = style; @@ -259,9 +259,9 @@ export default class MapDisplayImageryAzure extends React.Component { else { tileSource.imageryStyle = style; this.geoMap.series.add(series); - const bg = new IgrAzureMapsMapImagery(); + const bg = new IgrAzureMapsImagery(); bg.apiKey = this.state.apiKey; - bg.imageryStyle = AzureMapsImageryStyle.Imagery; + bg.imageryStyle = AzureMapsImageryStyle.Satellite; this.geoMap.backgroundContent = bg; MapUtils.navigateTo(this.geoMap, MapRegion.UnitedStates); }