JavaScript: Library suitable for creating custom "hotspots" on a image

Question

I am searching for a open source JavaScript library/plug-in that would allow me to implement a custom function that:

• lets a privileged user place one or more graphical icon (e.g., Google-like pin) anywhere on an image and associate a hyperlink, comments, or other attributes to that object (attributes preferably stored in JSON format)
• lets normal users view those "hotspots" placed by the above privileged user and be able to interact (e.g., hover for more info, click to go to the associated URL, etc) with those objects
• lets the privileged user modify the placement and/or the attributes associated to the icons

I did find a few similar questions in SO but none of them had enough similarities to be the solution I'm looking for. Any pointers will be much appreciated!

Answer 1

You could try using DropPin. It could be what you need, though you might need to take care of the user privileges part of it.

Answer 2

You could look at how H5P has created an image hotspot content type: https://h5p.org/image-hotspots

H5P is an open source project, so you may use this as is, or reuse the code found here: https://github.com/h5p/h5p-image-hotspots

Btw, I am one of the developers contributing to H5P!