search

publiclab / Leaflet.DistortableImage

A Leaflet extension to distort or "rubber sheet" images
https://publiclab.github.io/Leaflet.DistortableImage/examples/
BSD 2-Clause "Simplified" License
270 stars 284 forks source link

Augment ImageOverlay with Brief Relevant Information #1317

Closed segun-codes closed 1 year ago

segun-codes commented 1 year ago

User currently has no way to figure out what image is being distorted. A simple functionality in the form of a tooltip can be implemented to display some info (e.g., name of image) about the image when the mouse is placed on the image.

Please describe the desired behavior. An image overlay should display a useful information when the mouse is placed on it. This is able to remind users of what image they are distorting. I think this idea will likely enhance user experience.

Additional context (optional) See the screenshot below for more insights. Screenshot-3A

segun-codes commented 1 year ago

Here's my thought on how this feature should be implemented:

  1. Setup tooltip functionality for each imageOverlay layered on the tile map.
  2. Tooltip will only be active when the mouse is placed on the imageOverlay but not clicked.
  3. Populate the tooltip with the most relevant information (e.g., image name) in the response retrieved from IA via the fetch API.

What do you think @jywarren? If okay, I'd like to implement this feature.

jywarren commented 1 year ago

Hmm, interesting! I like it! What if the tooltip followed the mouse, so it could never be in the way? Like, if it were stuck to the cursor, slightly above it?

segun-codes commented 1 year ago

Hmm, interesting! I like it! What if the tooltip followed the mouse, so it could never be in the way? Like, if it were stuck to the cursor, slightly above it?

Okay. I will give this a shot, many thanks!