ESRI JS API 4.11 : Bug SketchViewModel - Cannot overwrite symbol

NicolasGIS · ‎06-09-2019

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.ht...

Am I doing something wrong or is it a bug ?

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

Thanks

RobertScheitlin__GISP · ‎06-11-2019

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎06-10-2019

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

NicolasGIS · ‎06-10-2019

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 !

RobertScheitlin__GISP · ‎06-11-2019

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

NicolasGIS · ‎06-13-2019

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 !

DavidWilson3 · ‎06-13-2019

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

NicolasGIS · ‎06-13-2019

Yes, it is what I am using thanks !