UI: Add map widgets helps

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-data-layer-dialog.component.html

@@ -430,7 +430,7 @@
       <ng-container *ngTemplateOutlet="behavior"></ng-container>
     }
     <div class="tb-form-panel">
-      <div class="tb-form-panel-title">{{ 'widgets.maps.data-layer.groups' | translate }}</div>
+      <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'widgets.maps.data-layer.groups-hint' | translate }}">{{ 'widgets.maps.data-layer.groups' | translate }}</div>
       <tb-string-items-list class="tb-inline-chips"
                             editable
                             placeholder="{{'widgets.maps.data-layer.groups' | translate}}"
@@ -462,7 +462,9 @@
       </div>
       <div class="tb-form-row">
         <mat-slide-toggle class="mat-slide" formControlName="snappable">
-          {{ 'widgets.maps.data-layer.enable-snapping' | translate }}
+          <span tb-hint-tooltip-icon="{{ 'widgets.maps.data-layer.enable-snapping-hint' | translate }}">
+            {{ 'widgets.maps.data-layer.enable-snapping' | translate }}
+          </span>
         </mat-slide-toggle>
       </div>
     </div>

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/map/map-settings.component.html

@@ -36,7 +36,7 @@
   </div>
   <div class="tb-form-panel">
     <div class="flex flex-row items-center justify-between xs:flex-col xs:items-start xs:gap-3">
-      <div class="tb-form-panel-title">
+      <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'widgets.maps.overlays.overlays-hint' | translate }}">
         {{ 'widgets.maps.overlays.overlays' | translate }}
       </div>
       <tb-toggle-select [(ngModel)]="dataLayerMode"
@@ -70,7 +70,7 @@
                         [mapType]="mapSettingsFormGroup.get('mapType').value"></tb-map-data-layers>
   </div>
   <div class="tb-form-panel">
-    <div class="tb-form-panel-title">
+    <div class="tb-form-panel-title" tb-hint-tooltip-icon="{{ 'widgets.maps.data-layer.additional-datasources-hint' | translate }}">
       {{ 'widgets.maps.data-layer.additional-datasources' | translate }}
     </div>
     <tb-map-data-sources formControlName="additionalDataSources"

ui-ngx/src/assets/help/en_US/widget/action/custom_additional_params.md

@@ -31,7 +31,28 @@ An optional key/value object holding additional entity parameters depending on w
             presenting <code>formattedTs</code> (a string value of formatted timestamp) and <br> timeseries values for each column declared in widget datasource configuration.
       </li>
     </ul>
-  </li>   
+  </li>
+  <li>Map widgets - <b>additionalParams</b>: <code><a href="https://github.com/thingsboard/thingsboard/blob/b881f1c2985399f9665e033e2479549e97da1f36/ui-ngx/src/app/shared/models/widget.models.ts#L513" target="_blank">FormattedData</a></code>:
+    <ul>
+      <li><b>additionalParams:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/b881f1c2985399f9665e033e2479549e97da1f36/ui-ngx/src/app/shared/models/widget.models.ts#L513" target="_blank">FormattedData</a></code> - An object associated with a data layer (markers, polygons, circles) or with a specific data point of a route (for trips data layers).<br/>
+          It contains basic entity properties (ex. <code>entityId</code>, <code>entityName</code>) and provides access to additional attributes and timeseries defined in datasource of the data layer configuration.
+      </li>
+    </ul>
+  </li>
+  <li>Map widgets (Action type: <i>Place map item</i>) - <b>additionalParams</b>: <code>{coordinates: Coordinates; layer: <a href="https://leafletjs.com/reference.html#layer" target="_blank">L.Layer</a>}</code>:
+    <ul>
+      <li><b>coordinates:</b> <code>Coordinates</code> - Represents geographical coordinates of the placed map item. The actual format of this parameter depends on the type of the selected map item:
+        <ul>
+          <li><b>Marker:</b> <code>{x: number; y: number}</code>, where <code>x</code> represents latitude, and <code>y</code> represents longitude.</li>
+          <li><b>Polygon, Rectangle:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/61254a68507c6def8c055b7b3ae70413c456a4ac/ui-ngx/src/app/shared/models/widget/maps/map.models.ts#L1099" target="_blank">TbPolygonRawCoordinates</a></code> contains an array of points defining the shape boundaries.</li>
+          <li><b>Circle:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/61254a68507c6def8c055b7b3ae70413c456a4ac/ui-ngx/src/app/shared/models/widget/maps/map.models.ts#L1104" target="_blank">TbCircleData</a></code> contains center coordinates and radius information.</li>
+        </ul>
+        Note: The coordinates will be automatically converted according to the selected map type.
+      </li>
+      <li><b>layer:</b> <code><a href="https://leafletjs.com/reference.html#layer" target="_blank">L.Layer</a></code> - The Leaflet map layer instance (e.g., marker, polygon, circle) associated with the placed map item. This object provides access to layer properties and methods defined in Leaflet's API.
+      </li>
+    </ul>
+  </li>
   <li>Entities hierarchy widget (<i>On node selected</i>) - <b>additionalParams:</b> <code>{ nodeCtx: <a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a> }</code>:
     <ul>
       <li><b>nodeCtx:</b> <code><a href="https://github.com/thingsboard/thingsboard/blob/e264f7b8ddff05bda85c4833bf497f47f447496e/ui-ngx/src/app/modules/home/components/widget/lib/entities-hierarchy-widget.models.ts#L35" target="_blank">HierarchyNodeContext</a></code> - An 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -7976,6 +7976,7 @@
             },
             "overlays": {
                 "overlays": "Overlays",
+                "overlays-hint": "Configure datasources, appearance, behavior, editing options, and grouping for map entities",
                 "trips": "Trips",
                 "markers": "Markers",
                 "polygons": "Polygons",
@@ -7985,6 +7986,7 @@
                 "source": "Source",
                 "additional-data-keys": "Additional data keys",
                 "additional-datasources": "Additional datasources",
+                "additional-datasources-hint": "Datasource for accessing attributes or telemetry from entities not displayed on the map, usable in map overlay functions.",
                 "data-keys": "Data keys",
                 "add-datasource": "Add datasource",
                 "no-datasources": "No datasources configured",
@@ -7993,6 +7995,7 @@
                 "on-click": "On click",
                 "on-click-hint": "Action invoked when user clicks on the map item.",
                 "groups": "Groups",
+                "groups-hint": "List of group names assigned to this datasource. Used to toggle visibility of datasource items on the map.",
                 "color": "Color",
                 "fill-color": "Fill color",
                 "stroke": "Stroke",
@@ -8030,6 +8033,7 @@
                 "edit-instruments": "Instruments",
                 "persist-location-attribute-scope": "Scope of the attribute to persist location",
                 "enable-snapping": "Enable snapping to other vertices for precision drawing",
+                "enable-snapping-hint": "Automatically aligns new points with existing shapes to make drawing easier and more accurate.",
                 "drag-drop-mode": "Drag-drop mode",
                 "trip": {
                     "no-trips": "No trips configured",