Maps4HTML · Malvoz · Jul 30, 2021 · Jul 22, 2021 · Jul 22, 2021 · Jul 22, 2021
diff --git a/docs/api/custom-projections.md b/docs/api/custom-projections.md
@@ -13,42 +13,41 @@ The `<mapml-viewer>` and `<map is="web-map">` custom elements provide the custom
 For example:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-   <head>
-     <meta charset="utf-8" >
-     <title>Example Custom Projection</title>
-     <meta name="viewport" content="width=device-width, initial-scale=1">
-     <script type="module" src="web-map/mapml-viewer.js"></script>
-     <script type="module">
-       let customProjectionDefinition = `{
-          "projection": "ATLAS_POLAR_MAP",
-          "proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
-          "origin" : [-20015200,20015200],
-          "resolutions" :  [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
-          "bounds" : [[4979939,-4846977],[-5139071,3980038]],
-          "tilesize" : 256
-        }`;
-      let map = document.querySelector("mapml-viewer");
-      let cProjection = map.defineCustomProjection(customProjectionDefinition);    
-      map.projection = cProjection;
-    </script>
-   </head>
-   <body>
-  <body>
-    <mapml-viewer projection="ATLAS_POLAR_MAP" zoom="2" lat="83.48919" lon="-87.7687" controls>
-      <layer- label="Atlas of Canada Polar Wall Map" checked>
-        <link rel="license" title="Canadian Federal Geospatial Platform" href="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/">
-        <extent units="ATLAS_POLAR_MAP">
-          <input type="zoom" name="z" min="0" max="6" value="6" >
-          <input type="location" name="x" axis="column" units="tilematrix" min="116" max="186">
-          <input type="location" name="y" axis="row" units="tilematrix" min="125" max="184">
-          <link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/tile/{z}/{y}/{x}/">
-          <link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN_A/MapServer/tile/{z}/{y}/{x}/">
-        </extent>
-      </layer->
-    </mapml-viewer>
-  </body>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Example Custom Projection</title>
+  <script type="module" src="web-map/mapml-viewer.js"></script>
+  <script type="module">
+    let customProjectionDefinition = `{
+      "projection": "ATLAS_POLAR_MAP",
+      "proj4string" : "+proj=aeqd +lat_0=90 +lon_0=-90 +x_0=0 +y_0=0 +ellps=sphere +units=m +no_defs +type=crs",
+      "origin" : [-20015200,20015200],
+      "resolutions" :  [33073,16536.5,8268.246,4134.123,2067.061,1033.531,516.765],
+      "bounds" : [[4979939,-4846977],[-5139071,3980038]],
+      "tilesize" : 256
+      }`;
+    let map = document.querySelector("mapml-viewer");
+    let cProjection = map.defineCustomProjection(customProjectionDefinition);    
+    map.projection = cProjection;
+  </script>
+</head>
+<body>
+  <mapml-viewer projection="ATLAS_POLAR_MAP" zoom="2" lat="83.48919" lon="-87.7687" controls>
+    <layer- label="Atlas of Canada Polar Wall Map" checked>
+    <link rel="license" title="Canadian Federal Geospatial Platform" href="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/">
+      <extent units="ATLAS_POLAR_MAP">
+        <input type="zoom" name="z" min="0" max="6" value="6" >
+        <input type="location" name="x" axis="column" units="tilematrix" min="116" max="186">
+        <input type="location" name="y" axis="row" units="tilematrix" min="125" max="184">
+        <link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN/MapServer/tile/{z}/{y}/{x}/">
+        <link rel="tile" tref="https://geoappext.nrcan.gc.ca/arcgis/rest/services/FGP/NCR_RCN_A/MapServer/tile/{z}/{y}/{x}/">
+      </extent>
+    </layer->
+  </mapml-viewer>
+</body>
 </html>
 ```
 

diff --git a/docs/api/mapml-viewer-api.md b/docs/api/mapml-viewer-api.md
@@ -28,7 +28,7 @@ the viewer through JavaScript.
 | Method                   	| Functionality                                                        	|
 |--------------------------	|----------------------------------------------------------------------	|
 | [back()](#back)                   	| Navigates back in the map's panning history.                         	|
-| defineCustomProjection() 	| Visit [this](custom-projections) for more information.                                       	|
+| defineCustomProjection() 	| Visit the [Custom Projections API](custom-projections) for more information.                                       	|
 | [forward()](#forward)                	| Navigates forward in the map's panning history.                      	|
 | [reload()](#reload)                 	| Clear the map's panning history and return to the starting location. 	|
 | [toggleDebug()](#toggledebug)            	| Toggle the debug functionality of the map.                           	|

diff --git a/docs/installation.md b/docs/installation.md
@@ -3,14 +3,16 @@ id: installation
 title: Installation
 ---
 
-### Download `<mapml-viewer>` Suite
+## Download `<mapml-viewer>` Suite
 
 | Version | Description                                 |
 |---------|---------------------------------------------|
-| [master](https://github.com/Maps4HTML/Web-Map-Custom-Element/archive/master.zip)  | Latest version developed on `master` branch, needs to be built, steps can be found [here](/web-map-doc/docs/installation#clone-mapml-viewer-repository) |
+| [master](https://github.com/Maps4HTML/Web-Map-Custom-Element/archive/master.zip)  | Latest version developed on `master` branch, needs to be built, using the [steps to clone the repository](/web-map-doc/docs/installation#clone-mapml-viewer-repository) |
 | [v0.8.0](https://github.com/Maps4HTML/Web-Map-Custom-Element/archive/v0.8.0.zip)  | Latest zip release                          |
 
-#### Using a Downloaded Version of `<mapml-viewer>` Suite
+### Using a Downloaded Version
+
+#### Extract the zip file
 
 Extract the zip file downloaded from the links above, in there you will find many files, the following are needed for full functionality:
 
@@ -26,21 +28,21 @@ Extract the zip file downloaded from the links above, in there you will find man
 - proj4-src.js
 - proj4leaflet.js
 
-#### Adding Script To Webpage
+#### Add the Script to a Web page
 
 Copy/move these files to your webpage's directory and add the following to the `<head>` of your HTML code:
 
 ```html
