diff --git a/content/map-boilerplate.md b/content/map-boilerplate.md
new file mode 100644
index 0000000..949429b
--- /dev/null
+++ b/content/map-boilerplate.md
@@ -0,0 +1,104 @@
+---
+layout: default
+title: 3. Map Boilerplate
+parent: Hands On
+nav_order: 3
+---
+
+# Map Boilerplate
+A boilerplate is a chunk of code that can be used as-is in multiple contexts and often provides the basis for more advanced operations. The boilerplate code for this workshop renders a basemap which we will tinker with and add to in order to build an dynamic cluster map. It’s important that you don’t lose any of this code unless directed, and that it remains in its original structure and arrangement.
+
+
+## Boilerplate Code
+Now that we've seen what the boilerplate basemap for this workshop looks like, let’s explore the code behind it. Return to VS Code and double click `boilerplate.html ` in the Explorer panel to open it. The contents of your boilerplate should look like this:
+
+
+```html
+
+
+ Leaflet Boilerplate
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+If you installed the Live Server extension to Visual Studio Code, in the blue ribbon at the bottom of your code editor there should be an option to “Go Live.” Click “Go Live” to launch a local server and watch your map automatically update in a web browser. This alleviates the need to constantly refresh your browser each time you make a change.
+
+
+## Anatomy of an HTML document
+The HTML document is split into two main sections: the head and the body. Each of these sections are contained within opening < tags > and closing . Notice that because the document is in HTML format, everything is contained within the html tag.
+
+```html
+
+
+ The stuff inside the head is the metadata for your browser about the
+ document. Inside the head are things like the document’s title - in this
+ case “Boilerplate Code” - so that it can used for things like being
+ displayed in your browser’s tab. Additionally, there are links to the source
+ code for Leaflet's JavaScript and CSS rules. If you copy either one of those
+ links and paste it in a new tab in your browser, you’ll see a lot of raw
+ code. By linking to the source, we avoid having to carry this text into our
+ own document, while also being assured that the code we’re using is
+ up-to-date.
+
+
+
+ The body contains what you see formatted in your browser. In the code above,
+ the body contains directions for rendering and displaying an interactive
+ map centered on Vancouver.
+
+
+ This element states how tall and how wide the map should be on the screen.
+