Map: add Azure provider in demos (#28357)

Author: Zedwag

apps/demos/Demos/Map/Markers/Angular/app/app.component.html

@@ -1,5 +1,5 @@
 <dx-map
-  provider="bing"
+  provider="azure"
   [apiKey]="apiKey"
   [zoom]="11"
   [height]="440"

apps/demos/Demos/Map/Markers/Angular/app/app.component.ts

@@ -34,7 +34,7 @@ export class AppComponent {
   apiKey: APIKey = {};
 
   constructor(service: Service) {
-    this.apiKey.bing = 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC';
+    this.apiKey.azure = '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE';
 
     this.customMarkerUrl = this.mapMarkerUrl = service.getMarkerUrl();
     this.originalMarkers = this.markers = service.getMarkers();

apps/demos/Demos/Map/Markers/Angular/app/app.service.ts

@@ -13,6 +13,8 @@ export class Marker {
 }
 
 export type APIKey = {
+  azure?: string;
+  
   bing?: string;
 
   google?: string;

apps/demos/Demos/Map/Markers/React/App.tsx

@@ -7,7 +7,7 @@ import { markersData } from './data.ts';
 const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png';
 
 const apiKey = {
-  bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
+  azure: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE',
 };
 
 const App = () => {
@@ -36,7 +36,7 @@ const App = () => {
         controls={true}
         markerIconSrc={currentMarkerUrl}
         markers={currentMarkersData}
-        provider="bing"
+        provider="azure"
         apiKey={apiKey}
       ></Map>
       <div className="options">

apps/demos/Demos/Map/Markers/ReactJs/App.js

@@ -6,7 +6,7 @@ import { markersData } from './data.js';
 
 const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png';
 const apiKey = {
-  bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
+  azure: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE',
 };
 const App = () => {
   const [currentMarkersData, setCurrentMarkersData] = useState(markersData);
@@ -36,7 +36,7 @@ const App = () => {
         controls={true}
         markerIconSrc={currentMarkerUrl}
         markers={currentMarkersData}
-        provider="bing"
+        provider="azure"
         apiKey={apiKey}
       ></Map>
       <div className="options">

apps/demos/Demos/Map/Markers/Vue/App.vue

@@ -7,7 +7,7 @@
       v-model:markers="markers"
       v-model:marker-icon-src="markersIcon"
       width="100%"
-      provider="bing"
+      provider="azure"
       :api-key="apiKey"
     />
     <div class="options">
@@ -38,7 +38,7 @@ import { markersData } from './data.ts';
 const markerUrl = 'https://js.devexpress.com/Demos/WidgetsGallery/JSDemos/images/maps/map-marker.png';
 const markersIcon = ref(markerUrl);
 const apiKey = {
-  bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
+  azure: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE',
 };
 const markers = ref(markersData);
 function useCustomMarkers(data) {

apps/demos/Demos/Map/Markers/jQuery/index.js

@@ -24,10 +24,8 @@ $(() => {
   ];
 
   const mapWidget = $('#map').dxMap({
-    provider: 'bing',
-    apiKey: {
-      bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
-    },
+    provider: 'azure',
+    apiKey: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE',
     zoom: 11,
     height: 440,
     width: '100%',

apps/demos/Demos/Map/ProvidersAndTypes/Angular/app/app.component.html

@@ -4,14 +4,25 @@
   [zoom]="14"
   [height]="400"
   width="100%"
-  provider="bing"
+  [provider]="mapProviders[0].key"
   [apiKey]="apiKey"
   [type]="mapTypes[0].key"
 >
 </dx-map>
 
 <div class="options">
   <div class="caption">Options</div>
+  <div class="option">
+    <span>Map Provider</span>
+    <dx-select-box
+      [dataSource]="mapProviders"
+      displayExpr="name"
+      valueExpr="key"
+      [inputAttr]="{ 'aria-label': 'Map Provider' }"
+      [(value)]="map.provider"
+    >
+    </dx-select-box>
+  </div>
   <div class="option">
     <span>Map Type</span>
     <dx-select-box

apps/demos/Demos/Map/ProvidersAndTypes/Angular/app/app.component.ts

@@ -25,12 +25,18 @@ if (window && window.config.packageConfigPaths) {
 
 export class AppComponent {
   mapTypes: MapSetting[];
+  mapProviders: MapSetting[];
 
   apiKey: APIKey = {};
 
   constructor(service: Service) {
     this.mapTypes = service.getMapTypes();
-    this.apiKey.bing = 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC';
+    this.mapProviders = service.getMapProviders();
+    this.apiKey = {
+      azure: '6N8zuPkBsnfwniNAJkldM3cUgm3lXg3y9gkIKy59benICnnepK4DJQQJ99AIACYeBjFllM6LAAAgAZMPGFXE',
+      bing: 'Aq3LKP2BOmzWY47TZoT1YdieypN_rB6RY9FqBfx-MDCKjvvWBbT68R51xwbL-AqC',
+      google: 'AIzaSyBIw1-l1otL9v1bY-OR4p9w21l1VLu9L2k',
+    };
   }
 }
 

apps/demos/Demos/Map/ProvidersAndTypes/Angular/app/app.service.ts

@@ -7,6 +7,8 @@ export class MapSetting {
 }
 
 export type APIKey = {
+  azure?: string;
+
   bing?: string;
 
   google?: string;
@@ -25,9 +27,24 @@ const mapTypes: MapSetting[] = [{
   name: 'Hybrid Map',
 }];
 
+const mapProviders: MapSetting[] = [{
+  key: 'azure',
+  name: 'Azure',
+}, {
+  key: 'bing',
+  name: 'Bing',
+}, {
+  key: 'google',
+  name: 'Google',
+}];
+
 @Injectable()
 export class Service {
   getMapTypes(): MapSetting[] {
     return mapTypes;
   }
+
+  getMapProviders(): MapSetting[] {
+    return mapProviders;
+  }
 }