Reconstruct Map from URL (#1339)

* feature-reconstructMap * map reconstruction from url * update * update * update * update * update * moved code from library to examples folder * shareable integrated into archive * update * code transferred to archive.js * some codes to library * update * url reconstruction completed
publiclab · Jan 29, 2023 · 258cfb9 · 258cfb9
1 parent 9ec3d46
commit 258cfb9
Show file tree

Hide file tree

Showing 6 changed files with 381 additions and 630 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,7 +11,7 @@ module.exports = {
     SharedArrayBuffer: 'readonly',
   },
   parserOptions: {
-    ecmaVersion: 6,
+    ecmaVersion: 8,
   },
   rules: {
     /*
@@ -47,7 +47,7 @@ module.exports = {
       'overrides': [{
      files: ['examples/js/*.js'],
     parserOptions: {
-         sourceType: "module"
+         sourceType: "module",
        }
     }],
   },

diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
diff --git a/examples/archive.html b/examples/archive.html
@@ -22,7 +22,7 @@
   <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
   <script src="../dist/leaflet.distortableimage.js"></script>
   <script src="./js/archive.js" defer type="module"></script>
-  <script src="./js//modules/pagination.js" type="module" defer></script>
+  <script src="./js//modules/paginator.js" type="module" defer></script>
 </head>
 <body style="margin:0;">
 

diff --git a/examples/js/archive.js b/examples/js/archive.js
@@ -14,6 +14,8 @@ let imageCount = 0;
 let fetchedFrom;
 let fetchedImages;
 let currPagination; // currPagination is used to initiate the Paginator Class
+let sidebarOpen = false;
+let mapReconstructionMode = false;
 
 const setupMap = () => {
   map = L.map('map').setView([51.505, -0.09], 13);
@@ -22,7 +24,12 @@ const setupMap = () => {
 
   map.addGoogleMutant();
   map.whenReady(() => {
-    new bootstrap.Modal(welcomeModal).show();
+    if (isJsonDetected(location.href)) {
+      new bootstrap.Modal(welcomeModal).hide(); 
+      mapReconstructionMode = true;
+      return;
+    }
+    new bootstrap.Modal(welcomeModal).show(); 
   });
 };
 
@@ -155,6 +162,7 @@ function showImages(getUrl) {
 
 welcomeModal.addEventListener('hidden.bs.modal', (event) => {
   new bootstrap.Offcanvas(sidebar).show();
+  sidebarOpen = true;
 });
 
 restoreWelcomeModal.addEventListener('click', (event) => {
@@ -164,10 +172,13 @@ restoreWelcomeModal.addEventListener('click', (event) => {
 
 mapToggle.addEventListener('click', (event) => {
   new bootstrap.Offcanvas(sidebar).show();
+  sidebarOpen = true;
 });
 
 tileMap.addEventListener('click', (event) => {
-  bootstrap.Offcanvas.getInstance(sidebar).hide();
+  if (sidebarOpen) {
+    bootstrap.Offcanvas.getInstance(sidebar).hide();
+  }
 });
 
 function getImageName(imageURL) {
@@ -178,16 +189,102 @@ function getImageName(imageURL) {
   return imageName;
 }
 
+function extractJsonFromUrlParams(url) { 
+  const startIndex = url.lastIndexOf('=');
+  const jsonDownloadURL = url.slice(startIndex + 1);
+
+  return jsonDownloadURL;
+}
+
+function isJsonDetected(url) {
+  if (url.includes('?json=')) {
+    const startIndex = url.lastIndexOf('.');
+    const fileExtension = url.slice(startIndex + 1);
+
+    if (fileExtension === 'json') {
+      console.log('JSON found in map shareable link'); // left here purposely
+      return true;
+    } 
+  }
+
+  return false;
+}
+
+function placeImage (imageURL, options, newImage = false) {
+  let image;
+
+  if (newImage) { 
+    image = L.distortableImageOverlay(
+      imageURL,
+      {tooltipText: options.tooltipText}
+    );
+  } else {
+    image = L.distortableImageOverlay(
+      imageURL,
+      {
+        height: options.height,
+        tooltipText: options.tooltipText,
+        // corners: options.corners, <== uncomment this to see the effect of the corners
+      }
+    );
+  }
+
+  map.imgGroup.addLayer(image);
+};
+
+// Reconstruct Map from JSON
+document.addEventListener('DOMContentLoaded', async (event) => {
+  if (mapReconstructionMode) {
+    const url = location.href;
+
+    if (isJsonDetected(url)) {
+      const jsonDownloadURL = extractJsonFromUrlParams(url); 
+
+      if (jsonDownloadURL) {
+        const imageCollectionObj = await map.imgGroup.recreateImagesFromJsonUrl(jsonDownloadURL); 
+        const avg_cm_per_pixel = imageCollectionObj.avg_cm_per_pixel; // this is made available here for future use
+
+        // creates multiple images - this applies where multiple images are to be reconstructed
+        if (imageCollectionObj.imgCollectionProps.length > 1) {
+          let imageURL;
+          let options;
+
+          imageCollectionObj.imgCollectionProps.forEach((imageObj) => {
+            imageURL = imageObj.src;
+            options = {
+              height: imageObj.height,
+              tooltipText: imageObj.tooltipText,
+              corners: imageObj.nodes,
+            };
+            placeImage(imageURL, options, false);
+          });
+
+          return;
+        }
+
+        // creates single image - this applies where only one image is to be reconstructed
+        const imageObj = imageCollectionObj.imgCollectionProps[0];
+        const imageURL = imageObj[0].src;
+        const options = {
+          height: imageObj[0].height,
+          tooltipText: imageObj[0].tooltipText,
+          corners: imageObj[0].nodes,
+        }
+
+        placeImage(imageURL, options, false);
+      }
+    } 
+  }
+});
+
 document.addEventListener('click', (event) => {
   if (event.target.classList.contains('place-button')) {
     const imageURL = event.target.previousElementSibling.src;
     const imageTooltipText = getImageName(imageURL);
+    const options = {tooltipText: imageTooltipText};
 
-    const image = L.distortableImageOverlay(
-        imageURL,
-        {tooltipText: imageTooltipText}
-    );
-    map.imgGroup.addLayer(image);
+    placeImage(imageURL, options, true);
+    return;
   }
 });
 
@@ -203,4 +300,4 @@ saveMap.addEventListener('click', () => {
       a.download = fileName ? fileName + '.json' : 'MapknitterLite.json';
       a.click();
     }
-})
+});
diff --git a/src/DistortableCollection.js b/src/DistortableCollection.js
@@ -199,17 +199,44 @@ L.DistortableCollection = L.FeatureGroup.extend({
     return reduce / imgs.length;
   },
 
-  isJsonDetected(currentURL) {
-    if (currentURL.includes('?json=')) {
-      startIndex = currentURL.lastIndexOf('.');
-      fileExtension = currentURL.slice(startIndex + 1);
-
-      if (fileExtension === 'json') {
-        console.log('JSON found in map shareable link');
-        return true;
+  // Connects to JSON file and fetches JSON data therein from remote source
+  async fetchRemoteJson(url) {
+    let index = 0;
+    const imgCollectionProps = [];
+
+    try {
+      const response = await axios.get(url);
+      if (response.data.images.length > 1) {
+        response.data.images.forEach((data) => {
+          imgCollectionProps[index] = data;
+          index++;
+        });
+        return {
+          avg_cm_per_pixel: response.data.avg_cm_per_pixel,
+          imgCollectionProps,
+        };
       }
+      imgCollectionProps[index] = response.data.images;
+
+      return {
+        avg_cm_per_pixel: response.data.avg_cm_per_pixel,
+        imgCollectionProps,
+      };
+    } catch (err) {
+      console.log('err', err);
     }
-    return false;
+  },
+
+  // expects url in this format: https://archive.org/download/segeotest/segeotest.json
+  async recreateImagesFromJsonUrl(url) {
+    let imageCollectionObj = {};
+
+    if (url) {
+      imageCollectionObj = await this.fetchRemoteJson(url);
+      return imageCollectionObj;
+    };
+
+    return imageCollectionObj;
   },
 
   generateExportJson(allImages = false) {

diff --git a/src/DistortableImageOverlay.js b/src/DistortableImageOverlay.js
@@ -1,5 +1,4 @@
 L.DistortableImageOverlay = L.ImageOverlay.extend({
-
   options: {
     height: 200,
     crossOrigin: true,