@@ -18,20 +18,25 @@
-
-
+
+
+
+

+

+
+
\ No newline at end of file
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.scss b/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
index 269aa8c41..0b1ef3bb9 100644
--- a/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.scss
@@ -16,3 +16,11 @@
margin-right: 8px;
}
}
+
+.hidden {
+ display: none;
+}
+
+.show {
+ display: inline;
+}
\ No newline at end of file
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.component.ts b/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
index 118b9daa3..e9da18b34 100644
--- a/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.component.ts
@@ -1,8 +1,7 @@
import { AfterViewInit, Component, ViewChild } from "@angular/core";
-import { AzureMapsImageryStyle } from "igniteui-angular-maps";
-import { IgxAzureMapsMapImagery } from "igniteui-angular-maps";
+import { AzureMapsImageryStyle, GeographicMapImagery, IgxGeographicMapImagery } from "igniteui-angular-maps";
+import { IgxAzureMapsImagery } from "igniteui-angular-maps";
import { IgxGeographicMapComponent } from "igniteui-angular-maps";
-import { MapUtility } from "./MapUtility";
import { IgxDialogComponent } from "igniteui-angular";
@Component({
@@ -19,29 +18,41 @@ export class AppComponent implements AfterViewInit {
@ViewChild("map2", { static: true })
public map2: IgxGeographicMapComponent;
public apiKey: string;
+ @ViewChild("form", { static: true })
public form!: IgxDialogComponent;
+ showMap = false; // Controls visibility of maps
+ showImages = true; // Controls visibility of images
+
public applyApiKey(key: string) {
if (!key) return;
this.apiKey = key;
-
- const azureImagery = new IgxAzureMapsMapImagery();
- azureImagery.apiKey = key;
- azureImagery.imageryStyle = AzureMapsImageryStyle.Imagery;
- this.map.backgroundContent = azureImagery;
-
- const azureImagery2 = new IgxAzureMapsMapImagery();
- azureImagery2.apiKey = key;
- azureImagery2.imageryStyle = AzureMapsImageryStyle.Road;
- this.map2.backgroundContent = azureImagery2;
+
+ // Wait for the next tick to ensure the map is in the DOM
+ setTimeout(() => {
+ if (this.map && this.map2) {
+ const azureImagery = new IgxAzureMapsImagery();
+ azureImagery.apiKey = this.apiKey;
+ azureImagery.imageryStyle = AzureMapsImageryStyle.Satellite;
+ this.map.backgroundContent = azureImagery;
+
+ const azureImagery2 = new IgxAzureMapsImagery();
+ azureImagery2.apiKey = this.apiKey;
+ azureImagery2.imageryStyle = AzureMapsImageryStyle.Road;
+ this.map2.backgroundContent = azureImagery2;
+ }
+ });
}
constructor() {
}
public ngAfterViewInit(): void {
+
+
setTimeout(() => {
if (this.form) {
+
this.form.open();
}
});
diff --git a/samples/maps/geo-map/display-azure-imagery/src/app.module.ts b/samples/maps/geo-map/display-azure-imagery/src/app.module.ts
index 4417feab4..00c54f7a7 100644
--- a/samples/maps/geo-map/display-azure-imagery/src/app.module.ts
+++ b/samples/maps/geo-map/display-azure-imagery/src/app.module.ts
@@ -4,7 +4,7 @@ import { CommonModule } from "@angular/common";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
-import { IgxAzureMapsMapImageryModule, IgxGeographicMapModule } from "igniteui-angular-maps";
+import { IgxAzureMapsImageryModule, IgxGeographicMapModule } from "igniteui-angular-maps";
import { IgxDataChartInteractivityModule } from "igniteui-angular-charts";
import { IgxDialogModule, IgxIconModule, IgxInputGroupModule } from "igniteui-angular";
@@ -20,7 +20,7 @@ import { IgxDialogModule, IgxIconModule, IgxInputGroupModule } from "igniteui-an
CommonModule,
FormsModule,
IgxGeographicMapModule,
- IgxAzureMapsMapImageryModule,
+ IgxAzureMapsImageryModule,
IgxDataChartInteractivityModule,
IgxDialogModule,
IgxInputGroupModule,
diff --git a/samples/maps/geo-map/display-azure-imagery/src/assets/azure_road.png b/samples/maps/geo-map/display-azure-imagery/src/assets/azure_road.png
new file mode 100644
index 000000000..8c3491233
Binary files /dev/null and b/samples/maps/geo-map/display-azure-imagery/src/assets/azure_road.png differ
diff --git a/samples/maps/geo-map/display-azure-imagery/src/assets/azure_satellite.png b/samples/maps/geo-map/display-azure-imagery/src/assets/azure_satellite.png
new file mode 100644
index 000000000..862289286
Binary files /dev/null and b/samples/maps/geo-map/display-azure-imagery/src/assets/azure_satellite.png differ
diff --git a/samples/maps/geo-map/display-azure-imagery/src/styles.scss b/samples/maps/geo-map/display-azure-imagery/src/styles.scss
index 5fe513cfa..2e83a2c83 100644
--- a/samples/maps/geo-map/display-azure-imagery/src/styles.scss
+++ b/samples/maps/geo-map/display-azure-imagery/src/styles.scss
@@ -1,4 +1,6 @@
@use 'igniteui-angular/theming' as *;
+@forward 'igniteui-angular/theming';
+
$palette: $light-material-palette;
$schema: $light-material-schema;
diff --git a/samples/maps/geo-map/display-bing-imagery/package.json b/samples/maps/geo-map/display-bing-imagery/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/display-bing-imagery/package.json
+++ b/samples/maps/geo-map/display-bing-imagery/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/display-esri-imagery/package.json b/samples/maps/geo-map/display-esri-imagery/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/display-esri-imagery/package.json
+++ b/samples/maps/geo-map/display-esri-imagery/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/display-heat-imagery/package.json b/samples/maps/geo-map/display-heat-imagery/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/display-heat-imagery/package.json
+++ b/samples/maps/geo-map/display-heat-imagery/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/display-osm-imagery/package.json b/samples/maps/geo-map/display-osm-imagery/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/display-osm-imagery/package.json
+++ b/samples/maps/geo-map/display-osm-imagery/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/marker-layouts/package.json b/samples/maps/geo-map/marker-layouts/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/marker-layouts/package.json
+++ b/samples/maps/geo-map/marker-layouts/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/marker-template/package.json b/samples/maps/geo-map/marker-template/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/marker-template/package.json
+++ b/samples/maps/geo-map/marker-template/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/marker-type/package.json b/samples/maps/geo-map/marker-type/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/marker-type/package.json
+++ b/samples/maps/geo-map/marker-type/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/navigation/package.json b/samples/maps/geo-map/navigation/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/navigation/package.json
+++ b/samples/maps/geo-map/navigation/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/overview/package.json b/samples/maps/geo-map/overview/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/overview/package.json
+++ b/samples/maps/geo-map/overview/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/shape-styling/package.json b/samples/maps/geo-map/shape-styling/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/shape-styling/package.json
+++ b/samples/maps/geo-map/shape-styling/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/triangulating-data/package.json b/samples/maps/geo-map/triangulating-data/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/triangulating-data/package.json
+++ b/samples/maps/geo-map/triangulating-data/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/type-scatter-area-series/package.json b/samples/maps/geo-map/type-scatter-area-series/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/type-scatter-area-series/package.json
+++ b/samples/maps/geo-map/type-scatter-area-series/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/type-scatter-bubble-series/package.json b/samples/maps/geo-map/type-scatter-bubble-series/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/type-scatter-bubble-series/package.json
+++ b/samples/maps/geo-map/type-scatter-bubble-series/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/type-scatter-contour-series/package.json b/samples/maps/geo-map/type-scatter-contour-series/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/type-scatter-contour-series/package.json
+++ b/samples/maps/geo-map/type-scatter-contour-series/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/type-scatter-density-series/package.json b/samples/maps/geo-map/type-scatter-density-series/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/type-scatter-density-series/package.json
+++ b/samples/maps/geo-map/type-scatter-density-series/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/type-scatter-symbol-series/package.json b/samples/maps/geo-map/type-scatter-symbol-series/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/type-scatter-symbol-series/package.json
+++ b/samples/maps/geo-map/type-scatter-symbol-series/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/type-shape-polygon-series/package.json b/samples/maps/geo-map/type-shape-polygon-series/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/type-shape-polygon-series/package.json
+++ b/samples/maps/geo-map/type-shape-polygon-series/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",
diff --git a/samples/maps/geo-map/type-shape-polyline-series/package.json b/samples/maps/geo-map/type-shape-polyline-series/package.json
index 4df76c62f..89eda2017 100644
--- a/samples/maps/geo-map/type-shape-polyline-series/package.json
+++ b/samples/maps/geo-map/type-shape-polyline-series/package.json
@@ -18,9 +18,9 @@
"classlist.js": "1.1.20150312",
"core-js": "3.21.0",
"hammerjs": "2.0.8",
- "igniteui-angular-charts": "20.0.1-beta.0",
- "igniteui-angular-core": "20.0.1-beta.0",
- "igniteui-angular-maps": "20.0.1-beta.0",
+ "igniteui-angular-charts": "20.0.2-beta.3",
+ "igniteui-angular-core": "20.0.2-beta.3",
+ "igniteui-angular-maps": "20.0.2-beta.3",
"intl": "1.2.5",
"jszip": "3.8.0",
"rxjs": "7.8.1",