I am trying to use ArcGIS Maps SDK for JavaScript to display a preview of a symbol from the Mil2525C dictionary web style.
After some research I learned I would probably have to use symbolUtils.renderPreviewHTML to accomplish this, but I cant seem to figure it out.
I am trying to insert a preview of the symbol in the viewDiv into the preview div in the bottom right:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>MIL-STD-2525C</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/css/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#preview {
position: absolute;
left: 100px;
bottom: 100px;
width: 150px;
height: 150px;
border: 1px solid black;
background-color: white;
}
</style>
</head>
<body>
<script src="https://js.arcgis.com/4.28"></script>
<script>
//set up map container
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/renderers/DictionaryRenderer",
"esri/Graphic",
"esri/symbols/support/symbolUtils",
"esri/symbols/Symbol"
],
function (
Map,
MapView,
FeatureLayer,
DictionaryRenderer,
Graphic,
symbolUtils,
Symbol
) {
const map = new Map({
basemap: "gray-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 7,
center: [-65, 45]
});
var previewfeat = [
{geometry: {
type: "point", // autocasts as new Point()
x: -65,
y: 45
},
attributes: {
ObjectID: 1,
sidctest: 'SFG-UCE----D---'
}
}
];
let renderer1 = new DictionaryRenderer({
url: "https://www.arcgis.com/sharing/rest/content/items/64d5c3d58a924cd98587fd80f9ec4ef1",
fieldMap: {
sidc: "sidctest"
},
config: {
frame:"ON",
fill:"ON",
icon:"ON",
text:"ON",
colors:"LIGHT"
},
scaleExpression: "1.3"
});
const previewlyr = new FeatureLayer({
source: previewfeat,
renderer: renderer1,
objectIDField: "ObjectID",
fields: [
{name: "ObjectID",
alias: "ObjectID",
type: "oid"
},
{name: "sidctest",
alias: "sidctest",
type: "string"
}
],
spatialReference: 102100,
minScale: 0,
maxScale: 0
});
//var symbol = previewlyr.renderer.symbol.clone();
//symbolUtils.renderPreviewHTML(symbol, {
//node: document.getElementById("preview"),
//size: 20
//});
map.add(previewlyr);
});
</script>
<div id="viewDiv"></div>
<div id="preview"></div>
</body>
</html>
Thanks in advance for any advice offered.
