×

Discussion Board

Results 1 to 2 of 2
  1. #1
    Registered User
    Join Date
    Sep 2012
    Posts
    1

    Problem centering map

    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

  2. #2
    Nokia Developer Moderator
    Join Date
    Aug 2011
    Location
    Berlin
    Posts
    288

    Re: Problem centering map

    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> .

Similar Threads

  1. Is vertical centering of text possible?
    By MobileVisuals in forum Mobile Java General
    Replies: 10
    Last Post: 2010-07-17, 15:40
  2. Problems centering images on Nokia handsets
    By sabroni in forum Browsing and Mark-ups
    Replies: 0
    Last Post: 2008-09-30, 15:14
  3. centering video from server on screen - Sizing
    By js001 in forum Mobile Java Media (Graphics & Sounds)
    Replies: 3
    Last Post: 2008-04-18, 11:59
  4. MIDP 2.0 setFullScreenMode - image not centering properly
    By dkainer in forum Mobile Java Media (Graphics & Sounds)
    Replies: 5
    Last Post: 2004-06-29, 11:03

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •