Interactive/selectable map based on an image

February 18, 2021 2:39 PM

I am designing a survey for an experiment that involves virtually navigating around a large university campus - my supervisor suggested collecting more fine-grained data of the areas of the campus participants frequent for analysis, and I am trying to figure out how to allow participants to highlight/select areas of the map with my circa-2008 programming skills...

1. I have an image/artist's rendering of the university campus that I want to base this map on (unless you have a good solution involving Google Maps - the current satellite image of the campus isn't the best quality however).
2. We want the participants to be able to select/highlight up to five buildings.
3. We also want them to be able to select/highlight predefined roads and outdoor areas.
4. This will only be accessible on a computer browser so a mobile version isn't necessary.

I haven't really coded or created any website since the 2000's, so my skills are hopelessly out of date. I feel like I could accomplish this through overlaying a lot of transparent/clickable DIVs/PNGs on top of the main image or using Flash in the olden days, but is there a cleaner and more direct way of creating this in 2021? I am tech-literate and comfortable with Googling and editing existing code, but (obviously) not a skilled programmer.

Thank you in advance!

posted by monocot to Computers & Internet (4 answers total)

Cartographer Molly Burhans of https://good-lands.org/services/ has been in the news [New Yorker] these last tuthree weeks. They have a layered mapping App, at various levels of freebiness, which a pal of mine is raving about. I've not checked that out myself.
posted by BobTheScientist at 3:31 PM on February 18, 2021

Absolutely-positioned checkbox form elements on top of an image will do it with HTML + CSS alone. With JS, you can dynamically enforce the up-to-five restriction.
posted by migurski at 5:49 PM on February 18, 2021

One possibility is good old fashioned "image map"

Here's W3School's explanation... define clickable areas of various shapes around the picture.

This doesn't do any hover highlighting or some of the more UI tricks, but it's the fastest and easiest, and it can even do irregular shapes with the POLY option. It is also heavily resolution dependent. So NOT mobile friendly.

But seems none of that matters to you.

You can probably layer this with shape highlights and more JS to do what you want, IMHO.
posted by kschang at 3:39 AM on February 19, 2021

Oh, and there are tons of "image map generators" online, so you don't have to code this manually at all.

Mouseover highlight is also definitely possible with good old jQuery. So I'd imagine you can highlight it in other colors for 'selected', using the free Maphilight JS lib
posted by kschang at 3:49 AM on February 19, 2021