symbolPreview not working

Blanca_FlorHabana_Matamoros · ‎04-16-2018

I try to add the symbols obtained from the map layers in a div, I'm using symbolPreview does not give any errors but does not add the symbols in the div.
What is wrong?

var symbol = drawingInfo.renderer; symbolPreview.renderPreviewHTML(symbol, { node: document.getElementById(nombreImg), size: 12, opacity: 1 });

RobertScheitlin__GISP · ‎04-17-2018

Blanca,

So if you are using esriRequest to get the drawingInfo then it is just a json string and not an actual esri renderer or symbol class. So you would use:

require(["esri/symbols/SimpleFillSymbol"], function(SimpleFillSymbol) {
  var sym = SimpleFillSymbol.fromJSON(‍drawingInfo.renderer.symbol);‍
  symbolPreview.renderPreviewHTML(sym, {
    node: document.getElementById("symDiv"),
    size: 50
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

View solution in original post

RobertScheitlin__GISP · ‎04-16-2018

Blanca,

You are sending a Renderer class into the symbolPreview. The symbolPreview class is expecting a Symbol class not a Renderer.

// symbol from SimpleRenderer;
var symbol = layer.renderer.symbol.clone();

symbolPreview.renderPreviewHTML(symbol, {
  node: document.getElementById("preview"),
  size: 8
});‍‍‍‍‍‍‍

Blanca_FlorHabana_Matamoros · ‎04-16-2018

I already sent a symbol but it does the same.

Blanca_FlorHabana_Matamoros · ‎04-16-2018

var symbol = drawingInfo.renderer.symbol.clone();
console.log("dentro del symbol", symbol);
var s = new Symbol({
type: symbol.type,
color: symbol.color,
size: 12,
outline: {
color: symbol.outline.color,
type: symbol.outline.type,
width: symbol.outline.width
}
});

symbolPreview.renderPreviewHTML(symbol, {
node: document.getElementById(div),
size: 8
});

I sent the symbol of this way but I don't sure if that is correct

RobertScheitlin__GISP · ‎04-16-2018

Blanca,

Here is a full working sample, to help you understand better.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Legend widget - 4.6</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    #symDiv {
      position: absolute;
      z-index: 99;
      top: 10px;
      right: 10px;
      width: 50px;
      height: 50px;
      background-color: white;
    }
  </style>

  <script src="https://js.arcgis.com/4.6/"></script>
  <script>
    require([
        "esri/views/MapView",
        "esri/widgets/Legend",
        "esri/WebMap",
        "esri/symbols/support/symbolPreview",
        "dojo/domReady!"
      ],
      function(
        MapView, Legend, WebMap, symbolPreview
      ) {

        var webmap = new WebMap({
          portalItem: { // autocasts as new PortalItem()
            id: "4abe6a830b8f466dacf8abfde567a781"
          }
        });

        var view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(function() {
          // get the first layer in the collection of operational layers in the WebMap
          // when the resources in the MapView have loaded.
          var featureLayer = webmap.layers.getItemAt(0);

          var legend = new Legend({
            view: view,
            layerInfos: [{
              layer: featureLayer,
              title: "NY Educational Attainment"
            }]
          });

          // Add widget to the bottom right corner of the view
          view.ui.add(legend, "bottom-right");
          
          var symbol = featureLayer.renderer.uniqueValueInfos[3].symbol.clone();
          symbolPreview.renderPreviewHTML(symbol, {
            node: document.getElementById("symDiv"),
            size: 50
          });
        });
      });
  </script>
</head>

<body class="calcite">
  <div id="viewDiv"></div>
  <div id="symDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Blanca_FlorHabana_Matamoros · ‎04-16-2018

I have a doubt, in your example you have the next line :

featureLayer.renderer.uniqueValueInfos[3].symbol.clone();

But, in the layers of my application the renderer is null and I get the

information with esriRequest and the renderer have this information

and when I try to add clone function I get the error "clone is not a

function"

Sorry if I ask a lot but I don't have experience working with the api

2018-04-16 14:48 GMT-05:00 Robert Scheitlin, GISP <geonet@esri.com>:

GeoNet <https://community.esri.com/?et=watches.email.thread>
Re: symbolPreview not working
reply from Robert Scheitlin, GISP
<https://community.esri.com/people/rscheitlin?et=watches.email.thread> in *ArcGIS
API for JavaScript* - View the full discussion
<https://community.esri.com/message/764423-re-symbolpreview-not-working?commentID=764423&et=watches.email.thread#comment-764423>

Blanca_FlorHabana_Matamoros · ‎04-16-2018

And thanks so much for yout quick response and help

2018-04-16 16:55 GMT-05:00 Blanca Flor Habana Matamoros <

flor.habana93@gmail.com>:

I have a doubt, in your example you have the next line :
featureLayer.renderer.uniqueValueInfos[3].symbol.clone();
But, in the layers of my application the renderer is null and I get the
information with esriRequest and the renderer have this information
and when I try to add clone function I get the error "clone is not a
function"
Sorry if I ask a lot but I don't have experience working with the api
2018-04-16 14:48 GMT-05:00 Robert Scheitlin, GISP <geonet@esri.com>:

>> GeoNet <https://community.esri.com/?et=watches.email.thread>

>> Re: symbolPreview not working

>>

>> reply from Robert Scheitlin, GISP

>> <https://community.esri.com/people/rscheitlin?et=watches.email.thread>

>> in ArcGIS API for JavaScript - View the full discussion

>> <https://community.esri.com/message/764423-re-symbolpreview-not-working?commentID=764423&et=watches.email.thread#comment-764423>

>>

RobertScheitlin__GISP · ‎04-17-2018

Blanca,

So if you are using esriRequest to get the drawingInfo then it is just a json string and not an actual esri renderer or symbol class. So you would use:

require(["esri/symbols/SimpleFillSymbol"], function(SimpleFillSymbol) {
  var sym = SimpleFillSymbol.fromJSON(‍drawingInfo.renderer.symbol);‍
  symbolPreview.renderPreviewHTML(sym, {
    node: document.getElementById("symDiv"),
    size: 50
  });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Blanca_FlorHabana_Matamoros · ‎04-17-2018

Thaks so much by your help