Search code examples
htmlresponsive-designuser-inputinteractive

Responsive image for recording user selection


I am wanting to allow users to click on a specific part of a photograph in a tablet/phone (via a web browser or software) and it will record their choice.

Essentially I have some aerial photographs and I want to place a regular grid (say 100m x 100m over the top). This grid would be semi-transparent, and each grid cell would be clear if not clicked ('off') and change to blue when clicked ('on'). Each grid cell would store a value if it is 'on' or 'off'.

This would preferably done using a spatially referenced geotiff image, but is not essential.

I have lots experience in GIS related software, but I am looking for a simple solution.

Is this possible? What tools, web languages (html, java etc), or software is recomended. Responsive image maps kind of seem relevant here but I am not sure?


Solution

  • Tracking user interaction over an image is possible. You can overlay a grid of clickable div, and simply listen for clicks on each div.

    Here is an approach where I place a 10x10 grid of div on top of an image:
    https://jsfiddle.net/o31p99wh/

    The key is to know the size / scale of the image, and make sure that the tiles are mapped to that. E.g. each 35 x 35px square maps to 350 x 350m.