CODEWITHSUNDEEP
jquerysvgresponsive-designmedia-queriesjqvmap
user1959344
user1959344

Reputation: 31

Trying to get a JQVMap to scale correctly on iphone

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.

Upvotes: 3

Views: 2246

Answers (2)

Oleksii Kyslytsyn
Oleksii Kyslytsyn

Reputation: 2426

I have just set up styles as follows:

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

Upvotes: 0

Matthew3k
Matthew3k

Reputation: 191

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.

Upvotes: 5

Related Questions