Responsive?

[digitaccel]

Anyone know how to make this responsive using Bootstrap? Changing sizes in media settings doesn't work.

[digitaccel]

I got this to work by creating several maps and hiding/showing in css. Not the most elegant and when I do this the labels are offset unless screen is refreshed.

[Chay08]

I figured out something similar.. I resize the map on page load and also on window resize. It works pretty well. I created a function called resizeMap that sets variables for the width of the #map div and the svg to the window of a surround container (the surrounding container has a 'content' class. Then i call that function after calling the map and call it again on window.resize.

$(document).ready(function() {
    function resizeMap() {
         var mapWidth = $('.content').css('width');
         var svgWidth = $('.content').width();
         var mapHeight = svgWidth *.5; 
         ('#map').css('width' , mapWidth).css('height' , mapHeight +'px');
         $('#map svg').attr('width' , svgWidth).attr('height' , mapHeight);
     };  

   $('#map').usmap({});
   resizeMap();

   $(window).resize(function() {
   resizeMap();
   });
});

[eweisbrot]

@Chay08 Is there any negative affect in regards to slowing down the page load time using the js above?

[Chay08]

I haven't noticed any issues. I wouldn't expect it to since it's not re-initalizing or anything, it's just resizing a div and an svg.

Note that this resizes the map, when you resize the window, but it does not change the font size of the labels... I add if statements to the resizeMap() function to accommodate this, but it's not perfect:

$(window).resize(function() {
                    resizeMap();

                    if ($(window).width() < 992) {
                        $('text').css('font-size' , '24px');    
                    }
                    else if ($(window).width() < 1280) {
                        $('text').css('font-size' , '18px');    
                    }
                    else {

                    $('text').css('font-size' , '16px');
                    }
                });

[digitaccel]

I am using bootstrap and am displaying different maps in different screen sizes by creating two maps and hiding the one that is incorrect for the screen size. I am also displaying labels. The problem I ran into is that the "hidden" map would always have the y coordinate incorrect (x is fine) for the label unless the screen was reloaded at that size. I fixed this by cutting the y coordinate in half for the map that wasn't displayed at the time. Not sure why this works but it does. Would like to know the reason so I can come up with a better solution.

[Chay08]

I'm having a weird problem with the labels, too. Using the solution I posted, I also hid the map on xs screens, because I need the states to be clickable and they are too tiny on phones. But when first loading (with map hidden) on xs screens, and then resizing to make the window wider (thereby showing the map), the label spacing is all messed up. The issue goes away when the map is visible on xs screens. I'll let you know if I find a solution.

[digitaccel]

Chay08. I did the same thing. I created a text div for phones, a smaller map for small screens and a larger map for bigger screens. For the ones that are hidden only I cut the y coordinate in half. That worked for me.

[Chay08]

Silverforce, that does work - Since I'm only using one map and just resizing it, I'm only adjusting it when it's initialized on xs screens. Thanks!

[digitaccel]

Yes it does but I just wish I knew why it works. And why is the x coordinate not affected?

[daveerwin]

Im using a simpler solution css: #us-map svg { width: 100%; height: 100%; }

js: $('#us-map').css('width' , '100%').css('height' , 'auto')

as long as I set the width and height after the page has loaded the map is responsive.