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

ShainaR — Tue, 11 Mar 2025 22:53:10 GMT

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>

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

Edvinas_S — Fri, 14 Mar 2025 14:41:23 GMT

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

topic Custom symbol styles not applying on arcgis-sketch component or widget in ArcGIS JavaScript Maps SDK Questions

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

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