November 27, 2018 at 05:24 UTC - Views: 37 #57479
I have a web page with a map at https://ohiomosslichen.org/moss-atlas/ that consists of a map of Ohio with each county “mapped” so that when a user hovers over it they can navigate to a page of mosses for that county. When the page is accessed ojn mobile devices however, the image is resized and proportioned differently, so the hover/link effect is all messed up. Is there a way to hold stable the map image so that this page style works on devices, or is it perhaps a problematic way to set up a page and should be done differently? (I really like how it works on a regular computer.)
Columbus Ohio USANovember 29, 2018 at 00:07 UTC - Views: 31 #57495
I think you can do a quick fix to it by adding a min-width to the mapped Ohio image so that it doesn’t shrink on phones. I’m not 100% how that will display on a phone, or if the phone adds a horizontal scroll bar.
But – there are so many tiny counties that I just don’t think you can get a very functional map for a phone even with a responsive map – fingers just aren’t that accurate.
So you might consider an alternative design for phones to have a map and maybe a drop-down selector for the counties. You could blocks with .is-desktop and .is-mobile to show different things on those devices.November 29, 2018 at 00:33 UTC - Views: 30 #57498
I had answered this one but apparently my post disappeared…
The article below gives a potential plugin for a responsive image map (to be tested)
If not, you could also consider making three different, non scalable, image maps, one for desktop, one for tablets, and one for phones, and insert them using the [show_if] shortcode (find detailed syntax in the Add-ins page) so the proper one shows on the proper deviceNovember 29, 2018 at 03:04 UTC - Views: 26 #57500
Thank you so very much! So far I’ve tried the image sizing set to minimum the same # of px as the original image, and that doesn’t work on the phone because it only displays a portion of the image, whatever firs on the screen (no scroll bar). I think I will try the different approaches for the 3 device types, either a non-scalable map or (most likely) just a list of counties for the smaller devices (if the responsive map approach isn’t practicable).
This is greatly appreciated!
BobNovember 30, 2018 at 12:03 UTC - Views: 16 #57504
I use this plugin:
Still works fine.December 1, 2018 at 18:18 UTC - Views: 9 #57513
Thank you so very much. I am hopeful that will be the solution I need.
BobDecember 1, 2018 at 18:25 UTC - Views: 6 #57514
Update …whoa,, that was super-easy, and it worked! yay!!
You must be logged in to reply to this topic.