diff --git a/docs/assets/main.less b/docs/assets/main.less index 3d8cd39..8f0a886 100644 --- a/docs/assets/main.less +++ b/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; diff --git a/docs/content/1.index.md b/docs/content/1.index.md index a5ef25d..f41b1f7 100644 --- a/docs/content/1.index.md +++ b/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 diff --git a/docs/content/3.viewer.md b/docs/content/3.viewer.md index ac1569f..2c8946e 100644 --- a/docs/content/3.viewer.md +++ b/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) => { diff --git a/docs/content/5.customise.md b/docs/content/5.customise.md index 4762621..e0f75a0 100644 --- a/docs/content/5.customise.md +++ b/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: >
- 🇨🇦Pub + 🍻
``` @@ -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. - -``` - -``` diff --git a/readme.md b/readme.md index 25d95be..7cf6275 100644 --- a/readme.md +++ b/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 `` of the document so they are immediately available to the ``: +> [!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 @@ -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 `