Skip to content
This repository has been archived by the owner on Mar 24, 2020. It is now read-only.

Responsive? #60

Open
digitaccel opened this issue Dec 18, 2015 · 10 comments
Open

Responsive? #60

digitaccel opened this issue Dec 18, 2015 · 10 comments

Comments

@digitaccel
Copy link

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

@digitaccel
Copy link
Author

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
Copy link

Chay08 commented Dec 28, 2015

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
Copy link

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

@Chay08
Copy link

Chay08 commented Dec 28, 2015

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
Copy link
Author

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
Copy link

Chay08 commented Dec 29, 2015

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
Copy link
Author

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
Copy link

Chay08 commented Dec 29, 2015

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
Copy link
Author

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

@daveerwin
Copy link

daveerwin commented May 1, 2017

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants