diff --git a/examples/export.html b/examples/export.html
index 816a62601..4128bd05b 100644
--- a/examples/export.html
+++ b/examples/export.html
@@ -1,147 +1,170 @@
 <!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"/>
-
-  <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>
+    <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;">
 
-  <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>
-
-  <script>
-    let map;
-
-    (function() {
-      map = L.map('map').setView([51.505, -0.13], 13);
-      map.addGoogleMutant();
-
-      map.whenReady(function() {
-        img = L.distortableImageOverlay('example.jpg', {
-          corners: [
-            L.latLng(51.52, -0.14),
-            L.latLng(51.52,-0.10),
-            L.latLng(51.50, -0.14),
-            L.latLng(51.50,-0.10),
-          ],
-          mode: 'lock',
-        });
-
-        // create a second image
-        img2 = L.distortableImageOverlay('example.jpg', {
-          corners: [
-            L.latLng(51.51, -0.20),
-            L.latLng(51.51,-0.16),
-            L.latLng(51.49, -0.21),
-            L.latLng(51.49,-0.17),
-          ],
-          mode: 'freeRotate',
-          suppressToolbar: true,
-        });
-
-        let json = [{"nodes":[
-                {"lat":"41.8200378187","lon":"-71.4034409085"},
-                {"lat":"41.8199873593","lon":"-71.4030021564"},
-                {"lat":"41.8196229772","lon":"-71.4029728831"},
-                {"lat":"41.8198214546","lon":"-71.4034614433"}
-            ],
-            "cm_per_pixel":23.0934,
-            "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/312455/test.png"},
-            {"nodes":[
-                {"lat":"41.819898342","lon":"-71.4035387139"},
-                {"lat":"41.819898342","lon":"-71.4028493862"},
-                {"lat":"41.8195005594","lon":"-71.4028493862"},
-                {"lat":"41.8195005594","lon":"-71.4035387139"}
-            ],
-            "cm_per_pixel":35.8578,
-            "src":"https://s3.amazonaws.com/grassrootsmapping/warpables/320983/test.png"}
-        ];
-
-        // customize the function that starts up the export
-        const fetchStatusUrl = (mergedOpts) => {
-          const form = new FormData();
-          form.append('collection', JSON.stringify(mergedOpts.collection));
-          form.append('scale', prompt("Choose a scale or use the default (cm per pixel):", 100) || mergedOpts.scale);
-          form.append('upload', true);
-
-          const reqOpts = {method: 'POST', body: form};
-          const req = new Request(mergedOpts.exportStartUrl, reqOpts);
-
-          fetch(req).then((res) => {
-            if (res.ok) {
-              return res.text();
-            }
-          }).then(mergedOpts.handleStatusRes);
-        };
-
-        // receives the URL of status.json, and starts running the updater to repeatedly fetch from status.json;
-        // this may be overridden to integrate with any UI
-        const handleStatusRes = (data) => {
-          statusUrl = data.split('please visit, ')[1];
-
-          /*
-            if we are getting status updates, repeatedly fetch the status.json:
-
-            this.updateInterval = setInterval(() => {
-              const reqOpts = {method: 'GET'};
-              const req = new Request(`${data}?${Date.now()}`, reqOpts);
-              fetch(req).then((res) => {
-                if (res.ok) {
-                  return res.text();
-                }
-              }).then(opts.updater);
-            }, opts.frequency);
-
-          */
-
-          // but in this example, we're not; we just get the URL of the finished image;
-          // we should initiate the download?
-          window.location = statusUrl;
-        };
-
-        // initialize the collection:
-        imgGroup = L.distortableCollection({
-          exportOpts: {
-            collection: json, // here we override the image data sent with a custom set
-            fetchStatusUrl: fetchStatusUrl,
-            handleStatusRes: handleStatusRes,
-            exportUrl: '//34.74.118.242/api/v2/export/', // used to
-            exportStartUrl: '//34.74.118.242/api/v2/export/', // used to initiate the export
-
-            // From this alternative exporter, we'll get a response like:
-            // "Your Image is exporting, to load Image please visit, http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153"
-            // So, we can splice like this: response.split("please visit, ")[1]
-            // and get http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153
-            // Noting, however, later we will expect to get a full Google Cloud Storage URL.
-
-            // remaining defaults are as follows, in /src/edit/DistortableCollection.Edit.js:
-            // collection = opts.collection || this._group.generateExportJson();
-            // frequency = opts.frequency || 3000;
-            // scale = opts.scale || 100; // switch it to _getAvgCmPerPixel !
-            // updater: function(json) {}  // a function to handle the result of repeated fetching of the status.json file
-            // fetchStatusUrl = opts.fetchStatusUrl || _defaultFetchStatusUrl;
-            // handleStatusRes = opts.handleStatusRes || _defaultHandleStatusRes;
-            // exportStartUrl = opts.exportStartUrl || '//export.mapknitter.org/export';
-            // exportUrl = opts.exportUrl || 'http://export.mapknitter.org/';
-          },
-        }).addTo(map);
-
-        imgGroup.addLayer(img);
-        imgGroup.addLayer(img2);
-      });
-    })();
-  </script>
-</html>
+    <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>
+
+    <script>
+        let map;
+
+        (function() {
+            map = L.map('map').setView([51.505, -0.13], 13);
+            map.addGoogleMutant();
+
+            map.whenReady(function() {
+                img = L.distortableImageOverlay('example.jpg', {
+                    corners: [
+                        L.latLng(51.52, -0.14),
+                        L.latLng(51.52, -0.10),
+                        L.latLng(51.50, -0.14),
+                        L.latLng(51.50, -0.10),
+                    ],
+                    mode: 'lock',
+                });
+
+                // create a second image
+                img2 = L.distortableImageOverlay('example.jpg', {
+                    corners: [
+                        L.latLng(51.51, -0.20),
+                        L.latLng(51.51, -0.16),
+                        L.latLng(51.49, -0.21),
+                        L.latLng(51.49, -0.17),
+                    ],
+                    mode: 'freeRotate',
+                    suppressToolbar: true,
+                });
+
+                let json = [{
+                    "nodes": [{
+                        "lat": "41.8200378187",
+                        "lon": "-71.4034409085"
+                    }, {
+                        "lat": "41.8199873593",
+                        "lon": "-71.4030021564"
+                    }, {
+                        "lat": "41.8196229772",
+                        "lon": "-71.4029728831"
+                    }, {
+                        "lat": "41.8198214546",
+                        "lon": "-71.4034614433"
+                    }],
+                    "cm_per_pixel": 23.0934,
+                    "src": "https://s3.amazonaws.com/grassrootsmapping/warpables/312455/test.png"
+                }, {
+                    "nodes": [{
+                        "lat": "41.819898342",
+                        "lon": "-71.4035387139"
+                    }, {
+                        "lat": "41.819898342",
+                        "lon": "-71.4028493862"
+                    }, {
+                        "lat": "41.8195005594",
+                        "lon": "-71.4028493862"
+                    }, {
+                        "lat": "41.8195005594",
+                        "lon": "-71.4035387139"
+                    }],
+                    "cm_per_pixel": 35.8578,
+                    "src": "https://s3.amazonaws.com/grassrootsmapping/warpables/320983/test.png"
+                }];
+
+                // customize the function that starts up the export
+                const fetchStatusUrl = (mergedOpts) => {
+                    const form = new FormData();
+                    form.append('collection', JSON.stringify(mergedOpts.collection));
+                    form.append('scale', prompt("Choose a scale or use the default (cm per pixel):", 100) || mergedOpts.scale);
+                    form.append('upload', true);
+
+                    const reqOpts = {
+                        method: 'POST',
+                        body: form
+                    };
+                    const req = new Request(mergedOpts.exportStartUrl, reqOpts);
+
+                    fetch(req).then((res) => {
+                        if (res.ok) {
+                            return res.text();
+                        }
+                    }).then(mergedOpts.handleStatusRes);
+                };
+
+                // receives the URL of status.json, and starts running the updater to repeatedly fetch from status.json;
+                // this may be overridden to integrate with any UI
+                const handleStatusRes = (data) => {
+                    statusUrl = data.split('please visit, ')[1];
+
+                    /*
+                      if we are getting status updates, repeatedly fetch the status.json:
+
+                      this.updateInterval = setInterval(() => {
+                        const reqOpts = {method: 'GET'};
+                        const req = new Request(`${data}?${Date.now()}`, reqOpts);
+                        fetch(req).then((res) => {
+                          if (res.ok) {
+                            return res.text();
+                          }
+                        }).then(opts.updater);
+                      }, opts.frequency);
+
+                    */
+
+                    // but in this example, we're not; we just get the URL of the finished image;
+                    // we should initiate the download?
+                    window.location = statusUrl;
+                };
+
+                // initialize the collection:
+                imgGroup = L.distortableCollection({
+                    exportOpts: {
+                        collection: json, // here we override the image data sent with a custom set
+                        fetchStatusUrl: fetchStatusUrl,
+                        handleStatusRes: handleStatusRes,
+                        exportUrl: '//34.74.118.242/api/v2/export/', // used to
+                        exportStartUrl: '//34.74.118.242/api/v2/export/', // used to initiate the export
+
+                        // From this alternative exporter, we'll get a response like:
+                        // "Your Image is exporting, to load Image please visit, http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153"
+                        // So, we can splice like this: response.split("please visit, ")[1]
+                        // and get http://34.74.118.242/api/v2/status/?pid=3d8233faa2ade0f0cee400fba1170890-7153
+                        // Noting, however, later we will expect to get a full Google Cloud Storage URL.
+
+                        // remaining defaults are as follows, in /src/edit/DistortableCollection.Edit.js:
+                        // collection = opts.collection || this._group.generateExportJson();
+                        // frequency = opts.frequency || 3000;
+                        // scale = opts.scale || 100; // switch it to _getAvgCmPerPixel !
+                        // updater: function(json) {}  // a function to handle the result of repeated fetching of the status.json file
+                        // fetchStatusUrl = opts.fetchStatusUrl || _defaultFetchStatusUrl;
+                        // handleStatusRes = opts.handleStatusRes || _defaultHandleStatusRes;
+                        // exportStartUrl = opts.exportStartUrl || '//export.mapknitter.org/export';
+                        // exportUrl = opts.exportUrl || 'http://export.mapknitter.org/';
+                    },
+                }).addTo(map);
+
+                imgGroup.addLayer(img);
+                imgGroup.addLayer(img2);
+            });
+        })();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/examples/js/select.js b/examples/js/select.js
new file mode 100644
index 000000000..35d616f73
--- /dev/null
+++ b/examples/js/select.js
@@ -0,0 +1,58 @@
+let map;
+
+(function() {
+  map = L.map('map').setView([51.505, -0.09], 13);
+  map.addGoogleMutant();
+
+  map.whenReady(function() {
+    img = L.distortableImageOverlay('example.jpg', {
+      corners: [
+        L.latLng(51.52, -0.14),
+        L.latLng(51.52, -0.10),
+        L.latLng(51.50, -0.14),
+        L.latLng(51.50, -0.10),
+      ],
+      mode: 'lock',
+    });
+
+    // create a second image
+    img2 = L.distortableImageOverlay('example.jpg', {
+      corners: [
+        L.latLng(51.51, -0.20),
+        L.latLng(51.51, -0.16),
+        L.latLng(51.49, -0.21),
+        L.latLng(51.49, -0.17),
+      ],
+      mode: 'freeRotate',
+      suppressToolbar: true,
+    });
+
+    img3 = L.distortableImageOverlay('example.jpg', {
+      corners: [
+        L.latLng(51.50, -0.13),
+        L.latLng(51.50, -0.09),
+        L.latLng(51.48, -0.14),
+        L.latLng(51.48, -0.10),
+      ],
+      actions: [L.DistortAction, L.FreeRotateAction, L.LockAction, L.OpacityAction, L.DeleteAction],
+    });
+
+    img4 = L.distortableImageOverlay('example.jpg', {
+      actions: [L.ScaleAction, L.DistortAction, L.RotateAction, L.FreeRotateAction, L.LockAction, L.OpacityAction, L.DeleteAction],
+      corners: [
+        L.latLng(51.51, -0.07),
+        L.latLng(51.51, -0.03),
+        L.latLng(51.49, -0.08),
+        L.latLng(51.49, -0.04),
+      ],
+    });
+
+    imgGroup = L.distortableCollection().addTo(map);
+
+    /* TODO: make an addLayers func */
+    imgGroup.addLayer(img);
+    imgGroup.addLayer(img2);
+    imgGroup.addLayer(img3);
+    imgGroup.addLayer(img4);
+  });
+})();
diff --git a/examples/select.html b/examples/select.html
index b905f23d8..2da30d74a 100644
--- a/examples/select.html
+++ b/examples/select.html
@@ -1,85 +1,30 @@
 <!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"/>
