Change marker symbol to pushpin

114
4
Jump to solution
08-19-2022 02:22 AM
ITApplications
New Contributor III

Hi all

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

ITApplications_0-1660900128854.png

The code is:

ITApplications_1-1660900322526.png

 

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... 

ITApplications_2-1660900543727.png

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:

ITApplications_3-1660900747880.png

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

0 Kudos
1 Solution

Accepted Solutions
JohnGrayson
Esri Regular Contributor

...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);
  }
});

 

View solution in original post

4 Replies
ReneRubalcava
Frequent Contributor II

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.

ReneRubalcava_0-1660928647887.png

 

 

0 Kudos
ITApplications
New Contributor III

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

0 Kudos
JohnGrayson
Esri Regular Contributor

...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
New Contributor III

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

0 Kudos