topic Re: ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol in ArcGIS JavaScript Maps SDK Questions

ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

NicolasGIS — Mon, 10 Jun 2019 06:32:15 GMT

Hello,

I am under the impression that the symbol displayed while sketching a point cannot be overwritten.

I believe it should be as it is a property of the SketchViewModel:

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.html#pointSymbol

Am I doing something wrong or is it a bug ?

https://codepen.io/anon/pen/MMgpVb

Thanks

Re: ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:55:09 GMT

You are doing something wrong. In your code you do create a SketchViewModel but you never do anything with it. In your code you are adding a graphic to a layer and specifying the graphic symbol.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to MapView - Create a 2D map - 4.11</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
      require(["esri/Graphic", "esri/layers/GraphicsLayer", "esri/Map", "esri/views/MapView", "esri/widgets/Sketch/SketchViewModel"], function(Graphic, GraphicsLayer, Map, MapView, SketchViewModel) {
        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65] // longitude, latitude
        });

        var editLayer = new GraphicsLayer();

        var point = {
          type: "point",
          x: 1669792,
          y: 9608371,
          spatialReference: {
              wkid: 102100
          }
        };

        var markerSymbol = {
          type: "simple-marker",
          color: [226, 119, 40],
          outline: {
            color: [255, 255, 255],
            width: 2
          }
        };

        var pointGraphic = new Graphic({
          geometry: point,
          symbol: markerSymbol
        });

        var sketchVM = new SketchViewModel({
          layer: editLayer,
          view: view,
          pointSymbol: {
            type: "simple-marker",
            style: "circle",
            size: 10,
            color: [255, 255, 255, 0.8],
            outline: {
              color: [211, 132, 80, 0.7],
              size: 10
            }
          }
        });
        
        sketchVM.create("point");
        sketchVM.on("create", function(event) {
          console.info(event);
        });

        //editLayer.add(pointGraphic);
        view.map.add(editLayer);

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

NicolasGIS — Tue, 11 Jun 2019 05:33:15 GMT

Thanks for the reply ! I think you forget to wait for the view to be ready because on my side your sample was not working:

view.when( () => {
sketchVM.create("point");
})

Also, you are saying that I am not doing anything with the sketchViewModel but I am : I allow user to drag and move points that are in "editLayer" which is basically what I want to do. I do not want to allow user to add new point just like you suggested.

But thanks to your example, I now understand that this property is used for the symbology of new points. I thought it was used to customize the style of the point while it was being edited (the blue filled circle point). So does it mean that is not possible ?!

I am currently migrating a 3.28 application and it used to be possible to move a point without changing its symoblogy using the edit toolbar class:

var editToolbar = new esri.toolbars.Edit(map);

editToolbar.activate(esri.toolbars.Edit.MOVE, graphic);

The use case is the following: I want user to move a "pegman" on the map in the spirit of Google Maps. Do you think it can be done in 4.X ? According the 3.x to 4.x functionality matrix, it is the proper class to use.

Thanks !

Re: ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

RobertScheitlin__GISP — Sat, 11 Dec 2021 11:55:12 GMT

Nicolas,

Sorry I didn't think about updating, I was focused on graphic creation. So I think this is what you are wanting then (still a little rough but.)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to MapView - Create a 2D map - 4.11</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.11/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.11/"></script>

    <script>
      require(["esri/Graphic", "esri/layers/GraphicsLayer", "esri/Map", "esri/views/MapView", "esri/widgets/Sketch/SketchViewModel"], function(Graphic, GraphicsLayer, Map, MapView, SketchViewModel) {
        var map = new Map({
          basemap: "streets"
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [15, 65] // longitude, latitude
        });

        var editLayer = new GraphicsLayer();

        var point = {
          type: "point",
          x: 1669792,
          y: 9608371,
          spatialReference: {
              wkid: 102100
          }
        };

        var markerSymbol = {
          type: "simple-marker",
          color: [226, 119, 40],
          outline: {
            color: [255, 255, 255],
            width: 2
          }
        };

        var pointGraphic = new Graphic({
          geometry: point,
          symbol: markerSymbol
        });

        var sketchVM = new SketchViewModel({
          layer: editLayer,
          pointSymbol: {
            type: "simple-marker",
            style: "diamond",
            outline: { color: [169, 0, 230, 1] },
            angle: 81,
            color: [230, 0, 0, 0.74]
          },
          view: view
        });
        
        sketchVM.watch('updateGraphics', function(evt){
          console.info(evt);
        });

        sketchVM.on("update", function(event){
          if(event.state === 'start'){
            const graphic = event.graphics[0];
            graphic.symbol = {
              type: "simple-marker",
              style: "diamond",
              outline: { color: [169, 0, 230, 1] },
              angle: 81,
              color: [230, 0, 0, 0.74]
            }
          }
          
          if(event.state === 'complete'){
            const graphic = event.graphics[0];
            graphic.symbol = markerSymbol;
          }
        });

        editLayer.add(pointGraphic);
        view.map.add(editLayer);

      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

DavidWilson3 — Thu, 13 Jun 2019 20:57:07 GMT

I think you need to use the class esri/symbols/SimpleMarkerSymbol

Re: ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

NicolasGIS — Fri, 14 Jun 2019 05:21:57 GMT

Thanks Robert ! It does solve my issue. There is still a very small flickering the first time but it is a nice workaround.

Many thanks !

Re: ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

NicolasGIS — Fri, 14 Jun 2019 05:22:55 GMT

Yes, it is what I am using thanks !