Select to view content in your preferred language

Size of the webstyle symbol on the map

580
3
Jump to solution
08-03-2023 12:51 AM
KarthikeyanShanmugam
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

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 */}
	});
});

 

View solution in original post

3 Replies
JoelBennett
MVP Regular Contributor

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
Esri Regular Contributor

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

KarthikeyanShanmugam
New Contributor III

Thanks @JohnGrayson  @JoelBennett  It worked

0 Kudos