pitommasi

Dinamically Resize Map According To Browser Window Size

Recommended Posts

Is there a way to resize the whole map (regardless of the type of map) accordingly to the browser window?

I.E.: if a user changes screen resolution or if he resizes the browser.

Thanks in advance

Share this post


Link to post
Share on other sites
Guest Angie

Hi,

 

I am afraid, FusionMaps does not support the feature you are looking for, at this time.

 

We have taken a note of your request here and added the same in our wishlist.

 

Hope you have a great day!

Share this post


Link to post
Share on other sites

Hi pitommasi,

 

As of now, if you need it urgently, you can go for a work-around. :D

 

How? :wacko:

 

We have a private API function called resizeMap(width, height) :ph34r: where you can pass new width and height of the map as number. Also, you would need to make the map container elements dynamically re-sizable (by css/js etc.) :unsure:

 

Hence, if you just can listen to the resize event of the window and keep on resizing the map calling the function stated above with the resized width and height of the parent container the map will keep on resizing as and when browser window resizes. :)B)

 

I have built a quick sample which can help you out. Mostly working in all browsers, but with your advanced JavaScript skills you can make it rock! code below: :rolleyes:

 

<html>
<head>
	<title>Hits By Country Example</title>
	<script type="text/JavaScript" src="FusionMaps.js"></script>

	<script type="text/JavaScript" ><!--  
		function FC_Rendered(ID)
		{
			window.onresize = resizeMap;
		}
		function resizeMap()
		{
			var parent = getMapFromId("Map1Id").parentNode.parentNode;
			getMapFromId("Map1Id").resizeMap(parent.clientWidth,parent.clientHeight);
		}

		// -->     
	</script>
</head>
<body style="height:100%; padding:0; margin:0;">
	<div style="width:100%; height:100%; overflow:hidden;" > 
		<div id="mapdiv" style="width:100%; height:100%;"> 
			FusionMaps.
		</div>
	</div>
       <script type="text/javascript">
		var map = new FusionMaps("FCMap_World.swf", "Map1Id", "100%", "100%", "0", "1");
		map.setDataURL("HitsByCountry.xml");		   
		map.render("mapdiv");
	</script>

</body>
</html>

 

See it live from : http://www.igcomm.com/show/maps/dynamic-resize :)

 

 

Please find the code attached.

dynamic-resize.zip

Share this post


Link to post
Share on other sites

Cool! I will try it ASAP.

first question, for now:

with

make the map container elements dynamically re-sizable (by css/js etc.)

 

do you mean like this?

width: 100%

Share this post


Link to post
Share on other sites

hi,

 

I suppose there can be various ways in HTML-CSS-JavaScript using which you can make dynamically resizable containers, of which I am not completely aware of. For simplicity, I have used 100% CSS width and height. Again, there can be issues with 100% height. So for these, a DHTML based forum might come handy.

 

Thanks for your feedback. Nice to learn things together. :rolleyes:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now