Image Map Widget

Martijn van de Rijdt, 13 Jul 2017

There is very exciting new select widget in Enketo that can be used to select a region from an SVG image. Click the demo below.

"Image Map Demo"

How to use

The XLSForm syntax for this widget is very simple. Add an SVG image and the appearance “image-map” to any regular select or select_one widget.

"Image Map XLSForm syntax"

The next step gets a little more involved as we need to link the values of the choices (i.e. the “name” column in XLSForm) to correspond with the “id” attributes on the paths or groups in the SVG document. A particular id can only be used on 1 element in the SVG document. The easiest is probably to create a regular choice list in XLSForm first and then edit the SVG file in a text editor (SVG is just text).

"Image Map Choices XLSForm syntax"

"Image Map Choices SVG syntax"

As far as we know, any SVG image could be used to make certain “paths” (<path>) or “groups” (<g>) clickable, but there may very well be surprises for some complex images.

Acknowledgements

This feature was made possible by funding from KoBoToolbox under their project with WFP. Many thanks to them!

Feedback

As always, we’d love to get your feedback. Comment on this blog, tweet @enketo, or post a message in the Enketo forum. If you discover a bug, please let us know what browser you are using.