Further to my previous post, although creating custom sized images to act as hotspots works. My colleague has pointed out that this is okay for a handful of floorplans but if needing to work with large numbers the effort involved makes it very labour intensive. Consequentially I've reverted to using icons positioned as per the original explanation.
@mate_toth With regard to recording the users input I've had less success. There a few examples around that use a hidden slider to move items on the screen, these work in a single plane i.e. left/right or up/down. However, combining two sliders together as per your link above just locks them and you can't move in any direction.
However, using the slider principle I've come up with the following:
Moving the sliders moves the marker relative to the image (X marks the spot) using variables updated by the slider OnChange value. The two text boxes on the right display the X & Y coordinates of the marker (these will be included as part of the patch to save the location of the marker).
As before the floorplan is within a container with zero padding (so 0,0 is at the top left), the dotted line shows the container boundary. The size of the sliders and Max values are set by referencing the image e.g. Max = PlanImage.Width. This allows different sized floorplan images to be used without having to worry about making all images exactly the same size.
One oddity is that the vertical slider starts with zero at the bottom. Simply switching the Max & Min values doesn't flip the zero point as you would expect so I've had to deduct the position from the image height e.g. OnChange = UpdateContext({positionY: (PlanImage.Height - SliderY.Value)})
The above works consistently but it would be much better if the user could simply move the marker by dragging it (appearance of dragging it). I'm guessing that I've missed something in the detail when combining the horizontal and vertical sliders. Note: the invisible sliders must be above the image otherwise the image stops the slider working.
