feat: allow users to select features programmatically (#202)

development/src/index.ts

@@ -301,6 +301,31 @@ const example = {
 			draw.start();
 
 			addModeChangeHandler(draw, currentSelected);
+
+			draw.addFeatures([
+				{
+					id: "9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1",
+					type: "Feature",
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[-10.882644653, 50.185252473],
+								[-13.109436035, 19.597312986],
+								[39.221878052, 20.101075197],
+								[37.385101318, 57.384672869],
+								[4.678115845, 55.825201858],
+								[-10.882644653, 50.185252473],
+							],
+						],
+					},
+					properties: {
+						mode: "polygon",
+					},
+				},
+			]);
+
+			draw.selectFeature("9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1");
 		});
 		this.initialised.push("maplibre");
 	},
@@ -351,6 +376,31 @@ const example = {
 
 			addModeChangeHandler(draw, currentSelected);
 
+			draw.addFeatures([
+				{
+					id: "9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1",
+					type: "Feature",
+					geometry: {
+						type: "Polygon",
+						coordinates: [
+							[
+								[-10.882644653, 50.185252473],
+								[-13.109436035, 19.597312986],
+								[39.221878052, 20.101075197],
+								[37.385101318, 57.384672869],
+								[4.678115845, 55.825201858],
+								[-10.882644653, 50.185252473],
+							],
+						],
+					},
+					properties: {
+						mode: "polygon",
+					},
+				},
+			]);
+
+			draw.selectFeature("9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1");
+
 			this.initialised.push("openlayers");
 		});
 	},
@@ -401,8 +451,35 @@ const example = {
 					// we ould ned to do them in here
 					this.initialised.push("google");
 					addModeChangeHandler(draw, currentSelected);
+
+					draw.addFeatures([
+						{
+							id: "9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1",
+							type: "Feature",
+							geometry: {
+								type: "Polygon",
+								coordinates: [
+									[
+										[-10.882644653, 50.185252473],
+										[-13.109436035, 19.597312986],
+										[39.221878052, 20.101075197],
+										[37.385101318, 57.384672869],
+										[4.678115845, 55.825201858],
+										[-10.882644653, 50.185252473],
+									],
+								],
+							},
+							properties: {
+								mode: "polygon",
+							},
+						},
+					]);
+
+					draw.selectFeature("9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1");
 				});
 			});
+
+			this.initialised.push("google");
 		});
 	},
 	initArcGISMapsSDK(id: string) {

guides/4.MODES.md

@@ -289,6 +289,50 @@ map.on('click', (event) => {
 })
 ```
 
+### Selecting and Deselecting Features Programmatically
+
+It is possible to select and deselect a feature via the draw instance, which uses the provided select mode under the hood. Here is an example of how you can use the draw instance methods to perform selection and deselection.
+
+```typescript
+  const draw = new TerraDraw({
+    adapter,
+    modes: [
+      new TerraDrawPointMode(),
+      new TerraDrawSelectMode({
+        flags: {
+          point: {
+            feature: { draggable: true },
+          },
+        },
+      }),
+    ],
+  });
+
+  draw.start();
+
+  // A feature programmatically
+  draw.addFeatures([
+    {
+      id: "f8e5a38d-ecfa-4294-8461-d9cff0e0d7f8",
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [-25.431289673, 34.355907891],
+      },
+      properties: {
+        mode: "point",
+      },
+    },
+  ]);
+
+  // Select a given feature
+  draw.selectFeature("f8e5a38d-ecfa-4294-8461-d9cff0e0d7f8");
+
+  // Deslect the given feature
+  draw.deselectFeature("f8e5a38d-ecfa-4294-8461-d9cff0e0d7f8");
+
+```
+
 
 ### Render Mode
 

src/adapters/google-maps.adapter.ts

@@ -115,6 +115,8 @@ export class TerraDrawGoogleMapsAdapter extends TerraDrawBaseAdapter {
 		super.unregister();
 		this._clickEventListener?.remove();
 		this._mouseMoveEventListener?.remove();
+		this._overlay?.setMap(null);
+		this._overlay = undefined;
 	}
 
 	/**
@@ -143,7 +145,6 @@ export class TerraDrawGoogleMapsAdapter extends TerraDrawBaseAdapter {
 		const screenCoord = new this._lib.Point(offsetX, offsetY);
 
 		const projection = this._overlay.getProjection();
-
 		if (!projection) {
 			return null;
 		}

src/adapters/mapbox-gl.adapter.ts

@@ -374,7 +374,10 @@ export class TerraDrawMapboxGLAdapter extends TerraDrawBaseAdapter {
 			const { points, linestrings, polygons } = geometryFeatures;
 
 			if (!this._rendered) {
-				this._addGeoJSONLayer<Point>("Point", points as Feature<Point>[]);
+				const pointId = this._addGeoJSONLayer<Point>(
+					"Point",
+					points as Feature<Point>[],
+				);
 				this._addGeoJSONLayer<LineString>(
 					"LineString",
 					linestrings as Feature<LineString>[],
@@ -384,6 +387,9 @@ export class TerraDrawMapboxGLAdapter extends TerraDrawBaseAdapter {
 					polygons as Feature<Polygon>[],
 				);
 				this._rendered = true;
+
+				// Ensure selection/mid points are rendered on top
+				pointId && this._map.moveLayer(pointId);
 			} else {
 				// If deletion occured we always have to update all layers
 				// as we don't know the type (TODO: perhaps we could pass that back?)

src/modes/base.mode.ts

@@ -202,3 +202,12 @@ export abstract class TerraDrawBaseDrawMode<T extends CustomStyling> {
 		}
 	}
 }
+
+export abstract class TerraDrawBaseSelectMode<
+	T extends CustomStyling,
+> extends TerraDrawBaseDrawMode<T> {
+	public type = ModeTypes.Select;
+
+	public abstract selectFeature(featureId: FeatureId): void;
+	public abstract deselectFeature(featureId: FeatureId): void;
+}