AnsweredAssumed Answered

JS API 4.16 bug - symbolUtils.renderPreviewHTML not working for fill symbols

Question asked by borislutskovsky on Aug 17, 2020
Latest reply on Aug 19, 2020 by borislutskovsky

I'm evaluating upgrading an existing application from 4.15 to 4.16, and we discovered a bug in the symbolUtils.renderPreviewHTML when the symbol is a fill symbol, and the fill style is not "solid" - the image URL for the preview is "https://symbols/patterns/{style}.png", which fails to resolve and logs errors to the console.

 

here is a simple HTML page that will demonstrate this error:

 

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Symbol Preview not working</title>
  <style>
    htmlbody {
      padding0;
      margin0;
      height100%;
      width100%;
    }

    #viewDiv {
      height50%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/css/main.css">
  <script src="https://js.arcgis.com/4.16/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/symbols/support/symbolUtils",
      "esri/symbols/Symbol"
    ], function(MapMapViewsymbolUtilsSymbol) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.71511,34.09042],
        zoom: 11
      });

 

      var symbolDefinition = {
        color: "#9814F0",
        outline: {color: "#23F01A"style: "solid"width: 1},
        style: "diagonal-cross",
        type: "simple-fill"
      };

      var s = new Symbol(symbolDefinition);

      symbolUtils.renderPreviewHTML(s, {
        node: document.getElementById("symbolPreviewDiv"),
        size: s.size ? s.size : 12
      });

    });
  </script>
</head>
<body>
  <div id="viewDiv"></div>
  <div id="symbolPreviewDiv"></div>
</body>
</html>

Outcomes