-  <script type="module" src="path/to/mapml-viewer.js"></script>
+<script type="module" src="path/to/mapml-viewer.js"></script>
 ```
 
-You can now use `<mapml-viewer>`, `<layer>` and the other elements that come in the `<mapml-viewer>` element suite on your webpages.
+You can now use `<mapml-viewer>`, `<layer->` and the other elements that come in the `<mapml-viewer>` element suite on your webpages.
 
-### Clone `<mapml-viewer>` Repository
+## Clone `<mapml-viewer>` Repository
 
 An alternative to downloading the .zip file is to clone the github repository. This option allows you to make any modifications and view the source code more easily.
 
-#### Requreiments
+### Requirements
 
 - [Node.js](https://nodejs.org/en/download/)
 
@@ -57,4 +59,5 @@ npm install -g grunt-cli  #installs grunt command line tool
 grunt clean copy rollup   #builds mapml
 ```
 
-After the build is complete a dist folder will be created with the contents. Follow the steps [here](/web-map-doc/docs/installation#using-a-downloaded-version-of-mapml-viewer-suite) on how to use the contents.
+After the build is complete a `dist` folder will be created with the contents.
+See [Add the Script to a Web page](/web-map-doc/docs/installation#add-the-script-to-a-web-page) on how to use the contents.
diff --git a/docs/intro.md b/docs/intro.md
@@ -10,9 +10,9 @@ For example, markup such as this:
 
 ```html
 <mapml-viewer projection="CBMTILE" zoom="3" lat="62.7" lon="-90.3" controls>
-    <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
-    <layer- label="Restaurants" src="demo/restaurants.mapml" checked></layer->
-    <layer- label="Canada's Provinces and Territories" src="demo/canada.mapml" checked></layer->
+  <layer- label="CBMT" src="https://geogratis.gc.ca/mapml/en/cbmtile/cbmt/" checked></layer->
+  <layer- label="Restaurants" src="demo/restaurants.mapml" checked></layer->
+  <layer- label="Canada's Provinces and Territories" src="demo/canada.mapml" checked></layer->
 </mapml-viewer>
 ```
 

diff --git a/docs/layers/static-features.md b/docs/layers/static-features.md
@@ -24,7 +24,6 @@ as you zoom in and out without distortion.
     </geometry>
   </feature>
 </layer->
-
 ```
 
 ## Associated Elements
@@ -62,7 +61,7 @@ This element contains the different points, lines and polygons that will be draw
 
 You can also provide a set of elements to further define the static feature layer. This is the list of available additions with examples.
 
-#### `<link rel="license">`
+### `<link rel="license">`
 
 Sets the attribution link of the layer. Example:
 
@@ -72,7 +71,7 @@ Sets the attribution link of the layer. Example:
 
 ---
 
-#### `<meta name="zoom">`
+### `<meta name="zoom">`
 
 Sets the native minimum and maximum [native zoom](http://example.org/). It also allows you to set a value, this is the default zoom of all features in the case the `<feature>` is missing a zoom attribute.
 
@@ -82,7 +81,7 @@ Sets the native minimum and maximum [native zoom](http://example.org/). It also
 
 ---
 
-#### `<meta name="projection">`
+### `<meta name="projection">`
 
 Sets the [projection](http://example.org/) of the layer. 
 
@@ -92,7 +91,7 @@ Sets the [projection](http://example.org/) of the layer.
 
 ---
 
-#### `<meta name="cs">`
+### `<meta name="cs">`
 
 Sets the default [coordinate system](http://example.org/) of the layer. If a feature is missing the cs attribute, it will default to this, and if this is missing it will default to gcrs.
 
@@ -102,7 +101,7 @@ Sets the default [coordinate system](http://example.org/) of the layer. If a fea
 
 ---
 
-#### `<meta name="extent">`
+### `<meta name="extent">`
 
 Sets the [extent](http://example.org/) of the layer.
 

diff --git a/docs/layers/static-tiles.md b/docs/layers/static-tiles.md
@@ -39,7 +39,7 @@ Add an image file to your project directory. Now you can access this image in Ma
 
 You can also provide a set of elements to further define the static tile layer. This is the list of available additions with examples.
 
-#### `<link rel="license">` 
+### `<link rel="license">` 
 
 Sets the attribution link of the layer. Example:
 
@@ -49,7 +49,7 @@ Sets the attribution link of the layer. Example:
 
 ---
 
-#### `<meta name="zoom">` 
+### `<meta name="zoom">` 
 
 Sets the native minimum and maximum [native zoom](http://example.org/).
 
@@ -59,7 +59,7 @@ Sets the native minimum and maximum [native zoom](http://example.org/).
 
 ---
 
-#### `<meta name="projection">` 
+### `<meta name="projection">` 
 
 Sets the [projection](http://example.org/) of the layer. 
 

diff --git a/docs/layers/templated-features.md b/docs/layers/templated-features.md
@@ -78,7 +78,7 @@ In this section, we will learn how to create a templated feature layer. A templa
 
 You can also provide a set of elements to further define the templated feature layer. This is the list of available additions with examples.
 
-#### `<meta name="zoom">`
+### `<meta name="zoom">`
 Sets the zoom range of the layer. The layer will make requests from zoom levels 1 to 5 in the example below.
 
 ```html
@@ -87,6 +87,8 @@ Sets the zoom range of the layer. The layer will make requests from zoom levels
 
 ---
 
+## Full Examples
+
 ```html
 <mapml-viewer projection="CBMTILE" zoom="3" lat="45.5052040" lon="-75.2202344" controls>
   <layer- label="Alabama" checked>

diff --git a/docs/layers/templated-images.md b/docs/layers/templated-images.md
@@ -80,7 +80,7 @@ In this section, we will learn how to create a templated image layer. A template
 
 You can also provide a set of elements to further define the templated tile layer. This is the list of available additions with examples.
 
-#### `<meta name="zoom">`
+### `<meta name="zoom">`
 Sets the zoom range of the layer, in the following example the user can zoom from zoom level 1 to 5. 
 
 ```html

diff --git a/docs/layers/templated-tiles.md b/docs/layers/templated-tiles.md
@@ -72,7 +72,7 @@ In this section, we will learn how to create a templated tile layer. A templated
 
 You can also provide a set of elements to further define the templated tile layer. This is the list of available additions with examples.
 
-#### `<meta name="zoom">`
+### `<meta name="zoom">`
 Sets the native minimum and maximum [native zoom](http://example.org/). It also allows you to set a value, this is the default zoom of all features in the case the `<feature>` is missing a zoom attribute.
 
 ```html

diff --git a/docs/maps/mapml-viewer.md b/docs/maps/mapml-viewer.md
@@ -9,19 +9,25 @@ slug: /maps/mapml-viewer
 The `<mapml-viewer>` element is the main element you can use to put a custom Web map on your page.  To create a (really) simple Web map, you might use it like this:
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-   <head>
-     <meta charset="utf-8" >
-     <title>A Simple Web Map[tm]</title>
-     <meta name="viewport" content="width=device-width, initial-scale=1">
-     <script type="module" src="web-map/mapml-viewer.js"></script>
-   </head>
-   <body>
-    <mapml-viewer projection="OSMTILE" zoom="0" lat="0.0" lon="0.0" controls>
-        <layer- label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></layer->
-    </mapml-viewer>
-   </body>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>A Simple Web Map[tm]</title>
+  <script type="module" src="web-map/mapml-viewer.js"></script>
+  <style>
+    html, body {
+    height: 100%; /* These styles are required if you wish to use a % based
+                     height value on the mapml-viewer element. */
+    }
+  </style>
+</head>
+<body>
+  <mapml-viewer projection="OSMTILE" zoom="0" lat="0.0" lon="0.0" controls>
+    <layer- label="OpenStreetMap" src="https://geogratis.gc.ca/mapml/en/osmtile/osm/" checked></layer->
+  </mapml-viewer>
+</body>
 </html>    
 ```
 Note that for the above example to run properly on your own site, you need to get a built copy of the `<mapml-viewer>` project in your site's folder. In the example, the `<mapml-viewer>` files are copied into the folder named "web-map" in your site root folder. Your own site's path to these files will depend on how you structure your folders.
@@ -34,6 +40,7 @@ The `<mapml-viewer>` element has several attributes to control the presentation
 
 
 `projection` - an enumerated attribute. Case-sensitive values are: "`OSMTILE`", "`WGS84`", "`CBMTILE`" and "`APSTILE`".  
+The default projection is `OSMTILE`.
 
   - `OSMTILE` corresponds to the widely-used "Web Mercator" projected coordinate reference system, implying a "tile pyramid" zoom range from 0 to 23 (minimum tile size ~2.4m).
 

diff --git a/docs/maps/web-map.md b/docs/maps/web-map.md
@@ -12,28 +12,29 @@ The web-map custom element suite provides a set of proof-of-concept "[customized
 
 :::caution
 
-Note that because not all modern Web browsers implement HTML's customized built-in elements, it is not recommended to use this proof-of-concept on a public Web site, as end-user confusion may be the result.
+Note that because [not all modern Web browsers implement HTML's customized built-in elements](https://caniuse.com/mdn-api_customelementregistry_builtin), it is not recommended to use this proof-of-concept on a public Web site, as end-user confusion may be the result.
 
+Additionally, customized built-in elements are not accessible to screen reader users in some browsers due to a [Chromium bug](https://bugs.chromium.org/p/chromium/issues/detail?id=1208405).
 :::
 
 The following markup may work on Chrome and Firefox, although it may take some fine tuning:
 
 ```html
 <img usemap="#mymap" src="../map1.png" width="700" height="400" alt="Map area">
 <map name="mymap" is="web-map" zoom="17" lat="45.398043" lon="-75.70683" controls>
-    <layer- id="osm" src="https://geogratis.gc.ca/mapml/osmtile/osm/" label="Open Street Map" checked></layer->
-    <layer- id="marker" label="Marker layer" src="../marker.mapml"></layer->
-    <area is="map-area" href='http://example.com/marker/' alt="rectangle" coords="255,145,275,190" shape="rect">
-    <area is="map-area" id="donut" alt="Circle" href='http://example.com/circle/' coords="250,250,25" shape="circle">
-    <area is="map-area" id="hole" coords="250,250,7" shape="circle">
-    <area is="map-area" id="rect" href='http://example.com/rectangle/' alt="Rectangle" coords="345,290,415,320" shape="rect">
-    <area is="map-area" id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly">
+  <layer- id="osm" src="https://geogratis.gc.ca/mapml/osmtile/osm/" label="Open Street Map" checked></layer->
+  <layer- id="marker" label="Marker layer" src="../marker.mapml"></layer->
+  <area is="map-area" href='http://example.com/marker/' alt="rectangle" coords="255,145,275,190" shape="rect">
+  <area is="map-area" id="donut" alt="Circle" href='http://example.com/circle/' coords="250,250,25" shape="circle">
+  <area is="map-area" id="hole" coords="250,250,7" shape="circle">
+  <area is="map-area" id="rect" href='http://example.com/rectangle/' alt="Rectangle" coords="345,290,415,320" shape="rect">
+  <area is="map-area" id="poly" href='http://example.com/polygon/' alt="Polygon" coords="392,116,430,100,441,128,405,145" shape="poly">
 </map>
 ```
 
 To experiment with the `web-map` and `map-area` custom elements, you should link your `<script type="module" src="web-map.js"></script>` to the `web-map.js` file that is built by the web-map custom element suite build process.
 
 In theory, if you take steps to provde the fallback markup, a normal (progressive) Web map experience will be had by most users, while those using an older browser or perhaps even Safari may get the "fallback" client side image map experience.  
 
-An older example of such a Web map may be found in [this](https://maps4html.org/Web-Map-Custom-Element/blog/progressive-web-maps.html) blog post.  Please raise an [issue](https://github.com/Maps4HTML/Web-Map-Custom-Element/issues) if you have comments about how that example works for you.
+An older example of such a Web map may be found in the [blog post on Progressive Web Maps](https://maps4html.org/Web-Map-Custom-Element/blog/progressive-web-maps.html).  Please raise an [issue](https://github.com/Maps4HTML/Web-Map-Custom-Element/issues) if you have comments about how that example works for you.