From cefc7884c00b86dcfad5dfee57381177eb112e6a Mon Sep 17 00:00:00 2001 From: mddifilippo89 Date: Tue, 9 Sep 2025 17:28:17 -0400 Subject: [PATCH] mdd-azure-wc-sample mdd-azure-wc-sample --- .../geo-map/display-azure-imagery/.prettierrc | 11 ++ .../geo-map/display-azure-imagery/ReadMe.md | 56 +++++++++ .../geo-map/display-azure-imagery/index.html | 40 +++++++ .../display-azure-imagery/package.json | 62 ++++++++++ .../display-azure-imagery/sandbox.config.json | 7 ++ .../display-azure-imagery/src/MapUtils.ts | 109 ++++++++++++++++++ .../display-azure-imagery/src/index.css | 2 + .../display-azure-imagery/src/index.ts | 74 ++++++++++++ .../display-azure-imagery/tsconfig.json | 20 ++++ .../display-azure-imagery/webpack.config.js | 107 +++++++++++++++++ 10 files changed, 488 insertions(+) create mode 100644 samples/maps/geo-map/display-azure-imagery/.prettierrc create mode 100644 samples/maps/geo-map/display-azure-imagery/ReadMe.md create mode 100644 samples/maps/geo-map/display-azure-imagery/index.html create mode 100644 samples/maps/geo-map/display-azure-imagery/package.json 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.ts create mode 100644 samples/maps/geo-map/display-azure-imagery/tsconfig.json create mode 100644 samples/maps/geo-map/display-azure-imagery/webpack.config.js diff --git a/samples/maps/geo-map/display-azure-imagery/.prettierrc b/samples/maps/geo-map/display-azure-imagery/.prettierrc new file mode 100644 index 0000000000..15a7c7c6cf --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/.prettierrc @@ -0,0 +1,11 @@ +{ + "printWidth": 250, + "tabWidth": 4, + "useTabs": false, + "semi": true, + "singleQuote": false, + "trailingComma": "none", + "bracketSpacing": true, + "jsxBracketSameLine": false, + "fluid": false +} \ 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..c31d2e2487 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/ReadMe.md @@ -0,0 +1,56 @@ + + + +This folder contains implementation of Web Components application with example of Geo Display Azure Imagery feature using [Geographic Map](https://infragistics.com/webcomponentssite/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-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-wc-examples.git +git checkout master +cd ./igniteui-wc-examples +cd ./samples/maps/geo-map/display-azure-imagery +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: + +``` +npm install +npm run start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html). diff --git a/samples/maps/geo-map/display-azure-imagery/index.html b/samples/maps/geo-map/display-azure-imagery/index.html new file mode 100644 index 0000000000..11a1cc813a --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/index.html @@ -0,0 +1,40 @@ + + + + MapDisplayImageryAzureTiles + + + + + + + + + + + +
+ +
+ Show Dialog + + + + + +
+ Cancel + OK +
+ + + + +
+ +
+ + <% if (false) { %><% } %> + + + \ No newline at end of file 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..1ea70d5240 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/package.json @@ -0,0 +1,62 @@ +{ + "name": "wc-geographic-map-display-imagery-azure-tiles", + "version": "1.0.0", + "description": "This project provides example of Geographic Map Display Imagery Azure Tiles using IgniteUI for Web Components", + "main": "src/index.ts", + "scripts": { + "build": "npm run build:prod", + "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start": "npm run serve:dev", + "build:legacy": "npm run build:prod:legacy", + "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details", + "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail", + "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open", + "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/", + "start:legacy": "npm run serve:dev:legacy" + }, + "author": "Infragistics", + "dependencies": { + "@webcomponents/custom-elements": "^1.4.1", + "@webcomponents/template": "^1.4.2", + "babel-runtime": "^6.26.0", + "core-js": "^3.6.5", + "igniteui-webcomponents": "6.2.1", + "igniteui-webcomponents-charts": "6.0.2-beta.0", + "igniteui-webcomponents-core": "6.0.2-beta.0", + "igniteui-webcomponents-maps": "6.0.2-beta.0", + "lit-html": "^3.2.0", + "tslib": "^2.0.0" + }, + "devDependencies": { + "@babel/cli": "^7.8.3", + "@babel/core": "^7.8.3", + "@babel/plugin-transform-class-properties": "^7.25.9", + "@babel/plugin-transform-class-static-block": "^7.26.0", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.8.3", + "@babel/preset-typescript": "^7.8.3", + "@types/source-map": "^0.5.7", + "babel-loader": "^8.1.0", + "babel-plugin-transform-custom-element-classes": "^0.1.0", + "css-loader": "^1.0.0", + "csv-loader": "^3.0.2", + "file-loader": "^4.2.0", + "fork-ts-checker-webpack-plugin": "^9.1.0", + "html-webpack-plugin": "^4.3.0", + "parcel-bundler": "^1.6.1", + "source-map": "^0.7.3", + "style-loader": "^0.22.1", + "tsconfig-paths-webpack-plugin": "^4.0.0", + "typescript": "^5.9.2", + "webpack": "^5.96.1", + "webpack-cli": "^4.10.0", + "webpack-dev-server": "^4.11.1", + "worker-loader": "^3.0.8", + "xml-loader": "^1.2.1" + }, + "license": "", + "homepage": "." +} 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..5c5b54fe21 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/sandbox.config.json @@ -0,0 +1,7 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser", + "template": "parcel" +} + \ 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..f170a393d7 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts @@ -0,0 +1,109 @@ +import { IgcGeographicMapComponent } from 'igniteui-webcomponents-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: IgcGeographicMapComponent, 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..0fe9368715 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/src/index.css @@ -0,0 +1,2 @@ +/* shared styles are loaded from: */ +/* https://static.infragistics.com/xplatform/css/samples */ \ No newline at end of file diff --git a/samples/maps/geo-map/display-azure-imagery/src/index.ts b/samples/maps/geo-map/display-azure-imagery/src/index.ts new file mode 100644 index 0000000000..ad664194f3 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/src/index.ts @@ -0,0 +1,74 @@ +import { MapUtils, MapRegion } from './MapUtils'; +import { AzureMapsImageryStyle, IgcAzureMapsImagery, IgcGeographicMapModule } from 'igniteui-webcomponents-maps'; +import { IgcGeographicMapComponent } from 'igniteui-webcomponents-maps'; +import { IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts'; +import { ModuleManager } from 'igniteui-webcomponents-core'; +import { defineComponents, IgcButtonComponent, IgcDialogComponent, IgcInputComponent } from 'igniteui-webcomponents'; +import 'igniteui-webcomponents/themes/light/bootstrap.css'; + +defineComponents(IgcDialogComponent, IgcButtonComponent, IgcInputComponent); + +ModuleManager.register( + IgcDataChartInteractivityModule, + IgcGeographicMapModule +); + +export class MapDisplayImageryAzureTiles { + + private mapWeather: IgcGeographicMapComponent; + private mapAerial: IgcGeographicMapComponent; + private mapRoad: IgcGeographicMapComponent; + private apiKey: string | undefined; + private dialog!: IgcDialogComponent; + + constructor() { + + this.mapWeather = document.getElementById('mapWeather') as IgcGeographicMapComponent; + this.mapAerial = document.getElementById('mapAerial') as IgcGeographicMapComponent; + this.mapRoad = document.getElementById('mapRoad') as IgcGeographicMapComponent; + var azurekeyInput = document.getElementById("azurekeyInput") as IgcInputComponent; + + azurekeyInput.addEventListener('input', (ev: any) => + { + this.apiKey = (ev.target as HTMLInputElement).value; + + this.updateAzureMap(this.mapWeather, AzureMapsImageryStyle.WeatherInfraredOverlay); + this.updateAzureMap(this.mapAerial, AzureMapsImageryStyle.Satellite); + this.updateAzureMap(this.mapRoad, AzureMapsImageryStyle.Road); + }); + + + window.addEventListener("DOMContentLoaded", async () => { + this.dialog = document.getElementById("dialog") as IgcDialogComponent; + var submitButton = document.getElementById("submitButton") as IgcButtonComponent; + + // Show dialog immediately on startup + this.dialog.show(); + + submitButton.addEventListener("click", () => { + this.apiKey = azurekeyInput.value; + this.dialog.hide(); + }); + }); + + } + + updateAzureMap(map: IgcGeographicMapComponent | undefined, style: AzureMapsImageryStyle) { + if (!map) { + return; + } + map.zoomable = true; + + const tileSource = new IgcAzureMapsImagery(); + tileSource.apiKey = this.apiKey ?? ""; + tileSource.imageryStyle = style; + + map.backgroundContent = tileSource; + + // optional - navigating to a map region + MapUtils.navigateTo(map, MapRegion.Caribbean); + } + +} + +new MapDisplayImageryAzureTiles(); 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..de23257dd8 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "noImplicitReturns": true, + "esModuleInterop": true, + "noImplicitAny": true, + "declarationDir": "dist/types", + "moduleResolution": "node", + "declaration": true, + "target": "es2015", + "module": "es2015", + "strict": true + }, + "include": [ + "src/**/*" + ], + "exclude": [ + "node_modules", + "dist" + ] +} \ No newline at end of file diff --git a/samples/maps/geo-map/display-azure-imagery/webpack.config.js b/samples/maps/geo-map/display-azure-imagery/webpack.config.js new file mode 100644 index 0000000000..3813144cf8 --- /dev/null +++ b/samples/maps/geo-map/display-azure-imagery/webpack.config.js @@ -0,0 +1,107 @@ +const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const path = require('path'); +const webpack = require('webpack'); + +module.exports = env => { + const nodeEnv = process.env.NODE_ENV || 'development'; + const isProd = nodeEnv === 'production'; + const isLegacy = !!process.env.legacy && !(process.env.legacy == "false"); + console.log(">> webpack nodeEnv=" + nodeEnv); + console.log(">> webpack isProd=" + isProd); + console.log(">> webpack isLegacy=" + isLegacy); + const presets = [ + ["@babel/preset-env", { + "useBuiltIns": "usage", + "corejs": 3, + "targets": { + "browsers": isLegacy ? ["defaults"] : [ + "last 2 Chrome versions", + "last 2 Safari versions", + "last 2 iOS versions", + "last 2 Firefox versions", + "last 2 Edge versions"] + } + }], + "@babel/preset-typescript" + ]; + + return { + entry: isLegacy ? [ + path.resolve(__dirname, 'node_modules/@webcomponents/custom-elements'), + path.resolve(__dirname, 'node_modules/@webcomponents/template'), + path.resolve(__dirname, 'src') + ] : path.resolve(__dirname, 'src'), + devtool: isProd ? false : 'source-map', + output: { + filename: isProd ? '[fullhash].bundle.js' : '[fullhash].bundle.js', + globalObject: 'this', + path: path.resolve(__dirname, 'dist'), + }, + + resolve: { + mainFields: ['esm2015', 'module', 'main'], + extensions: ['.ts', '.js', '.json'], + plugins: [new TsconfigPathsPlugin({ + configFile: './tsconfig.json', + extensions: ['.ts', '.js'], + mainFields: ['esm2015', 'module', 'main'] + })] + }, + + module: { + rules: [ + { test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }, + { test: /\.(csv|tsv)$/, use: ['csv-loader'] }, + { test: /\.xml$/, use: ['xml-loader'] }, + { test: /\.css$/, sideEffects: true, use: ['style-loader', 'css-loader'] }, + { + test: /worker\.(ts|js)$/, + use: [ + { loader: 'worker-loader' }, + { + loader: 'babel-loader', options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-transform-class-static-block", + "@babel/plugin-transform-class-properties", + "@babel/plugin-transform-runtime" + ] + } + } + ] + }, + { + test: /\.(ts|js)$/, loader: 'babel-loader', + options: { + "compact": isProd ? true : false, + "presets": presets, + "plugins": [ + "@babel/plugin-transform-class-static-block", + "@babel/plugin-transform-class-properties", + "@babel/plugin-transform-runtime" + ] + }, + exclude: + function (modulePath) { + return /node_modules/.test(modulePath) && + !/igniteui-webcomponents/.test(modulePath) && + !/lit-html/.test(modulePath); + } + }], + }, + + plugins: [ + new webpack.DefinePlugin({ + 'process.env.NODE_ENV': JSON.stringify(nodeEnv) + }), + new HtmlWebpackPlugin({ + title: 'for-cs', + template: 'index.html' + }), + new ForkTsCheckerWebpackPlugin() + ] + }; +};