×

Discussion Board

Results 1 to 6 of 6
  1. #1
    Registered User
    Join Date
    Nov 2008
    Location
    Chile
    Posts
    21

    Question location API and mwl call issue

    Hi,

    The location API (Web Apps 1.5) getCurrentPosition function do not work when a mwl call is made on the same function callback.

    ie:

    Code:
    function getPosition()
    {
     if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(geoSuccess, geoFailure);
        mwl.show('#dosomething');
        }
      else{
     
    // geolocation API is not available, handle the case here
      }
     
    }
    function geoSuccess(position){ 
    /*
    * handle success here
    * use: position.coords.latitude, position.coords.longitude
    *                            position.coords.accuracy and position.timeStamp
    */
    }
     
    function geoFailure(error){
    /*
    * handle failure here
    * use: error.code and error.message
    */
    }
    With the mwl call above
    Code:
    mwl.show('#dosomething');
    , the mwl.getCurrentPosition function is attached to the body onload and the whole page is returned (instead of the single function), but the mwl.getCurrentPosition function do not get fired.

    Is this a bad practice or a server side translation issue?

    Thanks
    Pablo
    --
    Pablo

  2. #2
    Registered User
    Join Date
    Nov 2008
    Location
    Chile
    Posts
    21

    Exclamation Re: location API and mwl call issue

    Update: Seems that the issue is not related to the code in the first post.

    The issue I have is related to html rendering using DOM and after a second callback in a row (like the location API does, first callback is for mwl.getCurrentPosition and the second is for the success/failure function).

    I want to show a map on demand using the location API on dynamically created html container, so in the location api success callback function I created the container and load the map. Is in that situation that the new html code is not rendered.

    Example: use the Map Example v1.5 as base, then overwrite:

    Index.html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>    	
    		<link rel="stylesheet" href="css/style.css" type="text/css" />		
    		<script type="text/javascript" src="mapwrapper.js"></script>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>Ovi Maps Rendering API example</title>
        </head>
        <body>
        
            <script type="text/javascript">  
                // This is called when the page is loaded
                function init() {				
    				// Check if the device supports HTML5 geolocation
                    if (!(navigator && navigator.geolocation)) {
    					// If geolocation is not supported, use default coordinates
                        setMap({ coords : { latitude : "61.4988", longitude : "23.7637" }});									
                    } 
    				
    				else {
    					// If geolocation is supported, use the provided location
    					// if the location request fails, call error callback
                        navigator.geolocation.getCurrentPosition(setMap, positionError);						
                    }				
                }
                
    			// Function to update map to DOM (id: container) background			
                function setMap(position) {
                    
                    var target = document.getElementById("container");	
                    var mapimage = document.createElement("div");
                    mapimage.setAttribute("id", "mapcontainer");
                    target.appendChild(mapimage);
    
                    mapimage.innerHTML = '';
                    mapimage.style.backgroundImage ='url("http://m.ovi.me/?c='+position.coords.latitude+','+position.coords.longitude+'&u='+position.coords.accuracy+'m&nord&w=200&h=200\")';
                    
    				// Set CSS background image by using OviMap class
    				// Note the use of getCSSUrl() to get formatted url for use in CSS
                  /*  target.style.backgroundImage = new OviMap({
                        center : { lat : position.coords.latitude , lon : position.coords.longitude }, 
                        zoom : 12, 
                        size : { width : 220, height : 220 } 
                    }).getCSSUrl();    */            							            
                }
    			
    			function positionError(error){
    				// Replace "loading" text with the error message 
                    var target = document.getElementById("container");
                    target.innerHTML = error.message;	
                    target.style.backgroundImage = "";				
    			}
          				   
    			function Chicago(){
    				setMap({ coords : { latitude : "41.865", longitude : "-87.6343" }});
    			}
    			function Beijing(){
    				setMap({ coords : { latitude : "39.90747", longitude : "116.38982" }});			
    			}
    			function updateMap(){
    				var selList = document.getElementById("selectList");
    				switch(selList.options[selList.selectedIndex].value){
    					case "Chicago":
    						Chicago();
    						break;
    					case "Beijing":
    						Beijing();
    						break;
    					case "my":
    						init();
    						break;
    					default:
    						init();
    						break;
    				}				
    			}
            </script>
            
    		<!-- Options menu for selecting the displayed map -->
    		<div class="navi">
    			<select id="selectList" onchange="updateMap();">
    				<option value="my">My location</option>
    				<option value="Beijing">Beijing</option>
    				<option value="Chicago">Chicago</option>				
    			</select>		
    		</div>
    		
    		<!-- Container DOM -->
            <div id="container"></div>
    						
    		<input type="button" name="button1" class="button" value="Get map"  onclick="init();"/>
    		<input type="button" name="button2" class="button" value="do something"  onclick="mwl.scrollTo('container')"/>					
        </body>
    </html>
    and style.css:
    Code:
     body {
        background: #fff;	
        color: #333;
    }
    
    #container {
        width: 200px;
        height: 200px;
        margin: 5px auto 5px auto;
        border: #FFF 2px solid;	
    	display: block;
    }
    #mapcontainer {
        width: 200px;
        height: 200px;
       
        border: #FFF 2px solid;	
    	display: block;
    }
    #progress {
        width: 220px;
        height: 220px;
        margin: 5px auto 5px auto;
        border: 0;	
    	display: block;
    	text-align: center;
    	font-size: 3em;	
    }
    button{
    	width: 100px;
    	height: 40px;
    	margin: 0 0 0 0;
    }
    .right{
    	margin-left: 10px;
    }
    .navi{	
    	text-align: center;
    }
    select{
    	width: 90%;
    	height: 35px;
    	font-size: large;
    }
    Then execute the example on S40 device.

    What I did here is load the map on demand after the button1 is pressed, not on body onload as the original example.

    Press the button "Get map". The server should return a callback to get the position, and then the success or failure function is called (notice the loading icon).

    On the success function I created the map containter dynamically and set the background to the map url:
    Code:
                    var target = document.getElementById("container");	
                    var mapimage = document.createElement("div");
                    mapimage.setAttribute("id", "mapcontainer");
                    target.appendChild(mapimage);
    
                    mapimage.innerHTML = '';
                    mapimage.style.backgroundImage ='url("http://m.ovi.me/?c='+position.coords.latitude+','+position.coords.longitude+'&u='+position.coords.accuracy+'m&nord&w=200&h=200\")';
    After the second callback the map should be displayed (about 4kb downloaded), but nothing happens. If you execute another javascript code (anything), the updated html is rendered. Press the button "do something" to execute:

    Code:
    mwl.scrollTo('container')
    Then, the map is displayed. Note that was loaded with the first button and was not rendered. This example works on the emulator, but not on device (tested on c2-02, nokia browser 1.5)

    I did something wrong?
    --
    Pablo

  3. #3
    Nokia Developer Expert
    Join Date
    Jun 2008
    Location
    Tampere
    Posts
    833

    Re: location API and mwl call issue

    Hi Pablo,

    I can't see any flaws in your code. Actually I was able to reproduce this issue.

    I'll try to find a workaround for this issue.
    In a simplified case calling mwl.show("#container"); at the end of location success callback fixed this issue, but that does not seem to apply to your app.

    Br,
    Ilkka

  4. #4
    Nokia Developer Champion
    Join Date
    Feb 2011
    Location
    SCL
    Posts
    31

    Re: location API and mwl call issue

    Quote Originally Posted by isalento View Post
    Hi Pablo,

    I can't see any flaws in your code. Actually I was able to reproduce this issue.

    I'll try to find a workaround for this issue.
    In a simplified case calling mwl.show("#container"); at the end of location success callback fixed this issue, but that does not seem to apply to your app.

    Br,
    Ilkka
    I will try to use a timer after the map is loaded, to execute something that force a UI refresh.

    Br,
    Pablo

  5. #5
    Super Contributor
    Join Date
    May 2008
    Location
    Helsinki, Finland
    Posts
    1,098

    Re: location API and mwl call issue

    Hi there, Pablo

    Would be really nice indeed if you could update the result of your finding in this after a refresh to do a little comparison here...

    Best,
    Marko
    [FONT="Comic Sans MS"][COLOR="Blue"][/COLOR][I]Marko Lumivuori
    Technical Support
    +358 40 8019330
    [email]marko.lumivuori@nokia.com[/email][/I][/FONT]

  6. #6
    Registered User
    Join Date
    Nov 2008
    Location
    Chile
    Posts
    21

    Re: location API and mwl call issue

    Quote Originally Posted by Maveric View Post
    Hi there, Pablo

    Would be really nice indeed if you could update the result of your finding in this after a refresh to do a little comparison here...

    Best,
    Marko
    Hi Marko,

    The only way I found to make it work is avoid to create HTML on the successCallback or in the errorCallback functions. If you need to show something after you get the user location, the html code must be created (statically, hidden by css) before, because only css and property changes are applied, and not an addition of new html tags.

    Br,
    Last edited by pablopoo; 2012-02-14 at 20:31.
    --
    Pablo

Similar Threads

  1. SDK 1.0 Location Issue
    By Centrepoint in forum Mobile Java General
    Replies: 6
    Last Post: 2011-10-10, 08:48
  2. Location/GPS Issue
    By julie_777 in forum Symbian
    Replies: 11
    Last Post: 2011-05-20, 10:25
  3. Location capability issue
    By marcos.capra in forum Symbian
    Replies: 2
    Last Post: 2010-08-19, 17:29
  4. 6110 GPS location battery issue
    By cleverbyte in forum Symbian
    Replies: 7
    Last Post: 2008-07-11, 04:09

Posting Permissions

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