Place Points on the Image

[Isaac-List]

Implement a way to show the points to visit on the image.

Considerations:

• How interactive should this image be, if at all?
• What sort of label should be displayed alongside the points?
• Can we connect the points with a line showing the route?

Implementation Ideas
This StackOverflow post describes how to use the <map> element to place clickable points on an image (or rather, within an <area> element). This seems like a promising option, we would just need to consider the above points, as well as how to best implement an automatic generation of this. In that regard:

• Books can be easily associated with a given shelf
• Those shelves can have a coordinate location that is pre-defined within the image

[Isaac-List]

See here for another example of using the <map> and <img> elements together, this time where the user can click on the image to generate a point. Might be useful for the backend generation of these images.

[Isaac-List]

I tried working a bit with <map> and <area> elements this morning, and while they work nicely for making a specific area an active/click-able link, I don't think there is any way to give an <area> element a background color or anything like that.

Instead, I tried out working with just positioning a <div> over the image, and that seems to have worked OK. See a live/editable example that I put together here: https://codepen.io/ilist/pen/PoOayWJ

Some things to consider:

• We would need to manually define the location of each shelf
• If a shelf is to be visited, we could simply make the respective <div> visible or maybe highlight it somehow

Question that could be debated: is this the most efficient way to do this? It certainly is the least dependent on external frameworks (i.e. no dependency) but it's a bit verbose. On the other hand, I haven't found a better way to do it. Open to suggestions though! 😄

[AlexDikelsky]

I am currently using konva for this, which uses the <canvas> element. This makes it easy to make squares and lines, and also more complicated lines, at the cost of not being able to center text nicely.

[AlexDikelsky]

Nevermind, there is a way to center text, I just missed align=center