docs: expanded guide pages and other small improvements (#123)

* docs: expanded guide pages and other tweaks

This PR includes the following documentation improvements.

Getting Started:
- Added full HTML example for the Script Tag section
- Updated TD unpkg references to latest version ([email protected])
- Updated ML unpkg references to latest version ([email protected]/)

Common Patterns:
- Rewording and formatting of Changing Mode section

Development:
- Improve setup instructions
- Added example .env.example file, updated .gitignore to include

Lots of other minor tweaks and re-formatting :)

* version number tweak

---------

Co-authored-by: Joe Hawes <>

.gitignore

@@ -5,9 +5,9 @@ dist/
 node_modules/
 example/dist/
 example/node_modules/
-example/.env
 ROADMAP.md
 data/
 scratch/
 .idea
-.env
+.env*
+!.env.example

development/.env.example

@@ -0,0 +1,2 @@
+GOOGLE_API_KEY=YOUR_KEY_HERE
+MAPBOX_ACCESS_TOKEN=YOUR_KEY_HERE

development/README.md

@@ -1,10 +1,22 @@
-# Terra Draw Local Example
+# Local Development Example
 
 This example shows how to use Terra Draw with a variety of providers (currently Leaflet, Mapbox GL, Google Maps)
 
+# Installation
+
+
+If you haven't already, you will need to install the dependencies for the root of the project, as well as the dependencies for the `development/` directory:
+
+
+```shell
+npm install
+cd development/
+npm install
+```
+
 # Running Locally
 
-Create a `.env` file with the following variables:
+Create a `.env` file (or rename the included `.env.example`) in the `development/` directory with the following variables:
 
 ```
 GOOGLE_API_KEY=YOUR_KEY_HERE
@@ -13,6 +25,8 @@ MAPBOX_ACCESS_TOKEN=YOUR_ACCESS_TOKEN_HERE
 
 You can then create a watching build that allows you to test out both changes in the example but also the Terra Draw source itself, like so:
 
-`npm run serve`
+```shell
+npm run serve
+```
 
 This will start a hot reloading development server on port 9000 that you can explore via [http://localhost:9000](http://localhost:9000). 

guides/COMMON_PATTERNS.md

@@ -2,19 +2,7 @@
 
 ### Changing Mode
 
-To change mode we need to set the current mode to match the name of the mode we want. You can see the name of the mode
-in each modes 'mode' property in the modes source file. For convenience here are the built in mode names listed out:
-
-- TerraDrawStaticMode - 'static'
-- TerraDrawPolygonMode - 'polygon'
-- TerraDrawPointMode - 'point'
-- TerraDrawCircleMode - 'circle'
-- TerraDrawLineStringMode - 'linestring'
-- TerraDrawSelectMode - 'select'
-- TerraDrawLineStringMode - 'freehand'
-- TerraDraqwGreatCircleMode - 'greatcircle'
-
-We can then create these modes and change to them like so:
+Modes are added to Terra Draw when you instantiate it through the `modes` property like so:
 
 ```typescript
 const draw = new TerraDraw({
@@ -30,14 +18,33 @@ const draw = new TerraDraw({
 });
 
 draw.start();
+```
 
+Once you have created a Terra Draw instance you can change mode by calling the `setMode` method and providing the mode name:
+
+```typescript
 // Change to our TerraDrawPolygonMode instance
 draw.setMode("polygon");
 
 // We can use our custom render mode name to change to it.
 draw.setMode("arbitary");
 ```
 
+The `mode` property represents the mode name and can be found in each modes source file. The available mode names are:
+
+| Class                     | Mode Name       |
+|---------------------------|-----------------|
+| TerraDrawCircleMode       | 'circle'        |
+| TerraDrawLineStringMode   | 'freehand'      |
+| TerraDraqwGreatCircleMode | 'greatcircle'   |
+| TerraDrawLineStringMode   | 'linestring'    |
+| TerraDrawPointMode        | 'point'         |
+| TerraDrawPolygonMode      | 'polygon'       |
+| TerraDrawRectangleMode    | 'rectangle'     |
+| TerraDrawSelectMode       | 'select'        |
+| TerraDrawStaticMode       | 'static'        |
+
+
 ### Loading in External Data
 
 It is common pattern to want to load in data from an external source (GeoJSON file, API call, etc). This can be achieved
@@ -245,4 +252,4 @@ draw.on('deselect', () => {
   // Do something
   //...
 })
-```
+```

guides/DEVELOPMENT.md

@@ -18,7 +18,7 @@ A few things you will need to have installed in order to develop on this project
 - `dist` - the bundled distributed files of the project
 - `docs` - the demo app that is published to GitHub pages
 - `development` - the local development app that is used for developing locally (see below)
-- `common` - code that is used across `development` and `docs` folder`
+- `common` - code that is used across `development` and `docs` folder
 
 ### Technologies Used
 
@@ -43,19 +43,19 @@ Terra Draw uses [jest](https://jestjs.io/) as it's testing framework. You can di
 
 To run the tests as they would run in CI:
 
-```
+```shell
 npm run test
 ```
 
 You can also check the coverage by running:
 
-```
+```shell
 npm run test:coverage
 ```
 
 For local development you may benefit from the `nocheck` option which allows you to avoid running TypeScript type checking when running the tests. This option also only checks files which are explicitly tested (i.e. have a spec file.)
 
-```
+```shell
 npm run test:nocheck
 npm run test:nocheck:coverage
 ```