topic Re: Using image-map in Survey123 Connect in ArcGIS Survey123 Questions

Using image-map in Survey123 Connect

TracyPorter — Mon, 30 Sep 2019 16:42:17 GMT

I want to use the new image-map appearance feature in Survey123 Connect. We have a reservoir where we would like to ask the public for their feed-back on where we should do habitat improvements. I have a map of the reservoir where I have subdivided the reservoir. I've exported the map to SVG and that didn't work. I've taken a .eps version of the map into Adobe Illustrator and created transparent paths on top of each section of the map and exported the art board to SVG. I can see the map in my survey and I've used the <path> id as a name in my choices list. In short, I think I've done everything the way I'm supposed to but I cannot get it to let me click on one of the sections. What am I doing wrong?Brett Stokes

Re: Using image-map in Survey123 Connect

BrettStokes — Mon, 30 Sep 2019 22:30:01 GMT

Hi Tracy,

Have you seen this blog? It goes through some more detail on getting SVG files to work with Survey123. Check that your SVG file conforms to the minimum requirements listed in the blog. Often things like empty groups can catch you out. If you're still having trouble I'd be happy to take a look.

Brett

Re: Using image-map in Survey123 Connect

Jing_Sun — Tue, 01 Oct 2019 05:24:40 GMT

Hi Tracy,

You can try convert your transparent path (clickable area) to a Compound Path in Illustrator.

Select your transparent path, click Object > Compound Path > Make.

Remember to rename the <Compound Path> according to your path id, and make sure there's no spaces or strange symbols within the name (UTF-8 standard).

Cheers,

Sun

Re: Using image-map in Survey123 Connect

JamieLambert — Tue, 01 Oct 2019 05:57:34 GMT

Hi All,

I have had the same issue when using Adobe Illustrator (I am using CS6). Just got it to work with the help of Brett Stokes. It was painful, but working now! As Jing Sun mentioned, you need to make compound paths. After that I had to group the boxes or polygons into a single group. I placed everything within a single layer (boxes and background image), not sure if that made a difference or not.

In the image below, 'Boxes' is the group. Make sure to rename all the boxes/polygons with their ID before exporting.

Also embed the image (if you are using one) when you export or it won't show up in the survey.

One other item of note: check the SVG file with notepad or something. It may have been all the mucking around I was doing to try and get this to work, but i did notice that some of the ID's had underscores in the output file. You may need to clean that up. Hopefully now that i know what i am doing, going from a clean slate I will not see that issue. Time will tell...

Hope this helps!

Jamie.

Re: Using image-map in Survey123 Connect

AdamLevine — Fri, 18 Oct 2019 16:11:49 GMT

Brett,

I am trying to create a very simple black and white matrix that we use on a survey twice a year. I have read your blog post and the replies below.......everything seems to be in the code however Adobe Illustrator adds a bunch of additional code in the SVG file. Would it be possible to get a little assistance? Should I maybe try a different tool (for my first svg)? I have included the matrix below:

Re: Using image-map in Survey123 Connect

Jing_Sun — Mon, 21 Oct 2019 06:23:42 GMT

Hello Adam,

From my experience, those additional codes don't really matter. Besides, they are also part of the svg image.

My finding is that Survey123 only reads named path.

Therefore, only name the clickable path, and delete the names of the other paths (that you want to be displayed but don't want user to click on).

And so far, I consider Adobe Illustrator as the best tool for creating svg images for used in Survey123. I have tested the Inkscape and Affinity Designer, they are great tools for image creation, but Survey123 might have troubles reading the svg images produced from these programs.

Cheers,

Sun

Re: Using image-map in Survey123 Connect

AdamLevine — Mon, 21 Oct 2019 12:08:07 GMT

Thanks Sun! I must be fairly close.

Best,

Adam

Re: Using image-map in Survey123 Connect

Chris_Anderson — Mon, 09 Nov 2020 20:32:42 GMT

I must be missing something huge. I have created an SVG file from Adobe Illustrator, adjusted the code to match the minimum requirements, looked at the sample SVG files provided in the sample Survey123 template, and for the life of me, I cannot see where my clickable area is wrong. If anyone can assist, I would greatly appreciate it.I am attaching a copy of the SVG file I am trying to work with.

Chris Anderson

Florida Fish and Wildlife Conservation Commission

Re: Using image-map in Survey123 Connect

BarbaraWebster1 — Mon, 09 Nov 2020 23:49:22 GMT

Hi Chris,

I was able to use your SVG as an image map after I removed the image from the group that it was in and reexported to SVG with the image embedded (see attached).

-Barbara

Re: Using image-map in Survey123 Connect

Chris_Anderson — Tue, 10 Nov 2020 12:27:39 GMT

Thanks, Barbara. It works perfectly.

Re: Using image-map in Survey123 Connect

DanaLRobinson — Mon, 06 Dec 2021 19:30:19 GMT

Barbara,

I am having a similar problem as Chris. I have tried every which way to export the SVG from Adobe Illustrator, and get a great schematic on the screen, but nothing will Click. We have tried with the background image in a group, and not in a group. We have checked to make sure there are not "too many" - read any - nested groups. We did group the ppt (photo points) and make then yellow. This allowed us to see them on the screen and know they were on top of the image and therefore "clickable", but alas, they were not. Can you provide some feedback?