Skip to content

Commit 506f0ef

Browse files
mddifilippo89mddifilippo89
authored
Merge pull request #908 from IgniteUI/mdd-azure-map
mdd-azure-map
2 parents 61c1b5d + 18c0fa4 commit 506f0ef

File tree

10 files changed

+612
-0
lines changed

10 files changed

+612
-0
lines changed

‎samples/maps/geo-map/display-azure-imagery/.eslintrc.js‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
2+
module.exports = {
3+
parser: "@typescript-eslint/parser", // Specifies the ESLint parser
4+
parserOptions: {
5+
ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
6+
sourceType: "module", // Allows for the use of imports
7+
ecmaFeatures: {
8+
jsx: true // Allows for the parsing of JSX
9+
}
10+
},
11+
settings: {
12+
react: {
13+
version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
14+
}
15+
},
16+
extends: [
17+
"eslint:recommended",
18+
"plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
19+
"plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
20+
],
21+
rules: {
22+
// Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
23+
"default-case": "off",
24+
"no-undef": "off",
25+
"no-unused-vars": "off",
26+
"no-extend-native": "off",
27+
"no-throw-literal": "off",
28+
"no-useless-concat": "off",
29+
"no-mixed-operators": "off",
30+
"no-prototype-builtins": "off",
31+
"prefer-const": "off",
32+
"prefer-rest-params": "off",
33+
"jsx-a11y/alt-text": "off",
34+
"jsx-a11y/iframe-has-title": "off",
35+
"@typescript-eslint/no-unused-vars": "off",
36+
"@typescript-eslint/no-explicit-any": "off",
37+
"@typescript-eslint/no-inferrable-types": "off",
38+
"@typescript-eslint/no-useless-constructor": "off",
39+
"@typescript-eslint/no-use-before-define": "off",
40+
"@typescript-eslint/no-non-null-assertion": "off",
41+
"@typescript-eslint/interface-name-prefix": "off",
42+
"@typescript-eslint/prefer-namespace-keyword": "off",
43+
"@typescript-eslint/explicit-function-return-type": "off",
44+
"@typescript-eslint/explicit-module-boundary-types": "off"
45+
},
46+
"overrides": [
47+
{
48+
"files": ["*.ts", "*.tsx"],
49+
"rules": {
50+
"default-case": "off",
51+
"no-undef": "off",
52+
"no-unused-vars": "off",
53+
"no-extend-native": "off",
54+
"no-throw-literal": "off",
55+
"no-useless-concat": "off",
56+
"no-mixed-operators": "off",
57+
"no-prototype-builtins": "off",
58+
"prefer-const": "off",
59+
"prefer-rest-params": "off",
60+
"jsx-a11y/alt-text": "off",
61+
"jsx-a11y/iframe-has-title": "off",
62+
"@typescript-eslint/no-unused-vars": "off",
63+
"@typescript-eslint/no-explicit-any": "off",
64+
"@typescript-eslint/no-inferrable-types": "off",
65+
"@typescript-eslint/no-useless-constructor": "off",
66+
"@typescript-eslint/no-use-before-define": "off",
67+
"@typescript-eslint/no-non-null-assertion": "off",
68+
"@typescript-eslint/interface-name-prefix": "off",
69+
"@typescript-eslint/prefer-namespace-keyword": "off",
70+
"@typescript-eslint/explicit-function-return-type": "off",
71+
"@typescript-eslint/explicit-module-boundary-types": "off"
72+
}
73+
}
74+
]
75+
};

