Comments (10)
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.
from us-map.
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.
from us-map.
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();
});
});
from us-map.
@Chay08 Is there any negative affect in regards to slowing down the page load time using the js above?
from us-map.
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');
}
});
from us-map.
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.
from us-map.
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.
from us-map.
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.
from us-map.
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!
from us-map.
Yes it does but I just wish I knew why it works. And why is the x coordinate not affected?
from us-map.
Related Issues (20)
- this.paper.safari is not a function HOT 4
- Selecting multiple states HOT 2
- Must tap map twice to follow link HOT 8
- Single active state?
- Check license
- Change hover color of New England and small state label boxes? HOT 2
- show labels for all US states? HOT 1
- Split a state in two HOT 2
- Adding Text or Text box below the map.
- Add State Specific Content in Alert/Tooltip HOT 1
- No onload ability
- On State hover, how to show some description text about the state? HOT 2
- data HOT 1
- Hover Not working HOT 2
- Can this map show regions? (i.e. Highlight multiple states on hover)?
- Output state name instead of state code HOT 1
- how to add if condition in stateSpecificStyles
- Keyboard support
- Distribute through CDN
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from us-map.