Revision as of 16:11, 29 January 2013 by jasfox (Talk | contribs)

Nokia Asha Web App hands on: location example

From Nokia Developer Wiki
Jump to: navigation, search

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

Article Metadata
Series 40
Created: vivainio (11 Jan 2013)
Last edited: jasfox (29 Jan 2013)

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
    Vvwa templatelist.png
  2. Enter metadata for the application:
    Project name: maptest
  3. Accept defaults for others, enter your email address where requested.
    Vvwa appmetadata.png
  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.).

Vvwa prjexplore.png

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.


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.

Vvwa debuggerdashboard2.png

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) {
function positionError() {

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

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.

Vvwa redbox.png

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:

Vvwa final.png

91 page views in the last 30 days.