4

docs/assets/main.less

@@ -33,6 +33,7 @@ body {
       border-radius: 3px;
       background: @waymark-grey-dark;
       color: @waymark-grey-light;
+      font-size: 16px;
 
       option {
         background: @waymark-grey-dark;

docs/content/1.index.md

@@ -1,5 +1,5 @@
 ---
-title: Start
+title: Start Here
 description: Create, Edit and Share Meaningful Maps
 ---
 
@@ -9,7 +9,7 @@ Waymark JS is a JavaScript library for creating and sharing geographical informa
 
 Powered by [Leaflet JS](https://leafletjs.com/) with [OpenStreetMap](https://www.openstreetmap.org/) as the default Basemap. Waymark JS stores data in GeoJSON format, with support for GPX and KML files.
 
-> Waymark JS is completely free, [Open-Source](https://github.com/OpenGIS/Waymark-JS) and requries **no API keys**! ❤️
+> Waymark JS is completely free, [Open-Source](https://github.com/OpenGIS/Waymark-JS) and requires **no API key**! ❤️
 
 ## Quick Start
 

docs/content/3.viewer.md

@@ -320,7 +320,7 @@ Here we are creating a new Viewer Instance initialised with some [Types](map#typ
         },
       });
 
-      // Load GeoJSON asycnhronously from file
+      // Load GeoJSON asynchronously from file
       const geojson = fetch("./assets/geo/route.geojson")
         .then((response) => response.json())
         .then((data) => {

docs/content/5.customise.md

@@ -9,15 +9,12 @@ Watmark JS was designed to be customisable and flexible.
 
 In addition to the available options, you can customise Waymark JS using CSS and JavaScript.
 
-Because Waymark JS utilises [jQuery](https://api.jquery.com/)
-) and [Leaflet](https://leafletjs.com/reference.html), you can also use these APIs to interact with the Map and its elements.
-
 > [!TIP]
-> The Map above has lots of (Patriotic) customisations to help illustrate some of the concepts outlined here. Be sure to view the [source code](/examples/editor/custom.html) to see how it was created.
+> The Map above has lots of (Patriotic) customisations to help illustrate some of the concepts outlined here. Be sure to view the [source code](/examples/editor/custom.html).
 
 ## Options
 
-Waymark has lota of options so you can create custom Maps with Overlays to suit your needs.
+Waymark has lots of options so you can create custom Maps with Overlays to suit your needs.
 
 Be sure to check out the full list of:
 
@@ -38,7 +35,7 @@ For example, the HTML for a "Pub" Marker looks like this:
 >
   <div class="waymark-marker-background" style="background:#70af00;"></div>
   <div style="color:#ffffff;" class="waymark-marker-icon waymark-icon-text">
-    🇨🇦Pub
+    🍻
   </div>
 </div>
 ```
@@ -62,11 +59,11 @@ We can use the `.waymark-marker-pub` class to target the Pub Marker, and the `.w
 
 ## Interaction
 
-### Leaflet JS
+Once the Map is initialised using the `init` method, you can interact with it using JavaScript.
 
-Waymark JS uses [Leaflet](https://leafletjs.com/reference.html) to create the Map and its elements. You can use the Leaflet API to interact with the Map and its elements.
+Because Waymark JS utilises [jQuery](https://api.jquery.com/) and [Leaflet](https://leafletjs.com/reference.html), you can also use these APIs to interact with the Map and its elements.
 
-The Leaflet Map object is available through the `map` property on the `Waymark_Map` Instance. For example, to add an even handler tofire each time an Overlay popup is displayed:
+The Leaflet Map object is available through the `map` property on the `Waymark_Map` Instance. For example, to add an event handler to execute each time an Overlay popup is displayed:
 
 ```javascript
 // Once the map is initialised, i.e. after
@@ -77,12 +74,12 @@ const map = editor.map;
 
 // Leaflet Popup
 map.on("popupopen", function (e) {
-  // Remove all active classes
-  jQuery(".waymark-marker").removeClass("active");
-
   // Get the layer from Leaflet
   const layer = e.popup._source;
 
+  // Remove all active classes
+  jQuery(".waymark-marker").removeClass("active");
+
   // Get the container with jQuery
   const marker = jQuery(layer._icon);
 
@@ -91,7 +88,7 @@ map.on("popupopen", function (e) {
 });
 ```
 
-### jQuery
+Using jQuery, we can also interact with the Map and its elements. For example, to add a class to the Map container and create a toggle button:
 
 ```javascript
 // Get the container with jQuery
@@ -114,7 +111,3 @@ map_container.append(toggle_button);
 
 > [!TIP]
 > Check out the Waymark WordPress plugin [source code](https://github.com/OpenGIS/Waymark/tree/master/assets/js) for an example of integrating Waymark JS with a WordPress.
-
-```
-
-```

readme.md

@@ -8,12 +8,19 @@ Originally developed for the [Waymark WordPress plugin](https://wordpress.org/pl
 
 Powered by [Leaflet JS](https://leafletjs.com/) with [OpenStreetMap](https://www.openstreetmap.org/) as the default Basemap. Waymark JS stores data in GeoJSON format, with support for GPX and KML files.
 
-> Waymark JS is completely free, [Open-Source](https://github.com/OpenGIS/Waymark-JS) and requries **no API keys**! ❤️
+> Waymark JS is completely free, [Open-Source](https://github.com/OpenGIS/Waymark-JS) and requires **no API keys**! ❤️
+
+## Documentation
+
+Documentation and examples at [waymark.dev/js](https://www.waymark.dev/js)
 
 ## Installation
 
 To use Waymark JS, you will need to include the following assets in your page. Here we are adding them to the `<head>` of the document so they are immediately available to the `<body>`:
 
+> [!IMPORTANT]
+> The `dist/` directory in the [project root](https://github.com/OpenGIS/Waymark-JS) contains the assets ready for _production_ use. The `src/` directory contains the source files for development which can be modified and built using the instructions in the [Development](#development) section below.
+
 ```html
 <!-- jQuery (required) -->
 <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
@@ -28,6 +35,9 @@ To use Waymark JS, you will need to include the following assets in your page. H
 
 ## Quick Start
 
+> [!TIP]
+> View the full documentation and examples at [waymark.dev/js](https://www.waymark.dev/js)
+
 ### Viewer
 
 The following example will display a Map on the page with a single Marker. Once the Marker is clicked, a popup will display with the Marker's title, image and description.
@@ -79,7 +89,7 @@ The following example will display a Map on the page with a single Marker. Once
 
 ### Editor
 
-The following example will display an empty Map Editor on the page, set to an initial location. Any edits made to the Map are converted to GeoJSON and output into the `#waymark-data` textarea.
+The following example will display an empty Map Editor on the page, set to an initial location. Any edits made to the Map are converted to GeoJSON and output into the `<textarea id="waymark-data">` data container.
 
 ```html
 <!doctype html>
@@ -128,7 +138,11 @@ npm install
 grunt
 ```
 
-Pull requests are welcome, however please view the [Roadmap](#roadmap) below to see where the project is heading. For major changes, please open an issue first to discuss what you would like to change :)
+This will run a watch task to rebuild the assets when changes are made to the source files.
+
+Issues / pull requests are [welcome](https://github.com/OpenGIS/Waymark-JS/), however please view the Roadmap below to see where the project is heading.
+
+Documentation and examples at [waymark.dev/js](https://www.waymark.dev/js)
 
 ## Roadmap / To-Do