Tooltip Feature for ImageOverlays (#1321)

* reversal of unintended changes * updated select.html * reverted to previous state * revert ExportAction.js * rebuild to resolve conflict * update listeners.html * fix more indentation issues * placeholder update * updated to support restoring welcomemodal * rename id on welcomemodal * update * removed makeshift commenting * removed duplicate code in archive.js * fixed issue on geosearch bar * tooltip feature built for index.js * tooltip feature rigged up for archive.js & index.js * updates * update on tooltip feature * enabled tooltip feature on more sourcefiles * tooltip feature implemented using alternative approach * update * update * update * update * update * new update * update * update * hot-fix * tooltip centered on image * quick update * update * switchable tooltip feature * update * updated and cleared failed test issue * update * hotfix * update * hotfix * update * fixed typo * non-switchable tooltip * Quick cleanup * hotfix * conflict resolution * update * hotfix * update * update * remove cc file * update * cleanup * Update src/DistortableCollection.js * Update src/DistortableCollection.js * Update examples/js/archive.js * Update .gitignore * Update examples/js/archive.js Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>
publiclab · Jan 17, 2023 · 68498e9 · 68498e9
1 parent 10b732c
commit 68498e9
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 15 deletions.
diff --git a/dist/leaflet.distortableimage.js b/dist/leaflet.distortableimage.js
diff --git a/examples/archive.html b/examples/archive.html
@@ -65,8 +65,8 @@ <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" data-bs-dismiss="offcanvas" aria-label="Close">Get Image</button>
-        <button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas" aria-label="Close">View Map</button>
+        <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>
       </div>
       <hr>
       <div class="offcanvas-body">

diff --git a/examples/js/archive.js b/examples/js/archive.js
@@ -47,7 +47,6 @@ function extractKey() {
   else if (input.value.includes('http://')) {
     getUrl = input.value.replace('http:', 'https:');
     input.value = getUrl;
-    console.log('input', input.value);
     showImages(getUrl);
   }
   else
@@ -60,7 +59,6 @@ function extractKey() {
 let imageCount = 0;
 let fetchedFrom;
 
-
 const renderImages = (fullResImages, url) => {
   fullResImages.forEach((file) => {
     const imageRow = document.createElement('div');
@@ -110,13 +108,19 @@ const renderThumbnails = (thumbnails = [], url, fullResImgs) => {
     placeButton.innerHTML = 'Place';
     placeButton.setAttribute('title', 'Place image on map');
 
+    // store the full-resolution image URL in a "data-original" attribute
+    image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbnails ? file.original : file.name}`);
+    image.src = `${url.replace('metadata', 'download')}/${file.name}`;
+    imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center');
+    imageRow.append(image, placeButton, fileName);
     // store the full-resolution image URL in a "data-original" attribute
     image.setAttribute('data-original', `${url.replace('metadata', 'download')}/${thumbnails ? file.original : file.name}`);
     image.src = `${url.replace('metadata', 'download')}/${file.name}`;
     imageRow.classList.add('col-4', 'd-flex', 'flex-column', 'p-2', 'align-items-center');
     imageRow.append(image, placeButton, fileName);
     imageContainer.appendChild(imageRow);
     imageContainer.setAttribute('class', 'row');
+    imageContainer.setAttribute('class', 'row');
     imageCount++;
   });
 };
@@ -172,10 +176,23 @@ tileMap.addEventListener('click', (event) => {
   bootstrap.Offcanvas.getInstance(sidebar).hide();
 });
 
+function getImageName(imageURL) {
+  startIndex = imageURL.lastIndexOf('/') + 1;
+  endIndex = imageURL.lastIndexOf('.');
+  const imageName = imageURL.substring(startIndex, endIndex);
+
+  return imageName;
+}
+
 document.addEventListener('click', (event) => {
   if (event.target.classList.contains('place-button')) {
-    const imageURL = event.target.previousElementSibling.dataset.original;
-    const image = L.distortableImageOverlay(imageURL);
+    const imageURL = event.target.previousElementSibling.src;
+    const imageTooltipText = getImageName(imageURL);
+
+    const image = L.distortableImageOverlay(
+        imageURL,
+        {tooltipText: imageTooltipText}
+    );
     map.imgGroup.addLayer(image);
   }
 });
diff --git a/src/DistortableCollection.js b/src/DistortableCollection.js
@@ -34,7 +34,6 @@ L.DistortableCollection = L.FeatureGroup.extend({
 
   onRemove() {
     if (this.editing) { this.editing.disable(); }
-
     this.off('layeradd', this._addEvents, this);
     this.off('layerremove', this._removeEvents, this);
   },

diff --git a/src/DistortableImageOverlay.js b/src/DistortableImageOverlay.js
@@ -8,6 +8,8 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     editable: true,
     mode: 'distort',
     selected: false,
+    interactive: true,
+    tooltipText: '',
   },
 
   initialize(url, options) {
@@ -19,6 +21,9 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     this._selected = this.options.selected;
     this._url = url;
     this.rotation = {};
+
+    this.interactive = this.options.interactive;
+    this.tooltipText = this.options.tooltipText;
   },
 
   onAdd(map) {
@@ -81,6 +86,9 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     }
 
     this.fire('add');
+
+    L.DomEvent.on(this.getElement(), 'mousemove', this.activateTooltip, this);
+    L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
   },
 
   onRemove(map) {
@@ -96,6 +104,9 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     this.fire('remove');
 
     L.ImageOverlay.prototype.onRemove.call(this, map);
+
+    L.DomEvent.on(this.getElement(), 'mouseout', this.closeTooltip, this);
+    L.DomEvent.off(this.getElement(), 'mousemove', this.deactivateTooltip, this);
   },
 
   _initImageDimensions() {
@@ -227,6 +238,20 @@ L.DistortableImageOverlay = L.ImageOverlay.extend({
     }
   },
 
+  activateTooltip() {
+    if (!this._selected) {
+      this.bindTooltip(this.tooltipText, {direction: 'top'}).openTooltip();
+    }
+  },
+
+  closeToolTip() {
+    this.closeTooltip();
+  },
+
+  deactivateTooltip() {
+    this.unbindTooltip();
+  },
+
   setCorners(latlngObj) {
     const map = this._map;
     const zoom = map.getZoom();