Update legend control version

- Update to the latest legend control version.
- Extend options sample to include new maxWidth option.

Author: rbrundritt

Samples/Controls/Legend control options/Legend control options.html

@@ -177,6 +177,12 @@
                 minimized: elm.checked
             });
         }
+
+        function updateMaxWidth(elm) {
+            legend.setOptions({
+                maxWidth: parseFloat(elm.value)
+            });
+        }
     </script>
     <style>
         .sidePanel {
@@ -206,7 +212,7 @@
             <tr title="The global title of the legend control.">
                 <td>Title:</td>
                 <td>
-                   <input type="text" oninput="setTitle(this)" title="Title" />
+                    <input type="text" oninput="setTitle(this)" title="Title" />
                 </td>
             </tr>
             <tr title="How multiple legends are laid out.">
@@ -215,7 +221,7 @@
                     <select onchange="setLayout(this)" title="Layout">
                         <option>accordion</option>
                         <option selected="selected">carousel</option>
-                        <option>list</option>                        
+                        <option>list</option>
                     </select>
                 </td>
             </tr>
@@ -246,6 +252,15 @@
                 <td>Container:</td>
                 <td><input type="checkbox" onclick="setContainerId(this)" title="Container" /> show in test area</td>
             </tr>
+            <tr title='Specifies the maximium width the legend control can expand to. If greater than the width of the map, the legend control will have a max width of the maps width minus 20 pixels.'>
+                <td>Max width:</td>
+                <td>
+                    <form oninput="maxWidth.value=MaxWidth.value">
+                        <input type="range" id="MaxWidth" value="1000" min="50" max="1000" step="50" oninput="updateMaxWidth(this)" />
+                        <output name="maxWidth" for="MaxWidth">1000</output>
+                    </form>
+                </td>
+            </tr>
         </table>
 
         <fieldset style="width:320px;margin-bottom:10px;">

Static/lib/azure-maps/azure-maps-layer-legend.js

@@ -1514,6 +1514,10 @@ MIT License
                 opt.layout = options.layout;
                 self._needsRebuild = true;
             }
+            if (options.maxWidth > 0 && opt.maxWidth !== options.maxWidth) {
+                opt.maxWidth = options.maxWidth;
+                self._adjustSize();
+            }
             if (options.showToggle !== undefined && opt.showToggle !== options.showToggle) {
                 opt.showToggle = options.showToggle;
                 if (!options.showToggle) {
@@ -1578,13 +1582,13 @@ MIT License
             var opt = self._baseOptions;
             var container = self._container;
             if (self._map) {
-                var maxWidth_1 = 'unset';
+                var maxWidth_1 = opt.maxWidth ? opt.maxWidth + 'px' : 'unset';
                 var maxHeight_1 = 'unset';
                 //When legend is displayed within the map, need to restrict the size of the legend content.
                 if (!opt.container) {
                     var rect = self._map.getCanvasContainer().getClientRects()[0];
-                    //Subtract 20 pixels to account for padding around controls in the map.
-                    maxWidth_1 = (rect.width - 20) + 'px';
+                    //Subtract 20 pixels to account for padding around controls in the map.               
+                    maxWidth_1 = Math.min(opt.maxWidth || 10000, rect.width - 20) + 'px';
                     var maxContainerHeight = rect.height - 20;
                     var cp = self._controlPosition;
                     if (cp && cp !== '' && cp !== 'non-fixed') {
@@ -1993,6 +1997,7 @@ MIT License
                         case 'container':
                         case 'layout':
                         case 'zoomBehavior':
+                        case 'maxWidth':
                             //@ts-ignore
                             opt[key] = val;
                             break;
@@ -2497,6 +2502,12 @@ MIT License
                 var textStyle = void 0;
                 var barWidth = void 0;
                 var barHeight = void 0;
+                //Ensure all stops have an offset value.
+                legendType.stops.forEach(function (item) {
+                    if (typeof item.offset !== 'number') {
+                        item.offset = 0;
+                    }
+                });
                 //Ensure stops are sorted by offset.
                 legendType.stops.sort(function (a, b) {
                     return a.offset - b.offset;
@@ -2721,6 +2732,7 @@ MIT License
                         case 'container':
                         case 'layout':
                         case 'zoomBehavior':
+                        case 'maxWidth':
                             //@ts-ignore
                             opt[key] = val;
                             break;