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
Solved! Go to 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 */}
});
});
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 */}
});
});
You can also use the cimSymbolUtils to help with some of these tasks, in your use case the 'scaleCIMSymbolTo()' method.
Thanks @JohnGrayson @JoelBennett It worked