"Pin" style point symbol using WebStyleSymbol or SimpleMarkerSymbol, and how to change it's size/color

[Paco]

Hello all.    struggling with something as simple as changing the size and color of point markers in JS 4x.

I want to use the google "Pin" style marker,  which i found in the WebStyleSymbol class,  but it seems to only render as gray and one size.   Can i change those parameters?

Or,  is there already an existing "Pin" style SimpleMarkerSymbol that i can more easily change those parameters.

this draws the "Pins" just fine on my mapview,  but I need to change the size and color.  Thanks!(see image)

let render = newSimpleMarkerSymbol
 type: "simple", // autocasts as new SimpleRenderer()
 symbol: {
   type: "web-style", // autocasts as new WebStyleSymbol()
   name: "tear-pin-2",
   styleName: "Esri2DPointSymbolsStyle"
},

[BryanMc]

Looks like it is setting up a new SimpleMarkerSymbol, but you really want a WebStyleSymbol. The example above is a bit of a combo of the two.

If you want to modify the color or size of a WebStyleSymbol you need to use fetchSymbol() to get the actual symbol object from the web style, then modify the color or size.

You can do some playing around with basics Symbols in the Symbol Builder (mini app) to play around with both SimpleMarkerSymbols and WebStyleSymbols to create a symbol and copy the code:

Simple: Symbol Builder (sagewall.github.io)

WebStyle: Symbol Builder (sagewall.github.io)

Hope this helps

[Paco · Accepted solution]

Hm.  still having trouble with the fetch and clone statements.  any examples?

I also found a way(from another excellent online Symbol playground-https://gis.sanramon.ca.gov/arcgis_js_api/sdk/samples/playground/index.html) to use a SimpleMarkerSymbol and a Path to create the Pin.   not sure where/how the Path was made,  but I used it in my JS 4x script and the parameters were editable(see image),  However,  the location of the Marker/Path pin is off from the actual Feature location..probably in the center of the Marker instead of pin point.   

I would love to know how to adjust the SimpleMarkerSymbol location OR just be able to use your Fetch/Clone to alter the WebStyleSymbol.

thx all!

the newest JS..

let render = {

  type: "simple",

  symbol: {

    type: "simple-marker",

    path: "M16,3.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.143,7.5,18.121,7.5,18.121S23.5,15.143,23.5,11C23.5,6.858,20.143,3.5,16,3.5z M16,14.584c-1.979,0-3.584-1.604-3.584-3.584S14.021,7.416,16,7.416S19.584,9.021,19.584,11S17.979,14.584,16,14.584z",

    size: "30px",

    color: "orange",

    outline: {

      color: "white"

    }

  }

}

[Paco]

Okay,   my temporary fix(possibly permanent because it does seem to be working just fine) to the SimpleMarkerSymbol - Path "shift" issue is using the "xoffset/yoffset" parameter in the symbol.

now my 'Pin' symbol point is at the FeatureLayer location.

[BryanMc]

@Paco - I think your solution with the offsets is the way to go and less code/effort. If you were going to use the defaults for the webStyle it is straight forward, but fetching and changing is more work since this is a simple shape and you have already figured out the path property.

The "path" is just an SVG path, so you could open in a SVG editor (like this one) to tweak the shape as well. The offset should work great as you can make items align to the tip of the pin.