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

345
2
08-17-2020 08:13 AM
BorisLutskovsky
New Contributor II

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>
0 Kudos
2 Replies
AnneFitz
Esri Contributor

Hi Boris,

Thanks for your feedback! This bug will be fixed in the 4.17 release. If you want to test it out before then, you can use the /next version of our API - this is our development branch that is updated weekly. 

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

Thanks,

Anne

BorisLutskovsky
New Contributor II

It looks like the same issue is also happening in the Legend widget, but I'm assuming that's using the same preview method, and would be resolved at the same time.

0 Kudos