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 });
Solved! Go to Solution.
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,
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
});
I already sent a symbol but it does the same.
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
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>
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>
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>
>>
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.
Thaks so much by your help