This tool was created as an exercise inspired by the GIS.SE question How to digitise animal positions in aerial photos?. A user should be able to digitize animal positions from aerial imagery and set the species.
I learned loads of cool techniques and Javascript libraries while writing this answer.
The basis is leaflet. On click of the map a marker is created at the click position. The marker popup is created on the fly and consists only of a dropdown select element. The possible values for the select list are created from the text boxes on the right, so fully customizable. On change of the select element its value is written to the (custom) species
attribute of the marker. Markers are stored in a global array.
Each change of a marker dropdown triggers a full rewrite of the output CSV. This is the main output and can be mailed to someone, used as input for a spreadsheet etc. It would also be possible to trigger AJAX calls on marker value change, so one could store the markers at some remote net location, if needed.
Images can be added via the file overlay input. Only GeoTIFF files with photometric interpretation RGB, 3 pixels per sample and data type UInt8 are supported. Hint: These images are created by QGIS when exporting a map view to an image. The TIF reading is done with geotiff.js. Images with coordinates in EPSG:4326 (WGS84) are displayed right away, the corner coordinates of images in other CRS are reprojected to wgs84 using proj4js.