Community

SketchViewModel.pointSymbol support for PictureMarkerSymbol

691
2
08-23-2019 09:59 AM
Alexander__Contractor_Schrimpf
by
New Contributor
‎08-23-2019 09:59 AM

I have a feature layer that uses PictureMarkerSymbols as the map markers. When I move the feature I can only get the SketchViewModel.pointSymbol to be either SimpleMarkerSymbol or PointSymbol3D as described in the api documentation here:  https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Sketch-SketchViewModel.ht...

Is there a technical limitation for not being able to use PictureMarkerSymbols? Is there any way I could extend arcgis js api's current functionality to allow this?

2 Replies
UndralBatsukh
by Esri Regular Contributor
Esri Regular Contributor
‎08-26-2019 11:02 AM

Hi there, 

You cannot change the update graphic for SketchViewModel at this time. It is on our to do list. However, I do not have a timeline for this. 

-Undral

0 Kudos
Alexander__Contractor_Schrimpf
by
New Contributor
‎08-26-2019 12:17 PM

In case anyone else needs this functionality this hack somewhat works...

   const editingLayer = new GraphicsLayer();

    const map = new Map({
      basemap: new Basemap({
        baseLayers: [baseMapLayer]
      }),
      layers: [featureLayer, editingLayer]
    });

    const view = new MapView({
      map,
      container: this.$refs.map
    });

    const sketchViewModel = new SketchViewModel({
      layer: editingLayer,
      view,
      updateOnGraphicClick: true
    });

    sketchViewModel.on("update", async event => {
      if (event.state === "start") {
        await Promise.all(
          event.graphics.map(async (graphic: esri.Graphic) => {
            const [PictureMarkerSymbol] = (await loadModules([
              "esri/symbols/PictureMarkerSymbol"
            ])) as [esri.PictureMarkerSymbolConstructor];

            graphic.symbol = new PictureMarkerSymbol({
              url: require(`../assets/map_icons/${-1}_${
                graphic.attributes.FCODE
              }_solid_black.svg`),
              height: 23,
              width: 23
            });
          })
        );
      }
    });

    view.on("click", event => {
      if (sketchViewModel.state === "active") {
        return;
      }
      view.hitTest(event).then(({ results }) => {
        results
          .filter(x => x.graphic.layer === featureLayer)
          .forEach(async result => {
            editingLayer.add(result.graphic);
            await sketchViewModel.update(result.graphic, {
              tool: "move",
              toggleToolOnClick: false
            });
          });
      });
    });