topic Change marker symbol to pushpin in ArcGIS JavaScript Maps SDK Questions

Change marker symbol to pushpin

ITApplications — Fri, 19 Aug 2022 09:22:47 GMT

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-symbols-3d/

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

Re: Change marker symbol to pushpin

ReneRubalcava — Fri, 19 Aug 2022 17:04:13 GMT

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-symbols-2d/

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.

Re: Change marker symbol to pushpin

ITApplications — Thu, 29 Sep 2022 14:42:23 GMT

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

Re: Change marker symbol to pushpin

JohnGrayson — Fri, 30 Sep 2022 20:54:23 GMT

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

Re: Change marker symbol to pushpin

ITApplications — Mon, 03 Oct 2022 08:28:42 GMT

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