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?
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
.