‎samples/maps/geo-map/display-azure-imagery/README.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
2+
<!-- https://github.com/IgniteUI/igniteui-react-examples/tree/vnext/templates/sample/ReadMe.md -->
3+
4+
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.
5+
6+
7+
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
8+
<body>
9+
<a target="_blank" href="https://www.infragistics.com/products/ignite-ui-react/react/components/general-getting-started.html" rel="noopener noreferrer">
10+
<img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
11+
</a>
12+
<a target="_blank" href="./src/index.tsx" rel="noopener noreferrer">
13+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
14+
</a>
15+
<a target="_blank" href="https://www.infragistics.com/react-demos/samples/maps/geo-map/display-azure-imagery" rel="noopener noreferrer">
16+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
17+
</a>
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-react-examples/tree/master/samples/maps/geo-map/display-azure-imagery?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/index.tsx" rel="noopener noreferrer">
19+
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
20+
</a>
21+
</body>
22+
</html>
23+
24+
## Branches
25+
26+
> **_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.
27+
28+
## Instructions
29+
30+
Follow these instructions to run this example:
31+
32+
33+
```
34+
git clone https://github.com/IgniteUI/igniteui-react-examples.git
35+
git checkout master
36+
cd ./igniteui-react-examples
37+
cd ./samples/maps/geo-map/display-azure-imagery
38+
```
39+
40+
open above folder in VS Code or type:
41+
```
42+
code .
43+
```
44+
45+
In terminal window, run:
46+
```
47+
npm install --legacy-peer-deps
48+
npm run-script start
49+
```
50+
51+
Then open http://localhost:4200/ in your browser
52+
53+
54+
## Learn More
55+
56+
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).

‎samples/maps/geo-map/display-azure-imagery/package.json‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
{
2+
"name": "react-geographic-map-display-imagery-azure",
3+
"description": "This project provides example of Geographic Map Display Imagery Azure using Infragistics React components",
4+
"author": "Infragistics",
5+
"homepage": ".",
6+
"version": "1.4.0",
7+
"private": true,
8+
"scripts": {
9+
"start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
10+
"build": "react-scripts --max_old_space_size=10240 build ",
11+
"test": "react-scripts test --env=jsdom",
12+
"eject": "react-scripts eject"
13+
},
14+
"dependencies": {
15+
"igniteui-react": "^19.2.0",
16+
"igniteui-react-charts": "^19.0.2-beta.2",
17+
"igniteui-react-core": "^19.0.2-beta.2",
18+
"igniteui-react-maps": "^19.0.2-beta.2",
19+
"react": "^18.2.0",
20+
"react-dom": "^18.2.0",
21+
"react-scripts": "^5.0.1",
22+
"tslib": "^2.4.0"
23+
},
24+
"devDependencies": {
25+
"@types/jest": "^29.2.0",
26+
"@types/node": "^18.11.7",
27+
"@types/react": "^18.0.24",
28+
"@types/react-dom": "^18.0.8",
29+
"react-app-rewired": "^2.2.1",
30+
"typescript": "^4.8.4",
31+
"worker-loader": "^3.0.8"
32+
},
33+
"browserslist": [
34+
">0.2%",
35+
"not dead",
36+
"not ie <= 11",
37+
"not op_mini all"
38+
]
39+
}

‎samples/maps/geo-map/display-azure-imagery/public/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>MapDisplayImageryAzureTiles</title>
5+
<link href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<div id="root"></div>
9+
</body>
10+
</html>

‎samples/maps/geo-map/display-azure-imagery/sandbox.config.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"infiniteLoopProtection": false,
3+
"hardReloadOnChange": false,
4+
"view": "browser"
5+
}

