Add tooltip dimension

Author: AlexanderKovalenko

CS/AspNetCoreCustomItem/Data/Dashboards/countryInfo.xml

@@ -12,29 +12,31 @@
   </DataSources>
   <Items>
     <CustomItem ComponentName="customItemDashboardItem1" Name="Online Map" DataSource="excelDataSource1" CustomItemType="OnlineMap">
-      <CustomProperties>
         <Type>RoadMap</Type>
-      </CustomProperties>
       <InteractivityOptions MasterFilterMode="Single" />
       <DataItems>
         <Dimension DataMember="Latitude" DefaultId="DataItem0" />
         <Dimension DataMember="Longitude" DefaultId="DataItem1" />
+        <Dimension DataMember="Country" DefaultId="DataItem2" />
       </DataItems>
       <SliceTables>
         <SliceTable Name="SliceTable1">
           <Dimensions>
             <Dimension DefaultId="DataItem0" />
             <Dimension DefaultId="DataItem1" />
+            <Dimension DefaultId="DataItem2" />
           </Dimensions>
         </SliceTable>
       </SliceTables>
       <InteractivityTargets>
         <Dimension DefaultId="DataItem0" />
         <Dimension DefaultId="DataItem1" />
+        <Dimension DefaultId="DataItem2" />
       </InteractivityTargets>
       <CustomMetadata>
         <Latitude ItemType="Dimension" DefaultId="DataItem0" />
         <Longitude ItemType="Dimension" DefaultId="DataItem1" />
+        <Tooltip ItemType="Dimension" DefaultId="DataItem2" />
       </CustomMetadata>
     </CustomItem>
     <CustomItem ComponentName="customItemDashboardItem2" Name="Web Page" DataSource="excelDataSource1" CustomItemType="WebPage">

CS/AspNetCoreCustomItem/wwwroot/js/OnlineMapItem.js

@@ -36,6 +36,17 @@
             constraints: {
                 allowedTypes: ['Integer', 'Float', 'Double', 'Decimal']
             }
+        }, {
+            propertyName: 'Tooltip',
+            dataItemType: 'Dimension',
+            array: false,
+            enableInteractivity: true,
+            displayName: 'Tooltip',
+            emptyPlaceholder: 'Set Tooltip',
+            selectedPlaceholder: 'Configure Tooltip',
+            constraints: {
+                allowedTypes: ['Text']
+            }
         }],
         customProperties: [{
             ownerType: Model.CustomItem,
@@ -101,7 +112,12 @@
     OnlineMapItemViewer.prototype = Object.create(Dashboard.CustomItemViewer.prototype);
     OnlineMapItemViewer.prototype.constructor = OnlineMapItemViewer;
 
-    OnlineMapItemViewer.prototype._onClick = function (row) {
+    OnlineMapItemViewer.prototype._onClick = function (index, row) {
+        var markers = this.mapViewer.option('markers');
+        for (var i = 0; i < markers.length; i++) {
+            markers[i].tooltip.isShown = i == index;
+        }
+
         this.setMasterFilter(row);
         this._updateSelection();
     };
@@ -138,22 +154,32 @@
             showMarkers = mode === 'Markers' || mode === 'MarkersAndRoutes' || this.canMasterFilter(),
             showRoutes = mode === 'Routes' || mode === 'MarkersAndRoutes';
         if (this.getBindingValue('Latitude').length > 0 && this.getBindingValue('Longitude').length > 0) {
+            let index = 0;
             this.iterateData(row => {
                 var latitude = row.getValue('Latitude')[0];
                 var longitude = row.getValue('Longitude')[0];
+                var tooltip = row.getValue('Tooltip')[0];
+
+                let idx = index;
+
                 if (latitude && longitude) {
                     if (showMarkers) {
                         markers.push({
                             location: { lat: latitude, lng: longitude },
                             iconSrc: this.isSelected(row) ? "https://js.devexpress.com/Demos/RealtorApp/images/map-marker.png" : null,
-                            onClick: args => this._onClick(row),
+                            onClick: args => this._onClick(idx, row),
+                            tooltip: {
+                                text: tooltip
+                            },
                             tag: row
                         });
                     }
                     if (showRoutes) {
                         routes.push([latitude, longitude]);
                     }
                 }
+
+                index++;
             });
         }
         let autoAdjust = markers.length > 0 || routes.length > 0,
@@ -177,7 +203,7 @@
                 opacity: 0.5,
                 mode: '',
                 locations: routes
-            }] : []
+            }] : [],
         };
         if (changeExisting && this.mapViewer) {
             this.mapViewer.option(options);