Merge pull request #87 from JamesLMilner/script-tag

chore: document how to use terra draw with a script tag
JamesLMilner · Sep 19, 2023 · b7c4ab9 · b7c4ab9
2 parents 3e5a725 + 1e069b4
commit b7c4ab9
Showing 1 changed file with 20 additions and 1 deletion.
diff --git a/guides/GETTING_STARTED.md b/guides/GETTING_STARTED.md
@@ -13,11 +13,30 @@ npm install terra-draw
 Be aware Terra Draw is currently in alpha, the initial API is still being finalised. It is strongly advised to pin your installation to a specific version i.e. not using carat, asterix or tilde for versions but giving a version explicitly in your `package.json`
 
 ```
-  "terra-draw": "0.0.1-alpha.22"
+  "terra-draw": "0.0.1-alpha.47"
 ```
 
 Once terra-draw is out of alpha this suggestion will be removed as we will aim to move to semantic versioning.
 
+## Script Tag
+
+Some people may want to experiment with using Terra Draw without a build step. To do this you can use the UMD bundle that is put onto npm via a CDN like unpkg. For example if we were using Terra Draw with MapLibre we might do something like this in our `<head>` tag:
+
+```html
+    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
+    <script src="https://unpkg.com/[email protected]/dist/terra-draw.umd.js"></script>
+    <link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
+```
+
+Later on in our JavaScript code we can access the global `terraDraw` like so:
+
+```javascript
+    const td = new terraDraw.TerraDraw({
+		adapter: new terraDraw.TerraDrawMapLibreGLAdapter({ map }),
+		modes: [new terraDraw.TerraDrawRectangleMode()]
+	});
+```
+
 ## API Docs
 
 You can find the full autogenerated [API docs on the terra draw website](https://terradraw.io/#/api)