map shows selected region

src/js/index.js

@@ -25,6 +25,7 @@ class WaypointsData {
                 const lat = parseFloat(loc[0].trim())
                 const lon = parseFloat(loc[1].trim())
                 this.markersData.push({
+                    regionId: r_idx,
                     location: [lat, lon],
                     tooltip: {
                         text: point.name,
@@ -102,6 +103,22 @@ function initMap() {
     }).dxMap('instance');
 }
 
+function reInitMap(regionId) {
+    const mapWidget = $('#map').dxMap({
+        provider: 'bing',
+        apiKey: {
+            bing: 'AnpoY0kAA4Kk5A045nQxyVbrlkNTgOuMVBitLxN_iLnZdtONf21HxUTzXwNIebES',
+        },
+        zoom: 11,
+        height: 440,
+        width: 760,
+        controls: true,
+        markerIconSrc: markerUrl,
+        markers: waypoints.getMarkers().filter(p => p.regionId == regionId),
+        type: 'roadmap'
+    }).dxMap('instance');
+}
+
 // Пересоздание списка точек указанного региона, для выбора мест к посещению
 function rebuildRegionPointsList(regionId) {
     if (regionPointsWidget) {
@@ -148,6 +165,7 @@ function initRegionDropDown() {
         keyExpr: 'id',
         onItemClick(e) {
             rebuildRegionPointsList(e.itemData.id);
+            reInitMap(e.itemData.id);
             DevExpress.ui.notify(`${e.itemData.name}`, 'success', 600);
         },
         items: waypoints.getRegions(),