Problem centering map

**Davud** · 2012-09-26, 10:40

Hi,
I can see my default location actually in center of map using chrome browser and this is my code :

Code:

var DefaultLatitude = 38.08013;
var DefaultLongitude = 46.28503;
var defaultZoomLevel = 16;

.....

var mapOptions =
{
    baseMapType: nokia.maps.map.Display.NORMAL,
    center: new nokia.maps.geo.Coordinate(DefaultLatitude, DefaultLongitude),    
    zoomLevel: defaultZoomLevel,
    components: [
		new nokia.maps.map.component.ZoomBar(),
		new nokia.maps.map.component.Behavior(),
		new nokia.maps.map.component.Overview(),
		new nokia.maps.map.component.ScaleBar(),
		new nokia.maps.map.component.ContextMenu(),
        infoBubbles = new nokia.maps.map.component.InfoBubbles()
	]

        .......

        var mapContainer = document.getElementById('map_canvas');
        map = new nokia.maps.map.Display(mapContainer, mapOptions);

    ......

    <style>
    .MapHolder
    {	
	background: none repeat scroll 0 0 #F5F5F5;
	border: 1px solid #DADADA;
	padding: 0px 0px 0px 0px;		
    }
    </style>
    <div id="_DivMapHolder" class="MapHolder">
        <div id="map_canvas" style="height: 100%;">
        </div>
    </div>
}

But with Firefox and IE the map is not centered ! (the center shifted to the left)
The other controls such as ZoomBar, ScaleBar, ... are in true place in both Chrome and Firefox .

How can i fix this problem ?
Tanx

**jasfox** · 2012-10-04, 10:43

If I understand you correctly you are talking about a two to five pixel shift in the rendering of the map
over different browsers. I've used the following sample to demonstrate the problem:

Code:

<!DOCTYPE HTML SYSTEM>
<html>
	<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
		<title>Center or not</title>
		<!-- This file adds two markers to the map and attached tooltips to them. -->
		<!-- No additional feature support is required here. -->
		<script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js"></script>
	
		
		<style type="text/css">
/*<![CDATA[*/
			html {
				overflow:hidden;
			}
			
			body {
				margin: 0;
				padding: 0;
				overflow: hidden;
				width: 100%;
				height: 100%;
				position: absolute;
			}
			
			#mapContainer {
				width:100%;
				height: 100%;
				left: 0;
				top: 0;
				position: absolute;
			}


		 	  
}
/*]]>*/ 
  </style>
	</head>
	<body>
		<div id="mapContainer"></div>
		<script type="text/javascript">
/*<![CDATA[*/				
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you 
// register on http://api.developer.nokia.com/ 
//
			nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); 
			nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
//			
/////////////////////////////////////////////////////////////////////////////////////
/*]]>*/         
</script>

		<script type="text/javascript">

var mapContainer = document.getElementById("mapContainer");


var DefaultLatitude = 52.516237;
var DefaultLongitude = 13.377686;
var defaultZoomLevel = 16;

var mapOptions =
{
    baseMapType: nokia.maps.map.Display.NORMAL,
    center: new nokia.maps.geo.Coordinate(DefaultLatitude, DefaultLongitude),    
    zoomLevel: defaultZoomLevel,
    components: [
		new nokia.maps.map.component.ZoomBar(),
		new nokia.maps.map.component.Behavior(),
		new nokia.maps.map.component.Overview(),
		new nokia.maps.map.component.ScaleBar(),
		new nokia.maps.map.component.ContextMenu(),
        infoBubbles = new nokia.maps.map.component.InfoBubbles()
	]
};

  var map = new nokia.maps.map.Display(mapContainer, mapOptions);

//});


var brandenburgerTor = new nokia.maps.map.StandardMarker(
	new nokia.maps.geo.Coordinate(52.516237, 13.377686)
);
map.objects.add(brandenburgerTor);
 </script>
	</body>
</html>

Looking at the top left hand corner of the map by the Platz der Republik the roads can be seen to be shifted slightly.
However I don't think the API is at fault - this appears to be a difference in the CSS rendering of the underlying <div> for the map container.

If you alter the CSS styling as shown (to use absolute sizing):

Code:

#mapContainer {
				width:300px;
				height: 300px;
				left: 0;
				top: 0;
				position: absolute;
			}

The problem goes away - all the browsers I've tested render an identical map. Note where the roads meet in the park on the left.

I guess that Chrome is interpreting the percentage sizing more accurately than the others and therefore is better at accurately displaying the contents of the <DIV> .

Discussion Board

Thread: Problem centering map

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

Is vertical centering of text possible?

Problems centering images on Nokia handsets

centering video from server on screen - Sizing

MIDP 2.0 setFullScreenMode - image not centering properly

Posting Permissions