Custom symbol styles not applying on arcgis-sketch component or widget

[ShainaR]

Hi I am trying to add a sketch component to my web application. I wanted to simply just be able to specify the symbols it use for the features it creates. I am using the component version of sketch and the documentation says it has attributes:

pointSymbol,

polylineSymbol,

polygonSymbol

 

So I set the object into it but the symbol doesn't apply to any of them. I am doing this in my react Component here. And I even tried the non-component version of sketch and it also still doesn't work. Need help on making this work.

import "@arcgis/map-components/dist/components/arcgis-sketch";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol.js";
import Sketch from "@arcgis/core/widgets/Sketch.js";
import { useMapViewContext } from "../../MapContainer.context";
import { useEffect } from "react";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";

export default function SketchTool() {
    const {view} = useMapViewContext()
    
    const pointSymbol = new SimpleMarkerSymbol({
        // type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        style: "circle",
        color: [138, 43, 226],
        size: "16px",
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 3
        }
      })
    
      const polylineSymbol = {
        type: "simple-line", // autocasts as new SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
      };
    
      const polygonSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "red",
        style: "solid",
        outline: {
          color: "white",
          width: 1
        }
      };

      useEffect(() => {
            if(view) {
                      // GraphicsLayer to hold graphics created via sketch view model
                // const graphicsLayer = new GraphicsLayer({
                //     id: "tempGraphics"
                // });
                // view.map.add(graphicsLayer);

                // const sketch = new Sketch({
                //     layer: graphicsLayer,
                //     view: view,
                //     creationMode: "update",
                //     pointSymbol: pointSymbol,
                //     polylineSymbol: polylineSymbol,
                //     polygonSymbol: polygonSymbol
                // });
                // view.ui.add(sketch, "top-right");
            }
      }, [view])
    return (
        <>
            	<arcgis-sketch 
                    position="bottom-right"
                    creation-mode="update"
                    pointSymbol={pointSymbol}
                    polylineSymbol={polylineSymbol}
                    polygonSymbol={polygonSymbol}
                >
                </arcgis-sketch>
        </>
    )
}<div> <div> </div></div>

[Edvinas_S]

I created a new react app and copied this component. It works fine if you remove that useMapViewContext import.

I simplified your component and made it log every time a new graphic was drawn. If this doesn't work, it's possible you have errors in other parts of your code.

import "@arcgis/map-components/dist/components/arcgis-sketch";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol.js";

export default function SketchTool() {
    const pointSymbol = new SimpleMarkerSymbol({
        style: "circle",
        color: [138, 43, 226],
        size: "16px",
        outline: { // autocasts as new SimpleLineSymbol()
          color: [255, 255, 255],
          width: 3
        }
    })
    
    const polylineSymbol = {
        type: "simple-line", // autocasts as new SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
    };
    
    const polygonSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "red",
        style: "solid",
        outline: {
          color: "white",
          width: 1
        }
    };
  
    return (
        <>
            <arcgis-sketch 
                position="bottom-right"
                creation-mode="update"
                pointSymbol={pointSymbol}
                polylineSymbol={polylineSymbol}
                polygonSymbol={polygonSymbol}

                onarcgisCreate={(event) => {
                    if (event.detail.state == "complete") {
                        console.log(event.detail.graphic);
                    }
                    }}
            />
        </>
    )
}