diff --git a/examples/archive.html b/examples/archive.html
index 6edb788de..399deee74 100644
--- a/examples/archive.html
+++ b/examples/archive.html
@@ -19,51 +19,50 @@
   </head>
 
   <body style="margin:0;">
-    
-    <div class="modal fade" id="welcomeModal" aria-labelledby="exampleModalLabel" tabindex="-1" aria-hidden="true">
-      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
-        <div class="modal-content bg-light">
-          <div class="modal-header d-block">
-            <div class="d-flex justify-content-between align-items-center">
-              <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
-              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+
+  <main>
+      <div class="modal fade" id="welcomeModal" aria-labelledby="exampleModalLabel" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+          <div class="modal-content bg-light">
+            <div class="modal-header d-block">
+              <div class="d-flex justify-content-between align-items-center">
+                <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <p> <small>(while MapKnitter is offline)</small> </p>
+            </div>
+            <div class="modal-body">
+              <p>First, you’ll need to go to <a href="https://archive.org/" target="_blank">archive.org</a>, create an account, and then upload your images.
+                <a href="https://archive.org/embed/help-upload-overview" target="_blank">Watch this helpful video guide.</a>
+              </p>
+              <p>You’ll get an address that looks like this:
+                <a href="https://archive.org/details/texas-barnraising/" target="_blank">
+                  https://archive.org/details/texas-barnraising/
+                </a>
+              </p>
+              <p>Paste it here to begin:</p>
+              <form id="form">
+                <input id="input" type="text" class="form-control" placeholder="https://archive.org/details/..." required>
+                <button type="submit" class="btn btn-primary mt-4 mb-5">Begin</button>
+              </form>
             </div>
-            <p> <small>(while MapKnitter is offline)</small> </p>
-          </div>
-          <div class="modal-body">
-            <p>First, you’ll need to go to <a href="https://archive.org/" target="_blank">archive.org</a>, create an account, and then upload your images.
-              <a href="https://archive.org/embed/help-upload-overview" target="_blank">Watch this helpful video guide.</a>
-            </p>
-            <p>You’ll get an address that looks like this:
-              <a href="https://archive.org/details/texas-barnraising/" target="_blank">
-                https://archive.org/details/texas-barnraising/
-              </a>
-            </p>
-            <p>Paste it here to begin:</p>
-            <form id="form">
-              <input id="input" type="text" class="form-control" placeholder="https://archive.org/details/..." required>
-              <button type="submit" class="btn btn-primary mt-4 mb-5">Begin</button>
-            </form>
           </div>
         </div>
       </div>
-    </div>
-
-    <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
-
-    <div class="offcanvas offcanvas-end" data-bs-backdrop="false" data-bs-keyboard="false" tabindex="1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
-      <div class="offcanvas-header">
-        <h3 id="offcanvasRightLabel">Images</h3>
-        <button type="button" class="btn btn-primary d-sm-none" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
-      </div>
-      <hr>
-      <div class="offcanvas-body">
-        <p id="response" class="mb-5">No link = No images...</p>
-        <div id="imgContainer"></div>
+      <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+      <div class="offcanvas offcanvas-end" data-bs-backdrop="false" data-bs-keyboard="false" tabindex="1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+        <div class="offcanvas-header">
+          <h3 id="offcanvasRightLabel">Images</h3>
+          <button type="button" class="btn btn-primary d-sm-none" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
+        </div>
+        <hr>
+        <div class="offcanvas-body">
+          <p id="response" class="mb-5">No link = No images...</p>
+          <div id="imgContainer"></div>
+        </div>
       </div>
-    </div>
-  </body>
-
+  </main>
+    
   <script>
     let map;
     let welcomeModal = document.getElementById('welcomeModal');
@@ -163,4 +162,7 @@ <h3 id="offcanvasRightLabel">Images</h3>
     });
 
   </script>
+    
+  </body>
 </html>
+
diff --git a/examples/export.html b/examples/export.html
index 816a62601..5f44a83ff 100644
--- a/examples/export.html
+++ b/examples/export.html
@@ -14,13 +14,16 @@
   <script src="../dist/vendor.js"></script>
   <script src="../dist/leaflet.distortableimage.js"></script>
 </head>
