Image map alternative?


I am developing a booking system as a VueJS SPA. It needs to allow the user to select which room(s) they want to book.

I need to present the user with a floor-plan, and have the user click which rooms they want to book. The user cannot book rooms that are not available or of the incorrect type

Previously in the booking flow the user has selected start/end dates and room types.

I am stuck in trying to find a way to present this floor plan to the user in a way that allows clicking it to select room(s), and once a room is selected, an icon should be shown, and clicking the icon should unselect that room again.

I thought about using an image-map, but that is not able to be scaled down for mobile usage.

Any suggestions ?

I did something similar a while ago and used CSS Grid for the layout. In my case, it was easiest to define a grid layout and apply CSS classes on each room (a <div> element) to put it at the correct position of the grid.

That would definitely be easier to work with, but then I would manually have to convert the floor-plan to CSS Grid for each facility, and edit the source code every time a facility was added…

Which could be done, but I would prefer a method with less manual work if possible. I have access to the floor plans as image files currently.

I settled on using an SVG for this purpose.

I use a bitmap image as “background” and lay a grid on top of it using rectangles in an SVG, then each of these rectangles can call a vuejs function on click by using the v-on:click handler.