Trying to get JQVMap to scale properly on iphone
I have a JQVMap set up on a one page website and I am trying to render my map correctly on the iphone, but for the life of me I can’t figure out what’s going wrong. Presumably it is responsive and will scale out of the box, but I've tried media queries and fiddled with some script resizing I found on the example page with no luck.
I have set my worldmap as instructed on the developer page ( http://jqvmap.com/ ) by setting the width and height in the queue.
<div id="vmap" style="width: 600px; height: 400px;"></div>
Looking at the source of the developer page, it doesn't set the inline width and height, and it tries to use some scripts to set the width and height based on the container of its pages.
var map_width = (jQuery('#pages').width());
if(map_width > 480)
{
map_width -= 40;
}
jQuery('.map').css({ 'width': map_width + 'px', 'height': (map_width*.75)+ 'px' });
jQuery('#pages dd, #pages p, #pages div.inner').css({ 'width': map_width + 'px' });
I'm a complete newbie to scripting but happy to take a hit on things and I managed to get the svg map to change its width and height to fit the container div, EXCEPT it is still cut off on the iphone.
I also tried using css and setting max width and max height for my container div in my media queries - it didn't work, the map was even larger than the container and disabled.
I have these meta tags for responsiveness:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
What am I missing here? It looks like it should be rescaling out of the box, according to the documentation, and my map seems happy when I scale my browser window - why not scale it on the iphone? Any help / direction / examples would be much appreciated!
I also tried adding this to my .htaccess file: addtype image / svg + xml.svg
My iphone and ipad work with IOS 8.
source to share
The "scalable" aspect of the jqvmap plugin relates to its use of vector graphics. This does not mean that it will automatically resize or react to resizing viewports out of the box.
For my use of the US map in a Twitter bootstrap flexible layout where the map width is 1.4x in height, I did the following:
1) Remove the inline width and height attributes from the #vmap markup:
<div class="some-parent-element">
<div id="vmap"></div>
</div>
2) Add a function to your site's javascript file that takes the width of the parent element and assigns it to the width of #vmap:
function sizeMap() {
var containerWidth = $('.some-parent-element').width(),
containerHeight = (containerWidth / 1.4);
$('#vmap').css({
'width': containerWidth,
'height': containerHeight
});
}
3) In the document ready function, call the sizeMap function and resize again:
sizeMap();
$(window).on("resize", sizeMap);
Embedded Map is now suitable for iPhone viewport in both portrait and landscape orientation. In addition, it is now responsive to all viewport sizes.
source to share