Trying to get a JQVMap to scale correctly on iphone

Question

I've got a JQVMap set up on a single-page website, and am trying to get my map to display correctly on iphone, but for the life of me I can't figure out what is going wrong. Supposedly it is responsive and will scale 'out of the box', but I've tried media queries and fiddling with some resizing script I found on the example page, no luck.

I've set my world map div up according to the directions on the developer's page (http://jqvmap.com/), setting a width and height inline.

<div id="vmap" style="width: 600px; height: 400px;"></div>

Looking at the developer's page source, he does NOT set up an inline width and height, and he looks to use some scripting to set the width and height based on his pages container.

 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 am a complete novice at scripting but happy to take a stab at things, and I managed get get the svg map to change it's width and height according to the container div, EXCEPT it was still cut off on the iphone.

I also tried using css, and set a max-width and max-height for my map's container div in my media queries - this didn't work, the map was still larger than the container and cut off.

I have these meta tags for responsive:

<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 seems like this should rescale 'out of the box', according to the documentation, and my map seems happy when I rescale my browser window - why wouldn't it scale on the iphone? Any help/direction/examples would be hugely appreciated!

I've also tried adding this to my .htaccess file: addtype image/svg+xml .svg

My iphone and ipad are running IOS 8.

score 5 · Answer 1 · answered Jun 16 '15 at 18:21

The "scalable" aspect of the jqvmap plugin refers to its use of vector graphics. This does not imply it will automatically resize or respond to changing viewport dimensions out of the box.

For my usage of a US map in a responsive Twitter Bootstrap layout, where the map width is 1.4x the height, I've done 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 that to the #vmap width:

function sizeMap() {
    var containerWidth = $('.some-parent-element').width(),
        containerHeight = (containerWidth / 1.4);

    $('#vmap').css({
        'width': containerWidth,
        'height': containerHeight
    });
}

3) In your document ready function, call your sizeMap function and again on resize:

sizeMap();
$(window).on("resize", sizeMap);

The embedded map is now fitting to the iPhone viewport, in both portrait and landscape orientations. Additionally, it's now responsive for all viewport sizes.

While I mostly got this to work, as soon as I wrapped it into a bootstrap row/etc the "width" of the SVG never changes (the blue does) but not the world SVG see: http://jsbin.com/puwinivoyu/edit?html,css Is there something I'm missing? — ericpeters, Aug 01 '16 at 14:49

score 0 · Answer 2 · answered Jul 23 '15 at 00:56

0

I have just set up styles as follows:

 <div id="vmap" style="      
     min-width:600px;    
     min-height:600px;
     margin-left:10px;
     overflow:hidden;"></div>

answered Jul 23 '15 at 00:56

Oleksii Kyslytsyn

2,458
2
27
43

Trying to get a JQVMap to scale correctly on iphone

2 Answers2