docs: add better documentation on selecting features

guides/3.MODES.md

@@ -64,6 +64,22 @@ For example, if you draw a polygon using the `TerraDrawPolygonMode` the `mode` p
 > [!NOTE]
 > When [Loading Data](#loading-features) into Terra Draw, the `mode` property is used to determine which Mode to add the Feature to.
 
+### Mode Types
+
+Modes can have one of four types. Drawing modes are associated with drawing new geometries onto the map, select modes are aassociated with selecting existing geometries on the map, static mode is a builtin inert mode that just renders the geometries to the map, and a render mode is a 'view only' mode that is just for rendering geometries to the map.
+
+```typescript
+export enum ModeTypes {
+	Drawing = "drawing",
+	Select = "select",
+	Static = "static",
+	Render = "render",
+}
+```
+
+> [!NOTE]
+> Currently, you may only have one `select` mode instantiated in anyone Terra Draw instance.
+
 ### Drawing Modes
 
 Terra Draw comes with the following built-in Drawing Modes out of the box:
@@ -208,6 +224,51 @@ new TerraDrawSelectMode({
 });
 ```
 
+> [!NOTE]
+> It is possible to create and use your own selection mode if you so wish. You do not have to use the built in select mode (`TerraDrawSelectMode`).
+
+
+#### Getting Selected Features
+
+You can get selected features from the selection mode in one of two ways. The first is to listen for the `select` event:
+
+```typescript
+draw.on('select', (id: string) => {
+  const snapshot = draw.getSnapshot()
+
+	// Search the snapshot for the selected polygon
+	const polygon = snapshot.find((feature) => feature.id === id)
+})
+```
+
+Alternatively, if you need access to the specific mouse/map event alongside the selected geometry you can achieve this in almost all map libraries by creating an event on the map itself object itself like so:
+
+```typescript
+// Register an on click event onto the map itself
+map.on('click', (event) => {
+	const snapshot = draw.getSnapshot()
+
+	// Search the snapshot for the selected polygon
+	const polygon = snapshot.find((feature) => feature.properties.selected === true && feature.geometry.type === 'Polygon')
+
+	// If there is not a selected polygon, don't do anything
+	if (!polygon) {
+		return
+	}
+
+	// Else create or update the popup location to be the cursor position!
+	if (popup) {
+		popup.setLngLat([event.lngLat.lng, event.lngLat.lat])
+	} else {
+		popup = new maplibregl.Popup({ closeOnClick: false })
+			.setLngLat([event.lngLat.lng, event.lngLat.lat])
+			.setHTML('<h1>Example Popup</h1>')
+			.addTo(map);
+	}
+})
+```
+
+
 ### Render Mode
 
 The Render Mode is used to render Features that have been drawn on the map, but are not editable.