topic Re: Customize sketchviewmodel snapping highlight color? in ArcGIS JavaScript Maps SDK Questions

Customize sketchviewmodel snapping highlight color?

EMiller_2 — Mon, 15 May 2023 18:17:23 GMT

I am using sketchViewModel with snappingOptions enabled. I am using a feature service as the snapping target.

The default behavior is that when the snapping cursor moves over the feature service features, they flash with the highlight color, which is orange, and the snapping dot color when one clicks to snap a point is also orange.

Is it possible to customize these colors and change the orange to something else?

Thank you!

Re: Customize sketchviewmodel snapping highlight color?

RachelGomez — Tue, 16 May 2023 05:32:59 GMT

Yes, it is possible to customize the colors used by the SketchViewModel for snapping in the ArcGIS API for JavaScript. You can modify the default highlight and snapping dot colors by overriding the CSS styles associated with the snapping functionality.

To change the colors, you need to target the specific CSS classes associated with the snapping components. Here are the steps to customize the colors:

Identify the CSS classes: Inspect the HTML elements of the snapping highlight and snapping dot using your browser's developer tools. Look for the CSS classes associated with these elements. They are typically named with "esri-sketch-vm" followed by a specific name for the snapping component.

Override the CSS styles: Once you have identified the CSS classes, you can override their styles in your own CSS file or within a <style> tag in your HTML. You will need to specify the desired colors for the highlight and snapping dot components.

For example, to change the highlight color to blue and the snapping dot color to red, you can use the following CSS:

css
Copy code
/* Override the snapping highlight color */
.esri-sketch-vm-highlight {
fill: blue;
stroke: blue;
}

/* Override the snapping dot color */
.esri-sketch-vm-snap-dot {
fill: red;
stroke: red;
}
Include the CSS in your HTML: Make sure to include the CSS file or <style> tag containing the custom styles in your HTML file after the ArcGIS API for JavaScript library is loaded.

By following these steps, you can customize the colors used by the SketchViewModel snapping functionality to match your desired design.

Please note that the specific CSS class names and structure may vary depending on the version of the ArcGIS API for JavaScript you are using. Make sure to inspect the HTML elements and CSS classes in your application to find the appropriate classes to target for customization.

Regards,

Rachel Gomez

Re: Customize sketchviewmodel snapping highlight color?

EMiller_2 — Tue, 16 May 2023 14:27:13 GMT

Thank you, this sounds like great advice, but unfortunately I have not been able to grab the CSS through the browser developer tools. I am using Experience Builder with the JavaScript API 4.x. I have a custom widget built with react which calls the sketchviewmodel. In my browser Experience I am only able to grab the map itself, which is a canvas element, and I can't grab the sketch highlighted items within the map. Am I missing something about how to grab these elements? I need to be able to drill into the canvas to get at them.

Re: Customize sketchviewmodel snapping highlight color?

JessicaHendricks444 — Thu, 09 May 2024 22:08:44 GMT

Did you ever figure this out? I've tried everything I can to stop the snapping layer to be highlighted when the sketch point is being placed, but have had no luck.

Re: Customize sketchviewmodel snapping highlight color?

EMiller_2 — Fri, 10 May 2024 16:00:52 GMT

Hello @JessicaHendricks444, no, I'm sorry to say I did not. In my case I do like the snapping and highlighting behavior, but I wanted the flexibility to change the orange color to something else, and I have not been able to do that.

Re: Customize sketchviewmodel snapping highlight color?

LuisSolaRuiz — Tue, 02 Jul 2024 11:39:24 GMT

@EMiller_2 @JessicaHendricks444 Maybe this post can help you.