‎samples/maps/geo-map/display-azure-imagery/src/MapUtils.ts‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import { IgrGeographicMap } from 'igniteui-react-maps';
2+
3+
export enum MapRegion {
4+
Caribbean = "Caribbean",
5+
UnitedStates = "United States",
6+
UnitedKingdom = "United Kingdom",
7+
European = "European",
8+
SouthAfrica = "South Africa",
9+
Poland = "Poland",
10+
Australia = "Australia",
11+
Japan = "Japan",
12+
Uruguay = "Uruguay",
13+
Egypt = "Egypt",
14+
Hawaii = "Hawaii",
15+
}
16+
17+
export class MapUtils {
18+
19+
public static navigateTo(geoMap: IgrGeographicMap, name: MapRegion): void {
20+
21+
const geoRect = this.getRegions()[name];
22+
// console.log("MapUtils " + name) ;
23+
geoMap.zoomToGeographic(geoRect);
24+
}
25+
26+
public static toPixel(num: number): string {
27+
const s = Math.abs(num).toFixed(0);
28+
return s + " px";
29+
}
30+
31+
public static toLng(num: number): string {
32+
num = this.clamp(num, -180, 180);
33+
34+
let s = Math.abs(num).toFixed(1);
35+
if (num < 100) {
36+
s = " " + s
37+
}
38+
39+
if (num > 0) {
40+
return s + "°E";
41+
} else {
42+
return s + "°W";
43+
}
44+
}
45+
46+
public static toLat(num: number): string {
47+
num = this.clamp(num, -90, 90);
48+
49+
let s = Math.abs(num).toFixed(1);
50+
if (num < 100) {
51+
s = " " + s
52+
}
53+
54+
if (num > 0) {
55+
return s + "°N";
56+
} else {
57+
return s + "°S";
58+
}
59+
}
60+
61+
public static clamp(num: number, min: number, max: number): number {
62+
return Math.max(min, Math.min(max, num));
63+
}
64+
65+
public static pad(num: number, places?: number): string {
66+
places = places || 20;
67+
let s = num.toFixed(1).toString();
68+
while (s.length < places) {s = " " + s;}
69+
return s;
70+
}
71+
72+
public static getBingKey(): string {
73+
return "Avlo7qsH1zZZI0XNpTwZ4XwvUJmCbd-mczMeUXVAW9kYYOKdmBIVRe8aoO02Xctq";
74+
}
75+
76+
public static getRegions(): any {
77+
// create regions only once
78+
if (this.Regions === undefined) {
79+
this.createRegions();
80+
}
81+
return this.Regions;
82+
}
83+
84+
private static Regions: any;
85+
86+
private static addRegion(name: string, geoRect: any): void {
87+
geoRect.name = name;
88+
geoRect.longitude = geoRect.left + (geoRect.width / 2);
89+
geoRect.latitude = geoRect.top + (geoRect.height / 2);
90+
91+
this.Regions[name] = geoRect;
92+
}
93+
94+
private static createRegions(): void {
95+
this.Regions = {};
96+
this.addRegion(MapRegion.Australia, { left: 81.5, top: -52.0, width: 98.0, height: 56.0 });
97+
this.addRegion(MapRegion.Caribbean, { left: -92.9, top: 5.4, width: 35.1, height: 25.8 });
98+
this.addRegion(MapRegion.Egypt, { left: 19.3, top: 19.9, width: 19.3, height: 13.4 });
99+
this.addRegion(MapRegion.European, { left: -36.0, top:31.0, width: 98.0, height: 38.0 });
100+
this.addRegion(MapRegion.Japan, { left: 122.7, top: 29.4, width: 27.5, height: 17.0 });
101+
this.addRegion(MapRegion.Hawaii, { left: -161.2, top: 18.5, width: 6.6, height: 4.8 });
102+
this.addRegion(MapRegion.Poland, { left: 13.0, top: 48.0, width: 11.0, height: 9.0 });
103+
this.addRegion(MapRegion.SouthAfrica, { left: 9.0, top: -37.1, width: 26.0, height: 17.8 });
104+
this.addRegion(MapRegion.UnitedStates, { left: -134.5, top: 16.0, width: 70.0, height: 37.0 });
105+
this.addRegion(MapRegion.UnitedKingdom, { left: -15.0, top: 49.5, width: 22.5, height: 8.0 });
106+
this.addRegion(MapRegion.Uruguay, { left: -62.1, top: -35.7, width: 10.6, height: 7.0 });
107+
}
108+
109+
}

‎samples/maps/geo-map/display-azure-imagery/src/index.css‎

Whitespace-only changes.

0 commit comments

Comments
 (0)