UI: Updated shape image fill image function example. Improved this example popover style

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

@@ -46,7 +46,8 @@
                   [functionArgs]="['data', 'images', 'dsData']"
                   [globalVariables]="functionScopeVariables"
                   functionTitle="{{ 'widgets.maps.data-layer.marker.marker-image-function' | translate }}"
-                  helpId="widget/lib/map/marker_image_fn">
+                  helpId="widget/lib/map/marker_image_fn"
+                  [helpPopupStyle]="{width: '900px'}">
       </tb-js-func>
       <tb-multiple-gallery-image-input label="{{ 'widgets.maps.data-layer.marker.marker-images' | translate }}"
                                        formControlName="images">

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

@@ -58,7 +58,8 @@
                   [functionArgs]="['data', 'images', 'dsData']"
                   [globalVariables]="functionScopeVariables"
                   functionTitle="{{ 'widgets.maps.data-layer.shape.fill-image-function' | translate }}"
-                  helpId="widget/lib/map/shape_fill_image_fn">
+                  helpId="widget/lib/map/shape_fill_image_fn"
+                  [helpPopupStyle]="{width: '900px'}">
       </tb-js-func>
       <tb-multiple-gallery-image-input label="{{ 'widgets.maps.data-layer.shape.fill-images' | translate }}"
                                        formControlName="images">

ui-ngx/src/assets/help/en_US/widget/lib/map/shape_fill_image_fn.md

@@ -39,12 +39,33 @@ In case no data is returned, default fill image will be used.
 
 <ul>
 <li>
-TODO:
+Calculate image URL and rotation angle depending on <code>windSpeed</code> and <code>windDirection</code> telemetry values for a <code>weather station</code> device type.<br/>
+Let's assume 3 images are defined in the Shape fill images section. Each image corresponds to a particular wind speed level: low (e.g., <5 m/s), medium (e.g., 5-15 m/s), and high (e.g., >15 m/s).
 </li>
 </ul>
 
 ```javascript
-TODO:
+const type = data.Type;
+if (type === 'weather station') {
+  const result = {
+    url: images[0],
+    opacity: 0.8,
+    angle: 0
+  };
+  const windSpeed = data.windSpeed;
+  const windDirection = data.windDirection;
+  if (typeof windSpeed !== 'undefined' && typeof windDirection !== 'undefined') {
+    if (windSpeed < 5) {
+      result.url = images[0];
+    } else if (windSpeed < 15) {
+      result.url = images[1];
+    } else {
+      result.url = images[2];
+    }
+    result.angle = windDirection;
+  }
+  return result;
+}
 {:copy-code}
 ```