tester82 Report post Posted January 24, 2014 I have a map with the width and height set to 100% however when I resize the screen the map does not change size like it should. Is fusionmaps responsive to window resizing ?? How is this done? Share this post Link to post Share on other sites
Haritha Report post Posted January 25, 2014 Hi, Do you want the map to occupy the entire page and it should re-size when you re-size your browser window? If yes, please set the width and height of the Div and HTML as 100% using styles in the head section. Ref. <style> html,body,div { width:100%, height:100% } </style> Hope this helps. Share this post Link to post Share on other sites
tester82 Report post Posted January 27, 2014 Hi there, The map will be inside a div on the page. Here is an example of some code: <div id="mapdiv"> FusionMaps.</div> <script type="text/javascript"> var map = new FusionCharts("../flash/FCMap_World8.swf", "Map1Id", "100%", "100%", "0", "0"); map.setDataURL("../flash/data.xml"); map.render("mapdiv"); </script> Share this post Link to post Share on other sites
Haritha Report post Posted January 28, 2014 Hi, Please confirm if you want map to occupy the entire width and height of entire page and want it to re-size when you re-size your window. For Eg. http://docs.fusioncharts.com/charts/Code/MyFirstChart/site-visitor-resize-dynamic.html Do you want to your map to re-size like this? Share this post Link to post Share on other sites
tester82 Report post Posted January 28, 2014 Well it is not the only thing on the page. But yes very similar to how that chart is getting resized. How can I do it? Share this post Link to post Share on other sites
tester82 Report post Posted January 28, 2014 So not the entire width of the page but resize the mapdiv to fit the browser....I still have to display my header and footer on the page along with the map Share this post Link to post Share on other sites
Haritha Report post Posted January 29, 2014 Hi, If you want your map to re-size according to the dimensions of your containing Div, then you may set the dimensions of the map and Div in percentages. You may set the dimensions of HTML,Body,Div elements to 100% and then the dimensions of the map to desired percentage. Ref. <head> <style> html, body { height: 100%; width: 100%; } div { height: 100%; width: 100%; } </style> </head> <body> <div id="mapdiv" >FusionMaps.</div> <script type="text/javascript"> var map = new FusionCharts("../flash/FCMap_World8.swf", "Map1Id", "30%", "30%", "0", "0"); map.setDataURL("../flash/data.xml"); map.render("mapdiv"); </script> </body> When you do this, the map will always occupy 30% of the Div. You may try re-sizing the browser window to see the change. Hope this helps. Share this post Link to post Share on other sites
tester82 Report post Posted January 30, 2014 Works great on chrome however doesnt seem to be working with IE 8. Is it not compatiable? Share this post Link to post Share on other sites
Haritha Report post Posted January 31, 2014 Hi, We created a sample and tested it on IE 8. It seems to be working fine on IE 8 too. Attached the sample for your reference. Do test it at your end and let us know your feedback. Map -resize.zip Share this post Link to post Share on other sites