-<body style="margin:0;">
 
-  <form id="test_form" >
-    <input type="file" class="ldi" id="inputimage" accept="image/*">
-  </form>
+<body style="margin:0;">
 
-  <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+  <main>
+    <form id="test_form" >
+      <input type="file" class="ldi" id="inputimage" accept="image/*">
+    </form>
+  
+    <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+  </main>
 
   <script>
     let map;
@@ -144,4 +147,6 @@
       });
     })();
   </script>
+    
+</body>
 </html>
diff --git a/examples/index.html b/examples/index.html
index 86e592b46..992286a50 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -19,10 +19,29 @@
     <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
   </head>
   <body style="margin:0;">
-    <form id="test_form">
-      <input type="file" class="ldi" id="inputimage" accept="image/*" />
-    </form>
-    <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+    <main>
+      <form id="test_form">
+        <input type="file" class="ldi" id="inputimage" accept="image/*" />
+      </form>
+  
+      <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+    </main>
+  
+  <script>
+    let map;
+
+    (function() {
+      map = L.map('map').setView([51.505, -0.09], 13);
+      map.addGoogleMutant();
+
+      map.whenReady(function() {
+        img = L.distortableImageOverlay('example.jpg', {
+          selected: true,
+          fullResolutionSrc: 'large.jpg',
+        }).addTo(map);
+      });
+    })();
+  </script>
   </body>
 </html>
 
diff --git a/examples/listeners.html b/examples/listeners.html
index f7570f34c..005aa568c 100644
--- a/examples/listeners.html
+++ b/examples/listeners.html
@@ -1,27 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <title>Leaflet.DistortableImage Example</title>
-    <meta charset="utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"/>
-    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
+<head>
+  <title>Leaflet.DistortableImage Example</title>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no"/>
+  <meta http-equiv="x-ua-compatible" content="ie=edge"/>
 
-    <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css">
-    <link rel="stylesheet" href="../dist/vendor.css">
-    <link rel="stylesheet" href="../dist/leaflet.distortableimage.css" media="screen" title="no title">
-
-    <script src="../node_modules/leaflet/dist/leaflet.js" type="text/javascript" charset="utf-8"></script>
-    <script src="../dist/vendor.js"></script>
-    <script src="../dist/leaflet.distortableimage.js"></script>
-  </head>
-  <body style="margin:0;">
+  <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css">
+  <link rel="stylesheet" href="../dist/vendor.css">
+  <link rel="stylesheet" href="../dist/leaflet.distortableimage.css" media="screen" title="no title">
 
+  <script src="../node_modules/leaflet/dist/leaflet.js" type="text/javascript" charset="utf-8"></script>
+  <script src="../dist/vendor.js"></script>
+  <script src="../dist/leaflet.distortableimage.js"></script>
+</head>
+<body style="margin:0;">
+  <main>
     <form id="test_form" >
       <input type="file" class="ldi" id="inputimage" accept="image/*">
     </form>
-
+  
     <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
-  </body>
+  </main>
   <script>
     let map;
 
@@ -42,4 +42,6 @@
       });
     })();
   </script>
+    
+  </body>
 </html>
diff --git a/examples/select.html b/examples/select.html
index b905f23d8..9a039e6d7 100644
--- a/examples/select.html
+++ b/examples/select.html
@@ -14,13 +14,16 @@
   <script src="../dist/vendor.js"></script>
   <script src="../dist/leaflet.distortableimage.js"></script>
 </head>
-<body style="margin:0;">
 
-  <form id="test_form" >
-    <input type="file" class="ldi" id="inputimage" accept="image/*">
-  </form>
+<body style="margin:0;">
 
-  <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+  <main>
+    <form id="test_form" >
+      <input type="file" class="ldi" id="inputimage" accept="image/*">
+    </form>
+  
+    <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
+  </main>
 
   <script>
     let map;
@@ -82,4 +85,6 @@
       });
     })();
   </script>
+
+</body>
 </html>
