topic Re: Symbol object to image (svg) in ArcGIS JavaScript Maps SDK Questions

Symbol object to image (svg)

JosephRogan — Wed, 24 Feb 2016 23:24:32 GMT

I have a custom Legend widget which I made some time ago and have been using. It normally works by doing an esriRequest to get the Legend info for that layer.

What I've encountered though is some layers do not have this info, example: http://services.arcgis.com/P3ePLMYs2RVChkJx/ArcGIS/rest/services/World_UTM_Grid/FeatureServer/0

What I would like to do is use the Symbol object which I can get from the Renderer to create an image that I can use for the legend. I'm not particular on the format, but I've tried using the standard Legend widget with a layer like this and it creates an SVG path.

How does the default Legend widget do this? Symbol -> SVG path.

The markup for the service above would some create this:

Thanks in advance!

Re: Symbol object to image (svg)

JohnGrayson — Wed, 24 Feb 2016 23:48:01 GMT

Check out the sample here:

https://jscore.esri.com/javascript/jsapi/esri.symbols.jsonutils-amd.html#getshapedescriptors

Re: Symbol object to image (svg)

JosephRogan — Sat, 11 Dec 2021 08:18:05 GMT

Thanks for the quick reply! While I havn't fully implemented this yet into my widget, I was able to do a quick test with that sample server and it worked perfectly!

                
                var symbol = this.layers.layer.renderer.getSymbol();
                
                var testDiv = dojo.create("div", { id: "testDiv", style: "width:20px; height:20px; border: 0px solid black;" }, this.legendDiv);
                
                var mySurface = gfx.createSurface(dom.byId("testDiv"), 20, 20);
                var descriptors = jsonUtils.getShapeDescriptors(symbol);
                var shape = mySurface.createShape(descriptors.defaultShape).setFill(descriptors.fill).setStroke(descriptors.stroke);
                shape.applyTransform({ dx: 10, dy: 10 });

Re: Symbol object to image (svg)

GregRieck — Tue, 14 Mar 2017 23:17:46 GMT

The link no longer works. Can you please provide detailed information or a working link?

Re: Symbol object to image (svg)

ThomasSolow — Wed, 15 Mar 2017 13:42:25 GMT

I don't know the best way to do this in 3.XX, however the 4.XX API has a a symbolPreview module (esri/symbols/support/symbolPreview) with a renderPreviewHTML function, for example:

symbolPreview.renderPreviewHTML(<symbol>,{
      node: <HTMLElement>, //svg will be a child of this node
      opacity: 1,
      size: 10
});

This will resolve to an HTMLElement containing the SVG, so you can add it manually if you prefer instead of providing a node.

Re: Symbol object to image (svg)

JordanBaumgardner — Wed, 15 Mar 2017 15:08:30 GMT

Does this help?

// My config, passed to getSymbol()

location: {
   path: 'M28,0.074 28,10.87 14,42 0,56 14,42 28,36.826 42,42 56,56 42,42 28,10.657z',
   size: 35,
   startAngle: 0,
   color: {r: 36,g: 117,b: 255,a: 1,color: ''}
}

me.getSymbol = function (path, color, size, angle) {
   var markerSymbol;
   require(["esri/symbols/SimpleMarkerSymbol"], function (SimpleMarkerSymbol) {
   markerSymbol = new SimpleMarkerSymbol();
   markerSymbol.setPath(path);
   markerSymbol.setColor(color);
   markerSymbol.setOutline();
   markerSymbol.setSize(size);
   markerSymbol.setAngle(angle);
});
return markerSymbol;
};

Re: Symbol object to image (svg)

JordanBaumgardner — Wed, 15 Mar 2017 15:13:04 GMT

Here is how I convert the SVG from the legend to the DIV. (Ported 3.x digit TOC code)

_getLegendIconUrl: function(legend) {
var src = legend.url;
if (src == null) {
src = "data:image/png;base64," +
this.rootLayerTOC._legendResponse.layers[this.rootLayer.layerId].legend[0].imageData;
} else if (src != null && src.indexOf('data') == -1) {
// in some cases NULL value may cause #legend != #of renderer entry.
if (!has('ie') && legend.imageData && legend.imageData.length > 0) {
src = "data:image/png;base64," + legend.imageData;
} else {
if (src.indexOf('http') !== 0) {
// resolve relative url
src = this.rootLayer.url + '/' + this.serviceLayer.id + '/images/' + src;
}
if (this.rootLayer.credential && this.rootLayer.credential.token) {
src = src + "?token=" + this.rootLayer.credential.token;
} else if (esriConfig.defaults.io.alwaysUseProxy) {
src = esriConfig.defaults.io.proxyUrl + "?" + src;
}
}
}
return src;
},