I'm trying to make an interactive floor plan. When the user hovers a room I want to display some sort of message.
All my floor-plans are in JPEG format.
I would like to make something like this: http://dciarletta.github.io/d3-floorplan but I need to also make a tool in the backend that would create those overlays.
My questions is, how can I do it? Ideally I would just click around the room to create the overlay, but I don't think d3.js allows it. I'm also having a problem getting the correct coordinates:
var $this = $(this);
var offset = $this.offset();
var pos = ;
console.log('x: '+pos.x+' | y: '+pos.y);
You can probably do it by overlaying an SVG over your
<img>. D3 would render into this svg panel. You can create a polygon in the SVG based on the user clicks.
If you use the
d3.event mouse locations (
mouseY, I think), you can get click positions relative to the SVG element, and then use those as vertex locations on a polygon. Checking for click proximity to the original point will allow you to decide when to close the polygon.