topic Re: How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x) in ArcGIS JavaScript Maps SDK Questions

How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x)

RoelGarcia08 — Tue, 13 Apr 2021 16:41:46 GMT

Hi All,

I am trying to use a SVG dynamically (based on attributes) as graphic in FeatureLayer with version 4.x . I have an example that uses 3.x overriding the renderer.getSymbol method.

3.x sample.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>FeatureLayer 3.x</title> <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css"> <script src="https://js.arcgis.com/3.22/"></script> <style> html, body, #map { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/map", "esri/layers/FeatureLayer", "esri/renderers/SimpleRenderer", "esri/symbols/PictureMarkerSymbol", "dojo/domReady!" ], function( Map, FeatureLayer, SimpleRenderer, PictureMarkerSymbol ) { // THIS SHOULD BE DYNAMIC SVG BASED ON THE GRAPHIC ATTRIBUTES var svg = `data&colon;image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTY4JyBoZWlnaHQ9JzUwJyB2aWV3Qm94PScwIDAgMTEwIDYyJyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPgogICAgICA8c3R5bGU+CiAgICAgICAuYmcgewogICAgICAgIHRyYW5zZm9ybTogc2NhbGVYKDAuNzUpCiAgICAgICB9CiAgICAgIDwvc3R5bGU+CiAgICAgIDxnIGZpbHRlcj0ndXJsKCNmaWx0ZXIwX2QpJyBjbGFzcz0nYmcnPgogICAgICAgIDxwYXRoIGZpbGwtcnVsZT0nZXZlbm9kZCcgY2xpcC1ydWxlPSdldmVub2RkJyBkPSdNMTQgOEMxMS43OTA5IDggMTAgOS43OTA4NiAxMCAxMlY0MS44NjNDMTAgNDQuMDcyMSAxMS43OTA5IDQ1Ljg2MyAxNCA0NS44NjNINzAuNjM1NUw3NC44OTEyIDUxLjAyNzRDNzQuOTkzMiA1MS4xNTExIDc1LjEyOCA1MS4yNTY0IDc1LjI4NjUgNTEuMzM2Qzc1Ljg5ODkgNTEuNjQzOCA3Ni43MTQ4IDUxLjUwNTYgNzcuMTA4OSA1MS4wMjc0TDgxLjM2NDcgNDUuODYzSDEzNEMxMzYuMjA5IDQ1Ljg2MyAxMzggNDQuMDcyMSAxMzggNDEuODYzVjEyQzEzOCA5Ljc5MDg2IDEzNi4yMDkgOCAxMzQgOEgxNFonIGZpbGw9JyNGRkZGRkYnIC8+CiAgICAgIDwvZz4KICAgICAgCiAgICA8c3R5bGU+LmxhYmVsIHsKICBmb250LWZhbWlseTogQXJpYWwsIEhlbHZldGljYSwgc2Fucy1zZXJpZjsKICBmb250LXdlaWdodDogNTAwOwogIGZvbnQtc3R5bGU6IG5vcm1hbDsKICBmb250LXNpemU6IDEzcHg7CiAgbGluZS1oZWlnaHQ6IDE4cHg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbGV0dGVyLXNwYWNpbmc6IDFweDsKICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwogZmlsbDogIzAwMDAwMH08L3N0eWxlPgogICAgPHRleHQgeD0nNjAnIHk9JzMwJyB0ZXh0LWFuY2hvcj0nbWlkZGxlJyBjbGFzcz0nbGFiZWwnPkVGLVVJPC90ZXh0PgogIAogICAgICA8c3ZnIHg9Jy05Jz4KICAgICAgICA8cGF0aCBkPSdNMzIuMDE0OSAyMC42MjExSDIzLjAwNjVDMjIuNzM5NiAyMC42MjExIDIyLjQ4MzYgMjAuNzM2MyAyMi4yOTQ4IDIwLjk0MTRDMjIuMTA2IDIxLjE0NjUgMjIgMjEuNDI0NiAyMiAyMS43MTQ2VjI5Ljc3NDJDMjIgMjkuOTE3NyAyMi4wMjYxIDMwLjA1OTcgMjIuMDc2NyAzMC4xOTIyQzIyLjEyNzMgMzAuMzI0NyAyMi4yMDE1IDMwLjQ0NTEgMjIuMjk1IDMwLjU0NjRDMjIuMzg4NSAzMC42NDc3IDIyLjQ5OTUgMzAuNzI3OSAyMi42MjE2IDMwLjc4MjZDMjIuNzQzNyAzMC44MzcyIDIyLjg3NDUgMzAuODY1MSAyMy4wMDY1IDMwLjg2NDdIMjQuNTg1TDI0LjYxMzEgMzAuNzg4NUMyNC43MjU0IDMwLjQ0MTYgMjQuOTM0IDMwLjE0MTEgMjUuMjEwMiAyOS45Mjg1QzI1LjQ4NjUgMjkuNzE1OSAyNS44MTY2IDI5LjYwMTcgMjYuMTU1MSAyOS42MDE3QzI2LjQ5MzYgMjkuNjAxNyAyNi44MjM4IDI5LjcxNTkgMjcuMSAyOS45Mjg1QzI3LjM3NjMgMzAuMTQxMSAyNy41ODQ5IDMwLjQ0MTYgMjcuNjk3MiAzMC43ODg1TDI3LjcyMjQgMzAuODY0N0gzMi4wMjMzQzMyLjA2NDQgMzAuODY3NyAzMi4xMDU2IDMwLjg2NzcgMzIuMTQ2NyAzMC44NjQ3SDMzLjAyOTlWMjMuNDYzVjIxLjcyNjhDMzMuMDMxNCAyMS41ODE0IDMzLjAwNjIgMjEuNDM3MiAzMi45NTU3IDIxLjMwMjVDMzIuOTA1MyAyMS4xNjc4IDMyLjgzMDYgMjEuMDQ1NCAzMi43MzYxIDIwLjk0MjRDMzIuNjQxNiAyMC44Mzk1IDMyLjUyOTEgMjAuNzU4IDMyLjQwNTMgMjAuNzAyOUMzMi4yODE1IDIwLjY0NzcgMzIuMTQ4OCAyMC42MTk5IDMyLjAxNDkgMjAuNjIxMVonIGZpbGw9JyNCREJEQkQnLz4KICA8cGF0aCBkPSdNMjYuMTY1OSAzMi43MzU5QzI2LjgzOTUgMzIuNzM1OSAyNy4zODU1IDMyLjE0MjcgMjcuMzg1NSAzMS40MTA5QzI3LjM4NTUgMzAuNjc5MiAyNi44Mzk1IDMwLjA4NTkgMjYuMTY1OSAzMC4wODU5QzI1LjQ5MjMgMzAuMDg1OSAyNC45NDYzIDMwLjY3OTIgMjQuOTQ2MyAzMS40MTA5QzI0Ljk0NjMgMzIuMTQyNyAyNS40OTIzIDMyLjczNTkgMjYuMTY1OSAzMi43MzU5WicgZmlsbD0nI0JEQkRCRCcvPgogIDxwYXRoIGQ9J00zNi4zNzM5IDMyLjczNTlDMzcuMDQ3NSAzMi43MzU5IDM3LjU5MzUgMzIuMTQyNyAzNy41OTM1IDMxLjQxMDlDMzcuNTkzNSAzMC42NzkyIDM3LjA0NzUgMzAuMDg1OSAzNi4zNzM5IDMwLjA4NTlDMzUuNzAwMyAzMC4wODU5IDM1LjE1NDMgMzAuNjc5MiAzNS4xNTQzIDMxLjQxMDlDMzUuMTU0MyAzMi4xNDI3IDM1LjcwMDMgMzIuNzM1OSAzNi4zNzM5IDMyLjczNTlaJyBmaWxsPScjQkRCREJEJy8+CiAgPHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J00zMy43NTEgMjMuNDYzMlYzMC44NTI5SDM0Ljc1MkwzNC43NzQ0IDMwLjc4ODlDMzQuODkwNiAzMC40MzMgMzUuMTA1NCAzMC4xMjQ5IDM1LjM4OTQgMjkuOTA3QzM1LjY3MzMgMjkuNjg5MSAzNi4wMTIzIDI5LjU3MjEgMzYuMzYgMjkuNTcyMUMzNi43MDc2IDI5LjU3MjEgMzcuMDQ2NiAyOS42ODkxIDM3LjMzMDYgMjkuOTA3QzM3LjYxNDUgMzAuMTI0OSAzNy44MjkzIDMwLjQzMyAzNy45NDU1IDMwLjc4ODlMMzcuOTY3OSAzMC44NTI5SDM5LjczOTlDMzkuODA4NSAzMC44NTI5IDM5Ljg3NDQgMzAuODIzNCAzOS45MjMyIDMwLjc3MUMzOS45NzIxIDMwLjcxODUgMzkuOTk5OSAzMC42NDcyIDQwLjAwMDYgMzAuNTcyNlYyNy4zODM1QzQwLjAwMDkgMjcuMzEyMSAzOS45NzU3IDI3LjI0MzQgMzkuOTMwNSAyNy4xOTE2TDM3LjQ2ODggMjMuNjczNUMzNy40MDk0IDIzLjYwMyAzNy4zMzcgMjMuNTQ2OCAzNy4yNTY0IDIzLjUwODVDMzcuMTc1NyAyMy40NzAzIDM3LjA4ODYgMjMuNDUwNyAzNy4wMDA2IDIzLjQ1MTJIMzMuNzUxVjIzLjQ2MzJaJyBmaWxsPScjQkRCREJEJy8+CiAgICAgIDwvc3ZnPgogICAgICA8ZWxsaXBzZSBjeD0nOTMnIGN5PScyNi45MzA2JyByeD0nNScgcnk9JzUuMjU4NzUnICBmaWxsPScjQkRCREJEJy8+CiAgICAgIDxkZWZzPgogICAgICAgIDxmaWx0ZXIgaWQ9J2ZpbHRlcjBfZCcgeD0nMCcgeT0nMCcgd2lkdGg9JzE2OCcgaGVpZ2h0PSc1MCcgZmlsdGVyVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9J3NSR0InPgogICAgICAgICAgPGZlRmxvb2QgZmxvb2Qtb3BhY2l0eT0nMCcgcmVzdWx0PSdCYWNrZ3JvdW5kSW1hZ2VGaXgnLz4KICAgICAgICAgIDxmZUNvbG9yTWF0cml4IGluPSdTb3VyY2VBbHBoYScgdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDEyNyAwJy8+CiAgICAgICAgICA8ZmVPZmZzZXQgZHk9JzInLz4KICAgICAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249JzUnLz4KICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwIDAgMCAwLjIgMCcvPgogICAgICAgICAgPGZlQmxlbmQgbW9kZT0nbm9ybWFsJyBpbjI9J0JhY2tncm91bmRJbWFnZUZpeCcgcmVzdWx0PSdlZmZlY3QxX2Ryb3BTaGFkb3cnLz4KICAgICAgICAgIDxmZUJsZW5kIG1vZGU9J25vcm1hbCcgaW49J1NvdXJjZUdyYXBoaWMnIGluMj0nZWZmZWN0MV9kcm9wU2hhZG93JyByZXN1bHQ9J3NoYXBlJy8+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgIDwvZGVmcz4KICAgIDwvc3ZnPg==`; var map = new Map("map", { basemap: "hybrid", center: [-82.44109, 35.6122], zoom: 17 }); var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0"); map.addLayer(featureLayer); var renderer = new SimpleRenderer(); renderer.getSymbol = function(graphic){ var sym = new PictureMarkerSymbol(svg, 240, 50); return sym; } featureLayer.setRenderer(renderer); }); </script> </head> <body> <div id="map"></div> </body> </html>

