Welcome to WebmasterWorld Guest from 54.82.10.219

Forum Moderators: open

Message Too Old, No Replies

Advice on making this map interactive

     
2:08 pm on Aug 26, 2016 (gmt 0)

Full Member from GB 

5+ Year Member Top Contributors Of The Month

joined:Mar 26, 2013
posts:264
votes: 34


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?
4:34 pm on Aug 26, 2016 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member andy_langton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Jan 27, 2003
posts:3332
votes: 140


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

[outsharked.com...]
1:40 pm on Sept 7, 2016 (gmt 0)

Full Member from GB 

5+ Year Member Top Contributors Of The Month

joined:Mar 26, 2013
posts:264
votes: 34


Much appreciated Andy. Will definitely have a look. We are currently also looking into SVG: [parall.ax...]
1:11 pm on Sept 8, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2266
votes: 602


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.
12:43 pm on Sept 14, 2016 (gmt 0)

Full Member from GB 

5+ Year Member Top Contributors Of The Month

joined:Mar 26, 2013
posts:264
votes: 34


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members