Merge pull request #387 from AuraipornA/master

Update the sample for the Sketch widget in ArcGIS Maps SDK for JavaScript.
Esri · Dec 9, 2024 · 5108561 · 5108561
2 parents 0598f4f + 95f3b4f
commit 5108561
Show file tree

Hide file tree

Showing 2 changed files with 183 additions and 0 deletions.
diff --git a/web-js/4.x/update-sketch-widget-color-and-highlight/README.md b/web-js/4.x/update-sketch-widget-color-and-highlight/README.md
@@ -0,0 +1,67 @@
+# Update the Default Color of the Sketch Widget
+
+## About
+
+This sample demonstrates how to change the default color of the drawing tool in the Sketch widget and how to update the highlight color for drawing symbols in 2D.
+
+## How It Works
+
+Select a symbol to draw in the Sketch widget, the custom color is applied to the drawing symbols and the highlight is also updated with a custom color.
+
+1. Use `SketchViewModel` class to change the default color of the Sketch Widget.
+
+```javascript
+const sketchViewModel = new SketchViewModel({
+  view: view,
+  layer: graphicsLayer,
+});
+```
+
+2. Create a pointSymbol, polylineSymbol, and polygonSymbol, and specify a color for each symbol. Override the default drawing symbology using `pointSymbol`, `polylineSymbol`, and `polygonSymbol` properties.
+
+```javascript
+const sketchViewModel = new SketchViewModel({
+  view: view,
+  layer: graphicsLayer,
+  pointSymbol: pointSymbol,
+  polygonSymbol: polygonSymbol,
+  polylineSymbol: polylineSymbol,
+});
+```
+
+3. To update the highlight for the drawing symbol, use `highlightOptions` property of the MapView to update a color.
+
+```javascript
+const view = new MapView({
+  container: "viewDiv",
+  map: map,
+  zoom: 5,
+  center: [90, 45],
+  highlightOptions: {
+    color: [255, 255, 0, 1],
+    haloOpacity: 0.9,
+    fillOpacity: 0.2,
+  },
+});
+```
+
+4. To remove the highlight, you can use the code snippet below to disable it on the drawing symbol.
+
+```javascript
+defaultUpdateOptions: {
+              highlightOptions: {
+                enabled: false,
+              },
+            },
+```
+
+## Related Documentation
+
+- https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#polylineSymbol
+- https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#polygonSymbol
+- https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#pointSymbol
+- https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#highlightOptions
+
+## Live Sample
+
+https://esri.github.io/developer-support/web-js/4.x/update-sketch-widget-color-and-highlight
diff --git a/web-js/4.x/update-sketch-widget-color-and-highlight/index.html b/web-js/4.x/update-sketch-widget-color-and-highlight/index.html
@@ -0,0 +1,116 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <title>
+      Update the Drawing Symbols and Highlight of the Sketch Widget| Sample |
+      ArcGIS Maps SDK for JavaScript
+    </title>
+
+    <link
+      rel="stylesheet"
+      href="https://js.arcgis.com/4.30/esri/themes/light/main.css"
+    />
+    <script src="https://js.arcgis.com/4.30/"></script>
+
+    <style>
+      html,
+      body,
+      #viewDiv {
+        padding: 0;
+        margin: 0;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+    <script>
+      require([
+        "esri/widgets/Sketch",
+        "esri/Map",
+        "esri/layers/GraphicsLayer",
+        "esri/views/MapView",
+        "esri/widgets/Sketch/SketchViewModel",
+      ], (Sketch, Map, GraphicsLayer, MapView, SketchViewModel) => {
+        const graphicsLayer = new GraphicsLayer();
+
+        const map = new Map({
+          basemap: "gray-vector",
+          layers: [graphicsLayer],
+        });
+
+        const view = new MapView({
+          container: "viewDiv",
+          map: map,
+          zoom: 5,
+          center: [90, 45],
+          // Options for configuring the highlight
+          highlightOptions: {
+            color: [255, 255, 0, 1],
+            haloOpacity: 0.9,
+            fillOpacity: 0.2,
+          },
+        });
+
+        let pointSymbol = {
+          type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
+          style: "square",
+          color: "blue",
+          size: "18px", // pixels
+          outline: {
+            // autocasts as new SimpleLineSymbol()
+            color: [255, 255, 0],
+            width: 3, // points
+          },
+        };
+        const polylineSymbol = {
+          type: "simple-line",
+          color: "#ADD8E6",
+          width: 12,
+        };
+        const polygonSymbol = {
+          type: "simple-fill", // autocasts as new SimpleFillSymbol()
+          color: "#ADD8E6",
+          outline: {
+            // autocasts as new SimpleLineSymbol()
+            color: "#0000FF",
+            width: 6,
+          },
+        };
+
+        const sketchViewModel = new SketchViewModel({
+          view: view,
+          layer: graphicsLayer,
+          pointSymbol: pointSymbol,
+          polygonSymbol: polygonSymbol,
+          polylineSymbol: polylineSymbol,
+        });
+
+        view.when(() => {
+          const sketch = new Sketch({
+            layer: graphicsLayer,
+            view: view,
+            viewModel: sketchViewModel,
+            // graphic will be selected as soon as it is created
+            creationMode: "update",
+            /*
+            // Uncomment this code snippet to turn off highlights for update operations.
+            defaultUpdateOptions: {
+              highlightOptions: {
+                enabled: false,
+              },
+            },
+            */
+          });
+          view.ui.add(sketch, "top-right");
+        });
+      });
+    </script>
+  </head>
+
+  <body>
+    <div id="viewDiv"></div>
+  </body>
+</html>