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

RoelGarcia08 · ‎04-13-2021

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