-
-  <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>
+    <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>
+    <script src="./js/select.js" defer></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>
-
-  <script>
-    let map;
-
-    (function(){
-      map = L.map('map').setView([51.505, -0.09], 13);
-      map.addGoogleMutant();
-
-      map.whenReady(function() {
-        img = L.distortableImageOverlay('example.jpg', {
-          corners: [
-            L.latLng(51.52, -0.14),
-            L.latLng(51.52,-0.10),
-            L.latLng(51.50, -0.14),
-            L.latLng(51.50,-0.10),
-          ],
-          mode: 'lock',
-        });
-
-        // create a second image
-        img2 = L.distortableImageOverlay('example.jpg', {
-          corners: [
-            L.latLng(51.51, -0.20),
-            L.latLng(51.51,-0.16),
-            L.latLng(51.49, -0.21),
-            L.latLng(51.49,-0.17),
-          ],
-          mode: 'freeRotate',
-          suppressToolbar: true,
-        });
+<body style="margin:0;">
 
-        img3 = L.distortableImageOverlay('example.jpg', {
-          corners: [
-            L.latLng(51.50, -0.13),
-            L.latLng(51.50,-0.09),
-            L.latLng(51.48, -0.14),
-            L.latLng(51.48,-0.10),
-          ],
-          actions: [L.DistortAction, L.FreeRotateAction, L.LockAction, L.OpacityAction, L.DeleteAction],
-        });
+    <form id="test_form">
+        <input type="file" class="ldi" id="inputimage" accept="image/*">
+    </form>
 
-        img4 = L.distortableImageOverlay('example.jpg', {
-          actions: [L.ScaleAction, L.DistortAction, L.RotateAction, L.FreeRotateAction, L.LockAction, L.OpacityAction, L.DeleteAction],
-          corners: [
-            L.latLng(51.51, -0.07),
-            L.latLng(51.51,-0.03),
-            L.latLng(51.49, -0.08),
-            L.latLng(51.49,-0.04),
-          ],
-        });
+    <div id="map" style="width:100%; height:100%; position:absolute; top:0;"></div>
 
-        imgGroup = L.distortableCollection().addTo(map);
+</body>
 
-        /* TODO: make an addLayers func */
-        imgGroup.addLayer(img);
-        imgGroup.addLayer(img2);
-        imgGroup.addLayer(img3);
-        imgGroup.addLayer(img4);
-      });
-    })();
-  </script>
-</html>
+</html>
\ No newline at end of file
