Size of the webstyle symbol on the map

[KarthikeyanShanmugam]

Hello

I am using the tear-pin-2 from the webstyle symbol to be rendered on the map. Is there way attribute to change the size of the webstyle symbol which is present on the map.

          view.graphics.add({
            symbol: new WebStyleSymbol({
              name: marker.category.icon,
              styleName: "Esri2DPointSymbolsStyle",
            }),
            
            geometry: {
              type: "point",
              longitude: marker.lng,
              latitude: marker.lat
            },
            // content can be customised from the data got from the API
            popupTemplate: {
              title: "San Diego Zoo",
              content: "content string"
            }
          });

I would appreciate any suggestions to solve the problem.

Thank you

[JoelBennett · Accepted solution]

You'll have to get the underlying CIMSymbol reference via fetchCIMSymbol, adjust its size, and use it directly.  For example, this doubles the size of the icon:

var symbol = new WebStyleSymbol({
	name: "tear-pin-2",
  	styleName: "Esri2DPointSymbolsStyle"
});

symbol.fetchCIMSymbol().then(function(cimSymbol) {
	cimSymbol.data.symbol.symbolLayers.forEach(function(symbolLayer) {
		symbolLayer.size = symbolLayer.size * 2;
	});

	view.graphics.add({
		symbol: cimSymbol,
		geometry: {/* etc */},
		popupTemplate: {/* etc */}
	});
});

[JohnGrayson]

You can also use the cimSymbolUtils to help with some of these tasks, in your use case the 'scaleCIMSymbolTo()' method.

[KarthikeyanShanmugam]

Thanks @JohnGrayson  @JoelBennett  It worked