Create and clone WebStyleSymbol --> Not a function

FriederHaag · ‎03-02-2022

Hi,

I am trying to create an instance of a WebStyleSymbol and then clone it to vary the height. However, I can't seem to find a way of doing so. When I try to autocast a symbol as WebStyleSymbol and then call it with e.g. fetchSymbol() or clone(), I get the "webStyleSymbol.clone is not a function" error. This leads me to believe that the casting itself somehow went wrong, even though the type is specified as "web-style".

I am not very proficient in Javascript or the ArcGIS API, so this might as well be some easy to avoid mistake Any help is appreciated. Find attached the minimum example to reproduce the error.

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Minimum working example</title>
  <style>
    html, body, 
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css">
  <script src="https://js.arcgis.com/4.22/"></script>
  <script>
    require([
        "esri/config",
        "esri/symbols/WebStyleSymbol"
    ],(esriConfig, WebStyleSymbol)=> {

    //autocast new symbol
    let webStyleSymbol = {
      type: "web-style",
      styleName: "EsriInfrastructureStyle",
      name: "Wind_Turbine"
    };

    console.log(webStyleSymbol.type); //check the type --> output "web-style"
    webStyleSymbol.clone(); //clone the symbol --> this throws an error
    console.log(webStyleSymbol.type); //check again
    })
  </script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

ReneRubalcava · ‎03-02-2022

That is not autocasting. Autocasting happens when you pass objects to constructors or methods that will autocast objects to instances of classes. If you create a new instance of the WebStyleSymbol, you can use the clone method and more.

https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-WebStyleSymbol.html#metho...

View solution in original post

ReneRubalcava · ‎03-02-2022

That is not autocasting. Autocasting happens when you pass objects to constructors or methods that will autocast objects to instances of classes. If you create a new instance of the WebStyleSymbol, you can use the clone method and more.

https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-WebStyleSymbol.html#metho...

FriederHaag · ‎03-02-2022

Thank you! How would I autocast a WebStyleSymbol then? The example here seems to be using what I tried.

In any case you were right that it did not create a WebStyleSymbol properly. I used this and it worked:

let webStyleSymbol = new WebStyleSymbol({
  styleName: "EsriInfrastructureStyle",
  name: "Wind_Turbine"
});

ReneRubalcava · ‎03-02-2022

Glad you got it working!

In that example, the symbol object is added to the renderer of the layer. Under the hood, the renderer sees the object of the symbol passed to the setter, it will reactively create an instance of the symbol class based on the type property to the correct symbol instance. But the object has to be passed to something for that to happen.

FriederHaag · ‎03-02-2022

I see, thanks for the explanation!