Tooltip Feature for ImageOverlays

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 coverage
 todo.txt
+observation.txt
 *.swp
 *.swo
 package-lock.json

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">

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++;
   });
 };
@@ -148,7 +152,6 @@ function showImages(getUrl) {
       })
       .catch((error) => {
         responseText.innerHTML = 'Uh-oh! Something\'s not right with the link provided!';
-        console.log(error);
       })
       .finally(() => {
         bootstrap.Modal.getInstance(welcomeModal).hide();
@@ -172,10 +175,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);
   }
 });

src/DistortableCollection.js

@@ -34,7 +34,7 @@ L.DistortableCollection = L.FeatureGroup.extend({
 
   onRemove() {
     if (this.editing) { this.editing.disable(); }
-
+    
     this.off('layeradd', this._addEvents, this);
     this.off('layerremove', this._removeEvents, this);
   },

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();