Advice on making this map interactive

[Shai]

Hi All, we are publishing a study next week and need some advice. The study will contain some UK maps which we would like to make slightly interactive.

You can see the sort of thing we want here: [dropbox.com...]

However, we want to make it so that when you hover over the areas, a box will pop up with the name of the area and some data.

The study will be published on a WordPress platform.
Mobile friendly is a necessity but we don't mind if the there is no click functionality. I.e. in mobile, just use the png as is.

Any advice will be very much appreciated.
Regards,
Shai


Any advice on how to achieve this?

[Andy Langton]

Have a look at HTML image maps, and specifically this jquery plugin:

[outsharked.com...]

[Shai]

Much appreciated Andy. Will definitely have a look. We are currently also looking into SVG: [parall.ax...]

[NickMNS]

I code mostly in Python, and I have used [github.com...] to generate maps in SVG. Not only does it generate traditional maps, but you can generate maps where the different regions are squares or hexagon, but the approximate shape of the whole region is maintained. IMO, this looks cool and makes the tap targets easier to hit on mobile.

Popovers are not generated automatically by the package so I customize the code to add bootstrap popover functionality. I am not sure if this will suit your needs given that you will be using WP, and requires some coding.

One note, if you want the map to be mobile friendly, definitely stick with SVG, and do not use hover, as mobile users will not be able to hover with a touch screen. Click or tap to display the popover.

[Shai]

Thanks NickMNS. Its definitely the direction we are taking. Have one completed already and it looks really good.