Select to view content in your preferred language

How to keep polygon shape on map after completion

155
0
10-04-2024 03:52 PM
TylerClark
New Contributor

I am using the @ArcGIS JS SDK and have a map loading. It has multiple layers and overlaps. Recently, I've added the SketchViewModal to allow users of my application to draw a polygon on the map. This works and users can click on the map and create a polygon. However, once the polygon is completed (a user clicks on a pre-existing point, which closes and completes the shape), the polygon doesn't completely close. It stays incomplete on the map, with the last side waiting to be clicked. However, I can see that the event state is "complete". 

To Recap, the current UX is:

1. Once the polygon is completed, the event stage changes to "complete"

2. The mouse stays with the + icon

3. The polygon gives the impression it is still waiting to be closed

4. All the sides of the polygon sit atop the map except the last side of the polygon that closed (The image below is after completing the polygon, it sits in this state, giving the impression that it is waiting to be completed)

https://ibb.co/Dr98XHh

What I am looking to have happen, is when the user completes the polygon shape: 

1. The completed shape is sitting atop the map

2. The mouse returns back to the default grabber icon

 

Current code: 

        const sketchViewModelInit = new SketchViewModel({
          view: mapView,
          layer: graphicsLayer,
          polygonSymbol: {
            type: 'simple-fill',
            color: [51, 51, 204, 0.9],
            style: 'solid',
            outline: {
              color: 'white',
              width: 1,
            },
          },
          snappingOptions: {
            enabled: true,
            selfEnabled: true,
            featureSources: [{ layer: graphicsLayer, enabled: true }],
          },
        });

        sketchViewModelInit.create('polygon');

        sketchViewModelInit.on('create', (event) => {
          if (event.state === 'complete') {
            const polygon = event.graphic.geometry;

            projection
              .load()
              .then(() => {
                const polygonWGS84 = projection.project(
                  polygon,
                  new SpatialReference({ wkid: 4326 })
                );
                filterListingsWithinPolygon(polygonWGS84);
              })
              .catch((err) => {
                console.error('Error projecting polygon:', err);
              });
          }
        });

 

I think I am really close, just possibly missing a option or something. 

0 Kudos
0 Replies