Download json file of saved positions

examples/archive.html

@@ -65,9 +65,11 @@ <h2 class="modal-title">Welcome to MapKnitter Lite</h2>
 
   <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" id="restoreWelcomeModalBtn" class="btn btn-primary btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">Get Image</button>
-        <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
+        <button type="button" id="restoreWelcomeModalBtn" class="btn btn-primary btn-md" data-bs-dismiss="offcanvas" aria-label="Close" title="Import images from collection URL">Import</button>
+        <button id="saveMap" type="button" class="btn btn-sm" aria-label="Save map" title="Save map in JSON format" >
+          <i class="fa fa-save fa-" style="font-size:24px" ></i>
+        </button>
+       <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close" title="Close Sidebar" ></button>
       </div>
       <hr>
       <div class="offcanvas-body">
@@ -76,10 +78,11 @@ <h3 id="offcanvasRightLabel">Images</h3>
       </div>
         <hr>
       <div class="offcanvas-footer d-flex justify-content-evenly align-items-center">
+        <h3 id="offcanvasRightLabel">Images</h3>
        <button title="Previous" id="prevBtn" style="all: unset; cursor: pointer;">
         <i class=" fa fa-regular fa-chevron-left"></i>
        </button>
-        <p style="margin: 5px;" id="range">1-50 of 200</p>
+        <p style="margin: 5px;" id="range">0-0 of 0</p>
        <button title="Next" id="nextBtn" style="all: unset; cursor: pointer;">
         <i  class=" fa fa-regular fa-chevron-right"></i>
        </button>

examples/js/archive.js

@@ -171,8 +171,8 @@ tileMap.addEventListener('click', (event) => {
 });
 
 function getImageName(imageURL) {
-  startIndex = imageURL.lastIndexOf('/') + 1;
-  endIndex = imageURL.lastIndexOf('.');
+  const startIndex = imageURL.lastIndexOf('/') + 1;
+  const endIndex = imageURL.lastIndexOf('.');
   const imageName = imageURL.substring(startIndex, endIndex);
 
   return imageName;
@@ -190,3 +190,17 @@ document.addEventListener('click', (event) => {
     map.imgGroup.addLayer(image);
   }
 });
+
+// download JSON
+saveMap.addEventListener('click', () => {
+  const jsonImages = map.imgGroup.generateExportJson(true).images;
+    // a check to prevent download of empty file
+    if (jsonImages.length) {
+      const encodedFile = 'text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(jsonImages));
+      const a = document.createElement('a');
+      a.href = 'data:' + encodedFile;
+      const fileName = prompt('Use this file to recover your map’s saved state. Enter filename:');
+      a.download = fileName ? fileName + '.json' : 'MapknitterLite.json';
+      a.click();
+    }
+})

src/DistortableCollection.js

@@ -212,12 +212,12 @@ L.DistortableCollection = L.FeatureGroup.extend({
     return false;
   },
 
-  generateExportJson() {
+  generateExportJson(allImages = false) {
     const json = {};
     json.images = [];
 
     this.eachLayer(function(layer) {
-      if (this.isCollected(layer)) {
+      if (allImages || this.isCollected(layer)) {
         const sections = layer._image.src.split('/');
         const filename = sections[sections.length-1];
         const zc = layer.getCorners();
@@ -241,7 +241,6 @@ L.DistortableCollection = L.FeatureGroup.extend({
 
     json.images = json.images.reverse();
     json.avg_cm_per_pixel = this._getAvgCmPerPixel(json.images);
-
     return json;
   },
 });

src/edit/DistortableCollection.Edit.js

@@ -207,7 +207,6 @@ L.DistortableCollection.Edit = L.Handler.extend({
     const map = group._map;
 
     if (group.options.suppressToolbar || this.toolbar) { return; }
-
     this.toolbar = L.distortableImage.controlBar({
       actions: this.editActions,
       position: 'topleft',