Image Map and highlighting points/areas

#1

Hi Folks,

I am keen to learn what existing plugins and editions can help me with a “floor map image”. The image has number indicating Aisle’s on an image, I have a list of products in Aisles numbers. I would like to allow clicking an Aisle number to highlight the position on the map (image) where the number is, or a rectangle highlighting the whole Aisle. I am happy to capture the co-ordinates on the image for each Aisle. What I am not sure about is how to overlay the highlight and would love some tips.

Perhaps

  • can we use an SVG image overlay?
  • Can we use CSS?
  • I would rather not create an image for each Aisle with that Aisle highlighted.
  • I would like to avoid the larger TiddlyMap solution

Other questions

  • Can a solution cope with zoom and scaling of the image?
  • Can we allow the click of the same highlight area to open a tiddler for that area?

Thanks if you have any tips whatsoever.

#2

Apparently you need javascript for this, but you could use links with absolute positioning instead of a map and then style each link when hovered/clicked with css : html - Is it possible to style a mouseover on an image map using CSS? - Stack Overflow

You can do this with link widgets, that way this allow you to open a tiddler when an area is clicked.

For the scaling maybe you could scale the container, clip the overflow and unscale the numbers ?

1 Like
#3

Hi Tony
I’ve made a stab at a popup editor that might do what you want, possibly. There is an example loosely based on your floor plan requirement here:

https://wattaged.github.io/popmap/

It works on a mobile but may need some tweaking.
Happy Christmas, Happy New Year!

2 Likes
#4

This looks great thankyou. I wont be able to take for a drive just yet but soon.