Styling sketchViewModel

JGraca — Wed, 16 Jun 2021 13:10:48 GMT

Hi all,
API Version 4.18

My current situation for this code is no matter what i do following the documentation, the inside of my area polygon is always blue and i need it to be transparent. Also, the polygon needs to be dashed and the code builds full lines. Basically, the whole style does not change no matter what i write.

My code:

const sketchViewModel = new SketchViewModel({ view: mapView, layer: layers.search, updateOnGraphicClick: true, defaultUpdateOptions: { enableRotation: false, toggleToolOnClick: false }, polygonSymbol: { type: "simple-fill", color: [0, 0, 0, 0.2], outline: { color: [255, 255, 255], width: 2 } } })

What i get:

I want something like this:

Re: Styling sketchViewModel

RobertScheitlin__GISP — Wed, 16 Jun 2021 13:55:13 GMT

@JGraca,

If you want the polygon fill to be transparent then you need to set the fill style and if want the outline to be dashed then you have to set the outline style.

polygonSymbol: { type: "simple-fill", color: [0, 0, 0, 0.2], style: "none", outline: { style: "dash", color: [255, 255, 255], width: 2 } }

Re: Styling sketchViewModel

JGraca — Thu, 17 Jun 2021 21:36:05 GMT

Hi, thanks @RobertScheitlin__GISP for the reply.

I have done what you suggested and it worked, but i would like to change the following:
- Remove the orange lines from the border;
- Change the boxes border colors to grey (the ones you draw on);
- Allow the polygon to be always resized;

On a different project, the background and the border still is with the blue colors.

On codepen it worked

Re: Styling sketchViewModel

RobertScheitlin__GISP — Fri, 18 Jun 2021 14:51:57 GMT

@JGraca,

Here is your codepen code updated for that:

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.18/"></script> <script> require(["esri/views/MapView", "esri/WebMap", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/widgets/Sketch/SketchViewModel", "esri/geometry/Polygon", "esri/geometry/SpatialReference", "esri/geometry/support/webMercatorUtils" ], function (MapView, WebMap, Graphic, GraphicsLayer, SketchViewModel, Polygon, SpatialReference, webMercatorUtils) { let sketchViewModel; var graphicsLayer = new GraphicsLayer(); var webmap = new WebMap({ basemap: 'satellite', layers: [graphicsLayer] }); var view = new MapView({ map: webmap, container: "viewDiv", center: [-9.40019762581224, 39.33930907833357], zoom: 6 }); setUpGraphicClickHandler(); addGraphics(); sketchViewModel = new SketchViewModel({ view: view, layer: graphicsLayer, updateOnGraphicClick: true, defaultUpdateOptions: { enableRotation: false, toggleToolOnClick: false }, polygonSymbol: { type: "simple-fill", color: [0, 0, 0, 0.2], style: "none", outline: { style: "dash", color: [168,168,168,1], width: 2 } } }); sketchViewModel.on(["update", "undo", "redo"], onGraphicUpdate); function onGraphicUpdate(event) { const graphic = event.graphics[0]; if ( event.toolEventInfo && (event.toolEventInfo.type === "move-stop" || event.toolEventInfo.type === "reshape-stop") ) { sketchViewModel.complete(); } else if (event.state === "cancel" || event.state === "complete") { sketchViewModel.update([graphic], { tool: "rectangle" }); const coordinate = webMercatorUtils.webMercatorToGeographic({graphic}) } sketchViewModel._internalGraphicsLayer.graphics.map(function(gra){ if(gra.geometry.type === 'polygon'){ gra.symbol.outline.color = [0,0,0,0]; } if(gra.geometry.type === 'point'){ gra.symbol.outline.color = [168,168,168,1]; } }); } function setUpGraphicClickHandler() { view.on("click", function (event) { if (sketchViewModel.state === "active") { return; } view.hitTest(event).then(function (response) { var results = response.results; results.forEach(function (result) { if ( result.graphic.layer === sketchViewModel.layer && result.graphic.attributes && result.graphic.attributes.newDevelopment ) { sketchViewModel.update([result.graphic], { tool: "rectangle" }); } }); }); }); } function addGraphics() { const newDevelopmentGraphic = new Graphic({ geometry: webMercatorUtils.geographicToWebMercator( new Polygon({ rings: [ [-13.43218004768601, 43.353861447707416], [-13.43218004768601, 36.364593011258414], [2.497995733559755, 36.364593011258414], [2.497995733559755, 43.353861447707416], [-13.43218004768601, 43.353861447707416] ], spatialReference: new SpatialReference({ wkid: 3857 }) }) ), symbol: { type: "simple-fill", color: [0, 0, 0, 0.2], style: "none", outline: { style: "dash", color: [168,168,168,1], width: 2 } }, attributes: { newDevelopment: "search area" } }); graphicsLayer.add(newDevelopmentGraphic); setTimeout(function(){ sketchViewModel.update([newDevelopmentGraphic],{ tool: "transform", toggleToolOnClick: false }); }, 500); } }); </script> </head> <body> <div id="viewDiv"></div> </body> </html>

topic Re: Styling sketchViewModel in ArcGIS JavaScript Maps SDK Questions

Styling sketchViewModel

Re: Styling sketchViewModel

Re: Styling sketchViewModel

Re: Styling sketchViewModel