Nokia Asha Web App hands on: location example

Comments

Hamishwillee - Looks like an interesting topic

I can't find any similar topics in the Category so thanks!

Any idea when you might finish this? Let me know when you're done and I can give it a quick subedit.

Regards

Hamish

hamishwillee 09:05, 23 January 2013 (EET)

This article is finished, so edit ahead.

--vivainio 09:52, 23 January 2013 (EET)

Hamishwillee - Thanks, did basic wiki style subedit

thanks, I did a very basic review against Help:Wiki Article Review Checklist to do stuff like make filenames bold, and inline object into Icode text.

In the ArticleMetaData can you specify the phones, platform versions and SDK you used to write/test this with?

Regards

Hamish

hamishwillee 06:34, 24 January 2013 (EET)

Mr.killer - Thx for this excellent article

I am using nokia development platform for first time and everything worked out smoothly.

Mr.killer 22:34, 21 March 2013 (EET)

Log in or Join to leave comments.

This article provides a walk-through of a trivial Series 40 Web App for fetching a map tile.

Article Metadata

---

Article

Created: vivainio (11 Jan 2013)

Last edited: hamishwillee (09 May 2013)

See Also

• RESTful Map API
• Map API for Java ME
• Static Maps with Java ME

Getting started

In overview, we create an app with a button, and a div with map. Pressing the button fetches a map to the div using the Nokia Maps REST API.

1. First, we create the application: File -> New -> Series 40 web app (wgt). Select "Basic project" template

   

2. Enter metadata for the application:

   Project name: maptest

3. Accept defaults for others, enter your email address where requested.

   

4. Basic project settings:

   Enter your email address, fill in the other information that is being asked.

Now, browse the project to learn about the overall layout; index.html is the HTML for the user interface, s40-theme.css contains css for a good Asha UX (S40 style buttons, etc.).

Preview the empty project (Local preview, ctrl+r), followed by cloud preview Ctrl+Alt+R. Both local on cloud preview open the application in a webkit based simulator, but cloud preview actually uploads the application to the proxy server where all the javascript is executed. Local Preview is useful for interactive debugging, while Cloud Preview is useful for periodic testing to account for subtle differences between the javascript/dom environments being used.

Interaction

Let's get some action on the screen.

Add a clickable button on the page under "content" div:

<div class="ui-button" onclick="getLocation();">Get My location</div>

Run local preview, open debugger, and select console view.

In the preview, press "Get My Location" button, note the error messages in the console.

Now let's actually add getLocation function. We need a new javascript file for this functionality, add it (right click on maptest -> s40-theme -> js in project explorer), select New -> File, name it "maps.js".

Add the function, and some dummy functionality for callback:

function getLocation() {
 
	if (navigator && navigator.geolocation) {			
		navigator.geolocation.getCurrentPosition(setMap, positionError);			
	} else {
		console.log("Geolocation not supported");
	}				
}
 
function setMap(position) {    
	console.log(position.coords.latitude);
}
 
function positionError() {		
	console.log("error");
}

Add a reference to the created maps.js file index.html:

<script language="javascript" type="text/javascript" src="s40-theme/js/maps.js"></script>

Note how clicking the button now shows (simulated) latitude.

Next, add a new "div" to index.html, to contain the map element. Set the id as mapContainer so that we can find the div again:

<div id="mapContainer" class="map"> 		
</div>

Add css rules to make this 200px by 200px in size:

Find s40-theme.jss, add the following rule:

.map {
	width: 200px;
	height: 200px;	
	background-color: red;	
}

We made it red just to see the area, we'll put a real map there soon.

Change the background-image css attribute of the the div in setMap():

    var target = document.getElementById("mapContainer");	
 
    target.innerHTML = "";	
 
    mapImageURL = 'http://m.nok.it?nord&c='+ position.coords.latitude +','+ position.coords.longitude +'+&h=200&w=200&z=10';
 
    var cssURL = 'url("' + mapImageURL + '")';    
    target.style.backgroundImage =  cssURL;

Also remove the placeholder background-color attribute from .map css, so it becomes just :

.map {
	width: 200px;
	height: 200px;	
}

Now run it, and bask in the glory of fully operational application: