Change the geometry of Polygon for Rectagle to use CCW ring.

modules/edit-modes/package.json

@@ -71,6 +71,7 @@
     "@turf/transform-scale": ">=4.0.0",
     "@turf/transform-translate": ">=4.0.0",
     "@turf/union": ">=4.0.0",
+    "@turf/rewind": ">=4.0.0",
     "geojson": "0.5.0",
     "lodash.throttle": "^4.1.1",
     "viewport-mercator-project": ">=6.0.0"

modules/edit-modes/src/lib/draw-90degree-polygon-mode.ts

@@ -3,6 +3,7 @@ import bearing from '@turf/bearing';
 import lineIntersect from '@turf/line-intersect';
 import turfDistance from '@turf/distance';
 import { point, lineString as turfLineString } from '@turf/helpers';
+import rewind from '@turf/rewind';
 import {
   generatePointsParallelToLinePoints,
   getPickedEditHandle,
@@ -112,10 +113,10 @@ export class Draw90DegreePolygonMode extends GeoJsonEditMode {
           clickedEditHandle.properties.positionIndexes[1] === polygon.coordinates[0].length - 3)
       ) {
         // They clicked the first or last point (or double-clicked), so complete the polygon
-        const polygonToAdd: Polygon = {
+        const polygonToAdd: Polygon = rewind({
           type: 'Polygon',
           coordinates: this.finalizedCoordinates([...polygon.coordinates[0]]),
-        };
+        });
 
         this.resetClickSequence();
 

modules/edit-modes/src/lib/draw-polygon-by-dragging-mode.ts

@@ -1,4 +1,5 @@
 import throttle from 'lodash.throttle';
+import rewind from '@turf/rewind';
 import {
   ClickEvent,
   StartDraggingEvent,
@@ -39,10 +40,10 @@ export class DrawPolygonByDraggingMode extends DrawPolygonMode {
 
     if (clickSequence.length > 2) {
       // Complete the polygon.
-      const polygonToAdd: Polygon = {
+      const polygonToAdd: Polygon = rewind({
         type: 'Polygon',
         coordinates: [[...clickSequence, clickSequence[0]]],
-      };
+      });
 
       this.resetClickSequence();
 

modules/edit-modes/src/lib/draw-polygon-mode.ts

@@ -1,3 +1,4 @@
+import rewind from '@turf/rewind';
 import { ClickEvent, PointerMoveEvent, ModeProps, GuideFeatureCollection } from '../types';
 import { Polygon, FeatureCollection } from '../geojson-types';
 import { getPickedEditHandle } from '../utils';
@@ -85,10 +86,10 @@ export class DrawPolygonMode extends GeoJsonEditMode {
       // They clicked the first or last point (or double-clicked), so complete the polygon
 
       // Remove the hovered position
-      const polygonToAdd: Polygon = {
+      const polygonToAdd: Polygon = rewind({
         type: 'Polygon',
         coordinates: [[...clickSequence, clickSequence[0]]],
-      };
+      });
 
       this.resetClickSequence();
 

modules/edit-modes/src/lib/draw-rectangle-mode.ts

@@ -1,10 +1,11 @@
 import bboxPolygon from '@turf/bbox-polygon';
+import rewind from '@turf/rewind';
 import { Position, Polygon, FeatureOf } from '../geojson-types';
 import { TwoClickPolygonMode } from './two-click-polygon-mode';
 
 export class DrawRectangleMode extends TwoClickPolygonMode {
   getTwoClickPolygon(coord1: Position, coord2: Position, modeConfig: any): FeatureOf<Polygon> {
-    const rectangle = bboxPolygon([coord1[0], coord1[1], coord2[0], coord2[1]]);
+    const rectangle = rewind(bboxPolygon([coord1[0], coord1[1], coord2[0], coord2[1]]));
     rectangle.properties = rectangle.properties || {};
     rectangle.properties.shape = 'Rectangle';
 

modules/edit-modes/src/lib/draw-rectangle-using-three-points-mode.ts

@@ -1,3 +1,4 @@
+import rewind from '@turf/rewind';
 import { generatePointsParallelToLinePoints } from '../utils';
 import { Position, Polygon, FeatureOf } from '../geojson-types';
 import { ThreeClickPolygonMode } from './three-click-polygon-mode';
@@ -16,7 +17,7 @@ export class DrawRectangleUsingThreePointsMode extends ThreeClickPolygonMode {
       properties: {
         shape: 'Rectangle',
       },
-      geometry: {
+      geometry: rewind({
         type: 'Polygon',
         coordinates: [
           [
@@ -30,7 +31,7 @@ export class DrawRectangleUsingThreePointsMode extends ThreeClickPolygonMode {
             coord1,
           ],
         ],
-      },
+      }),
     };
   }
 }