Change marker symbol to pushpin

[ITApplications]

Hi all

Currently if a customer clicks on the map it drops a simple marker symbol (in red):

The code is:

I'd like to change the symbol to a pushpin and I've found the following on the ArcGIS API for Javascript site: 

https://developers.arcgis.com/javascript/latest/visualization/symbols-color-ramps/esri-web-style-sym... 

The web reference behind the link is:

{"name":"Pushpin 2","type":"PointSymbol3D","symbolLayers":[{"type":"Icon","size":20,"anchor":"bottom","material":{"color":[232,157,0],"transparency":0},"resource":{"href":"https://static.arcgis.com/arcgis/styleItems/Icons/web/resource/Pushpin2.svg"}}]}

 I've tried putting this into my code:

But it's not working. Do I need to put the WebStyleSymbol syntax somewhere in my code or have I updated the current symbol code incorrectly?

Thanks in advance.

Ricky

[ReneRubalcava]

That link is for the 3D SymbolStyles, you want to use the 2D symbol styles

https://developers.arcgis.com/javascript/latest/visualization/symbols-color-ramps/esri-web-style-sym...

const webStyleSymbol = new WebStyleSymbol({
  name: "push-pin-1",
  styleName: "Esri2DPointSymbolsStyle"
});

If you want to tweak it a bit, each 2D Web Style Symbol is also available as a CIM Symbol and you can modify the symbology a bit as you need. There's a tab to select the CIM JSON.

[ITApplications]

Thanks @ReneRubalcava , apologies I'd completely missed your response.

where would I put the web style symbol in my code? Guessing I'd need to edit it in here somewhere?

 view.on("click", function (evt) {
          if (view.scale <= 3500)
          var graphic = new Graphic({
            geometry: {
              type: "point",
              x: evt.mapPoint.x,
              y: evt.mapPoint.y,
              spatialReference: view.spatialReference,
            },
            symbol: {
              type: "simple-marker",
              color: [255, 10, 10],
            outline: {
              color: [255, 255, 255],
              width: 2,
              },
            },
          });
          view.graphics.removeAll();
          view.graphics.add(graphic);
          });

Thanks

Ricky

[JohnGrayson · Accepted solution]

...maybe try something like this:

view.on("click", function (evt) {
  if (view.scale <= 3500) {
    var graphic = new Graphic({
      geometry: {
        type: "point",
        x: evt.mapPoint.x,
        y: evt.mapPoint.y,
        spatialReference: view.spatialReference,
      },
      symbol: {
        type: "web-style",
        name: "push-pin-1",
        styleName: "Esri2DPointSymbolsStyle"
      } 
    });  
    view.graphics.removeAll();
    view.graphics.add(graphic);
  }
});

[ITApplications]

That's worked great, thanks John and thanks Rene for the initial suggestion.