I would appreciate any guidance on how I can do the same in version 4.x.

Thank you so much!!,

Roel

Re: How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x)

UndralBatsukh — Tue, 13 Apr 2021 17:51:41 GMT

Hi there,

This should work as long as you are NOT using animated svg. Please take a look at the known limitation for PictureMarkerSymbol for svg limitations. If you are using animated svg... then it will not work as stated in the known limitation. You can instead use animated png or webp formats.

In any case, the svg you provided is not working. You can do it as shown below:

Re: How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x)

RoelGarcia08 — Tue, 13 Apr 2021 18:18:25 GMT

Hi UndralBatsukh,

Thank you for replying to my post. I would like to create the SVG dynamically (on the fly) based on some attributes.

Here some examples:

* Increase the Width based on the label length

* Displaying of different graphics based on some attributes (type, status, etc)

Thank you so much!!

Re: How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x)

ReneRubalcava — Tue, 13 Apr 2021 18:32:14 GMT

This is something that would be better suited for CIMSymbol, as it can be defined based on attributes. This blog post covers some of this in more detail.

Re: How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x)

UndralBatsukh — Tue, 13 Apr 2021 18:35:35 GMT

Hi there,

You maybe better of using DictionaryRenderer in this case. Here is a sample that shows how to use dictionary renderer: https://developers.arcgis.com/javascript/latest/sample-code/visualization-dictionary/

Re: How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x)

RoelGarcia08 — Wed, 14 Apr 2021 15:23:13 GMT

Hi Undral,

Do you have an example more specific for what I like to do? Can we increase the width of the web style (shape, background icon) dynamically based on the label or text?

Like this:

Thank you so much!!

Roel

Re: How can I use a dynamic SVG as graphic in FeatureLayer (ArcGIS JS API 4.x)

RoelGarcia08 — Wed, 14 Apr 2021 18:48:57 GMT

Hi Rene,

Do you have an example (Code) more specific for what I like to do?

Thank you,

Roel