How To

How to make your own mapping app on your N95

Josh Knowles

Learn how to make your own customizable mapping app using Mobile Processing and the GPS on your N95.

In my last article about Mobile Processing and the N95, I showed you how to use the mLocation library to easily get the geoposition of your phone. It only took a few lines of code and was remarkably simple.

Now I'm going to show you how to use this feature along with the Yahoo! Maps API [1] to make a simple mapping application similar to the Maps application that comes pre-installed on the N95. It won't be quite as fancy, but since you will have the actual code, you'll be able to customize it however you would like.

If you need help installing Mobile Processing, please refer back to my previous article [2] on the topic. I'm going to assume here that you know how to export MIDlets to the phone, install, and run them – so I’ll concentrate on the code itself.

Our GPS Grabber

Here's the code we used to grab the GPS data from the phone:

import mjs.processing.mobile.mlocation.*;

PFont font;
double[] coords = new double[2];

void setup() {
font = loadFont();
textFont(font);
textAlign(CENTER);
MLocation.location(coords);
}

void draw() {
background(0);
text("Latitude : " + coords[0], width/2, height/2-10);
text("Longitude : " + coords[1], width/2, height/2+10); }

Remember that doing so requires the mLocation library. If you haven't installed that, please refer to my previous article on the subject.

Remember, also, that if you run this on the emulator on your computer you'll probably get an error since there is no GPS unit to access.

The key parts for grabbing GPS data are:

import mjs.processing.mobile.mlocation.*;

This imports the library so Mobile Processing knows what the new functions are.

double[] coords = new double[2];

This sets up our array which will be populated with GPS data.

MLocation.location(coords);

This grabs the latitude and longitude of the GPS device itself, in this case your N95.

And then "coords[0]" holds the latitude and "coords[1]" the longitude. You can use those anywhere as normal variables.

Thats the extent of it.

Yahoo! Maps API

Let's set that aside for a moment and write another program which grabs a map from Yahoo! and displays it. To begin, we'll just hard-code in a geolocation. After we get this running properly we'll add the GPS-grabbing code. Why? For one thing, we will save time if we don't have to deploy to the phone every time we want to test the Yahoo! Maps API piece.

(An "API," by the way, is an "application programming interface." If you're not familiar with this concept, don't worry. I'll guide you through it and you'll see that APIs aren't really that scary. In fact, they're the backbone of the new open web. Most major sites have APIs of some flavor.)

The specific Yahoo! Maps service we'll be using is the Yahoo! Map Image API [3]. This service lets us grab an image of a map of whatever size we'd like, centered on whatever location we'd like. You might want to take a moment to poke around the Yahoo! page about this service, just to get an idea of what it's all about.

The Code

To start, I'm going to dump a huge pile of code on you. Then we're going to go through it and look at exactly what's going on. Have no fear!

PClient clientXML;
PClient clientMap;
PRequest requestXML;
PRequest requestMap;

PFont font;
PImage mapImage;
String xml;
String mapURL;

// Battery Park, NY
double latitude = 40.703717;
double longitude = -74.016094;

void setup() {

clientXML = new PClient(this, "local.yahooapis.com");
clientMap = new PClient(this, "gws.maps.yahoo.com");

font = loadFont();
textFont(font);

noLoop();

}

void draw() {
background(0);
fill(255);
if( mapImage != null ) {
image(mapImage, width/2-mapImage.width/2, height/2- mapImage.height/2);
} else {
text("Getting map...", 4, 4, width - 8, height - 8);
requestXML = clientXML.GET("/MapsService/V1/mapImage?
appid=nseriesdemo&latitude=" + latitude + "&longitude=" + longitude + "&zoom=2&image_height=" + height + "&image_width=" + width);
}
}

void libraryEvent(Object library, int event, Object data) {
if (library == requestXML) {
if (event == PRequest.EVENT_CONNECTED) {
requestXML.readBytes();
} else if (event == PRequest.EVENT_DONE) {
xml = new String((byte[]) data);
int start = xml.indexOf("instance\">") + 10;
int end = xml.indexOf("");
mapURL = xml.substring(start, end);
requestXML.close();
requestMap = clientMap.GET(mapURL.substring(25));
}
}
if (library == requestMap) {
if (event == PRequest.EVENT_CONNECTED) {
requestMap.readBytes();
} else if (event == PRequest.EVENT_DONE) {
mapImage = loadImage((byte[]) data);
requestMap.close();
redraw();
}
}
}

Yeah, that's a lot of code. Let's break it into four parts to see how it works.

Here's the first part:

PClient clientXML;
PClient clientMap;
PRequest requestXML;
PRequest requestMap;

PFont font;
PImage mapImage;
String xml;
String mapURL;

// Battery Park, NY
double latitude = 40.703717;
double longitude = -74.016094;

These are our global variables. We're going to grab the Yahoo! map image over the network, so we need to sent up a Processing Client and Request ("PClient" and "PRequest") object for each network call.
Grabbing a map image from Yahoo! requires two network requests, one for an XML file which contains the image URL and then one for the image itself. It's a bit weird, this two-stage process. But that's how Yahoo! does it. So we make a PClient and PRequest for each, the XML and the map image.

After this we set up our other variables - the font, the image itself  and some strings. Note that these objects that start with a "P" - "PFont", "PImage" - are Mobile Processing-specific objects.

And finally we hard-wire some coordinates. We'll hook them up to GPS later. For now, I'm just using the location of Battery Park in Manhattan. These variables are of the "double" type, as well. We must use this type in J2ME when we want to have decimal places. The "float" data type won't work.

The second part, now:

void setup() {

clientXML = new PClient(this, "local.yahooapis.com");
clientMap = new PClient(this, "gws.maps.yahoo.com");

font = loadFont();
textFont(font);

noLoop();

}

If you've been following along with my Mobile Processing articles, this should be very familiar. It's the standard Mobile Processing setup function. It runs once, right when you launch the app.

You'll see we start by setting up our requests. You just have to set the domains you're going to pull data from, in this case the two Yahoo! Maps API domains. Then we set up the font stuff - nothing terribly complex there. Then we put the application in "noLoop()" mode. This means that the "draw" function will run just once and then stop. If we want to run "draw" again, we have to specifically ask for it.

And our third part:

void draw() {
background(0);
fill(255);
if( mapImage != null ) {
image(mapImage, width/2-mapImage.width/2, height/2- mapImage.height/2);
} else {
text("Getting map...", 4, 4, width - 8, height - 8);
requestXML = clientXML.GET("/MapsService/V1/mapImage?
appid=CHANGETHIS&latitude=" + latitude + "&longitude=" + longitude + "&zoom=2&image_height=" + height + "&image_width=" + width);
}
}

This, also, should look familiar to you. It's our "draw" function - which because we called "noLoop()" will just run once unless we specifically ask for it again.

"background(0)" sets our background to black. "fill(255)" sets the text color to white.

Then we do something tricky. We say "if the map image has some data (aka, if it's not null), then draw the image on the screen. Otherwise, write text saying that we're getting the map." This will make a bit more sense after we look at the fourth part of our code. Then - if the map image is not loaded - we do our network request to get that image. That's the "requestXML" line.

Note! See in that last line where it says "appid=CHANGETHIS"? Change "CHANGETHIS" to be something else. Anything made out of letters and numbers. Yahoo! uses this to keep track of you and each appid can only grab 50,000 map images per day. Make it something like "myname" or something like that. If you read that line you should see how we're requesting our image. You'll see a "latitude" variable in there. And "longitude". And "zoom". The lower this number, the closer the zoom.
Play with it, if you'd like. And the "image_height" and "image_width".
For these, we're going to use two variables hard-wired in to Mobile
Processing: "height" and "width". These are automatically set to the screen size of the device you're using, so we don't have to worry about figuring out the exact resolution of the N95 screen. This gives it to us for free (and makes it somewhat easier to write cross-platform apps).

So here's that fourth part:

Okay. So this is some weird stuff. If you're new to Java or Mobile Processing, you might have to accept for now that it does, in fact, work. You can take your time learning exactly how it works. I'm going to give a quick run-through, but it's a bit weird.

This "libraryEvent" function basically listens to the client requests and does things based on what's going on with those. So, when we ran this line in the "setup" function:

requestXML = clientXML.GET("/MapsService/V1/mapImage?
appid=CHANGETHIS&latitude=" + latitude + "&longitude=" + longitude + "&zoom=2&image_height=" + height + "&image_width=" + width);

When we run this it fires off the "PRequest.EVENT_CONNECTED" library event when successfully connected, at which point it executes the line "requestXML.readBytes();" which reads the data from that URL.
Make sense, sort of? Okay. Then when it's done reading that data, it fires off the "PRequest.EVENT_DONE" code, which here takes that data, puts it into a string called "xml" and then pulls out the URL of the map image that we want. Then it takes that and does another request for the actual map image (in PNG format). The block of code starting "if (library == requestMap) {" then takes care of that.

This is complicated, but it's necessary to wrap your head around if you want to really understand how to make requests for data over the network using Mobile Processing.

Francis Li has another good example called Fetch [4] on the Mobile Processing site, and of course take a look at the reference pages for PClient [5] and PRequest [6].

Running the App

Okay. So save that chunk of code as "Yahoo_Map_Maker" and run it. It should say "Getting map..." for a few seconds and then show a map of Battery Park.

And then deploy it onto your N95. The same thing should happen.

Did it? Great!

Adding the GPS

Now we're going to play a game. To test your Mobile Processing chops, can you add the GPS-grabbing code into this "Yahoo_Map_Maker" code so that instead of being fixed on Battery Park it shows a map of your GPS location?

You'll need to do a few things to make it happen:

•	You'll have to import the mLocation library. Remember how to do that?
•	You'll then need to set up an array and grab the GPS coordinates and put them into that array.
•	Then you'll need to use those coordinates to grab the map from Yahoo! instead of the fixed coordinates.

Three steps. Try it out.

Did you get it to work?

Here's how I did it:

import mjs.processing.mobile.mlocation.*;

PClient clientXML;
PClient clientMap;
PRequest requestXML;
PRequest requestMap;

PFont font;
PImage mapImage;
String xml;
String mapURL;

double[] coords = new double[2];

// Battery Park, NY
double latitude = 40.703717;
double longitude = -74.016094;

void setup() {

clientXML = new PClient(this, "local.yahooapis.com");
clientMap = new PClient(this, "gws.maps.yahoo.com");

font = loadFont();
textFont(font);

noLoop();

MLocation.location(coords);

latitude = coords[0];
longitude = coords[1];

}

void draw() {

background(0);
fill(255);
if( mapImage != null ) {
image(mapImage, width/2-mapImage.width/2, height/2- mapImage.height/2);
} else {
text("Getting map...", 4, 4, width - 8, height - 8);
requestXML = clientXML.GET("/MapsService/V1/mapImage?appid=
CHANGETHIS&latitude=" + latitude + "&longitude=" + longitude + "&zoom=2&image_height=" + height + "&image_width=" + width);
}
}

Right at the top I imported the mLocation library.

Then I set up my "coords" array:

double[] coords = new double[2];

Easy.

Then I queried the GPS with mLocation and put the results in the more easily readable "latitude" and "longitude" variables:

MLocation.location(coords);

latitude = coords[0];
longitude = coords[1];

Deploy this and run it. It should bring up a map of the area where you are. Beware: It might take up to a minute for the GPS to connect, and then you'll have to wait a few more seconds for the map to download. Be a bit patient. If it doesn't work, quit it and try reloading.

So there you have it.

I can’t wait to see what kind of amazing mapping applications you make with this. Please share in the comments section!

[1] http://developer.yahoo.com/maps/
[2] http://workshop.nseries.com/2008/01/17/how-to-write-apps-with-mobile-processing-on-your-n95/156
[3] http://developer.yahoo.com/maps/rest/V1/mapImage.html
[4] http://mobile.processing.org/learning/example.php?name=fetch
[5] http://mobile.processing.org/reference/reference.php?name=PClient
[6] http://mobile.processing.org/reference/reference.php?name=PRequest

Comments (126)

gps
marsee luc 12:00 am 12.22.07

Thank You
Abhijeet 12:00 am 12.23.07

good
ericyu55 12:00 am 12.26.07

is so cool
maxlee 12:00 am 12.31.07

“I just purchase maps for australia and still can not get voice command to work, can someone help me please pawko65@hotmail.com“
paul 12:00 am 01.03.08

so wonderfull
mohamed 12:00 am 01.04.08

very fantastic
Neeraj Bhasu 12:00 am 01.06.08

congratulations ! u redescovered the wheel ! nice job
the last samurai 12:00 am 01.06.08

its cool and very useful.I knew it earlier.
Neeraj Bhasu 12:00 am 01.06.08

i love nseries
an 12:00 am 01.07.08

“I had download the nokia maps 1.0 upgrade file. I would like to know where to put the file in order to show the map on my phone. Thanks”
Lisa 12:00 am 01.08.08

Good
Arvind 12:00 am 01.08.08

merci a tout le monde jaime les portables
yahya 12:00 am 01.08.08

thankyou
yahya 12:00 am 01.08.08

WoW!!!!
Shije.hun 12:00 am 01.09.08

HELLO!! A LITTLE WORLD…
KAE_SNHY 12:00 am 01.09.08

thanks
simsek 12:00 am 01.10.08

thanks
simsek 12:00 am 01.10.08

ok good luck
putra 12:00 am 01.10.08

Other learning sources are the Python for S60 documentation (which is a pretty complete reference about available features) and the Python section of Forum Nokia Discussion Boards
Bogdan Galiceanu 12:00 am 01.10.08

“Hi Lisa, Did you download the file to your computer or directly to the phone? Thanks for your comment!”
Jose 12:00 am 01.11.08

i love it
zan 12:00 am 01.11.08

This is one of the best phones i ever seen cant wait till i get it
Lane greenwood 12:00 am 01.12.08

“i have tried to set Yahoo mail POP setting to my nokia N95, but it didnt work. can you check it again pls? thanks”
Tom 12:00 am 01.12.08

i have tried this with yahoo it just times out when trying to connect connection
craig 12:00 am 01.13.08

super
villiv 12:00 am 01.14.08

“Hi Tom and Craig, One more thing… If you still want to get your regular Yahoo email on your NSeries, download the Yahoo Go client - it will give you email for free.”
Jose 12:00 am 01.14.08

In the past Yahoo used to offer POP with all their accounts using ports 110 and 25. Now in order to get POP one needs to pay for Yahoo Mail Plus! I’ll make a note on the post. Thanks.
Jose 12:00 am 01.14.08

nokia n95
ashraf 12:00 am 01.15.08

not working at all with my N95
Jimmy 12:00 am 01.15.08

how can i connect to internet?
kieu nguyen 12:00 am 01.16.08

my nokia from kululamer wheh i asked to restore factorey seeting need from me pass word. 12345 i give tell me rong pass word? how can i solve?
moataz ahmed 12:00 am 01.16.08

will the software for these kits be made available to the public?
edgar 12:00 am 01.16.08

“Hi Ashraf, If you download the maps to your memory card you’ll be fine.”
Jose 12:00 am 01.17.08

hwat is the price?
daniel 12:00 am 01.17.08

Have problems transfer music from PC. Is it required that I have window media 11. Because I have 10. And all my music in itunes
Claude 12:00 am 01.17.08

“@Jimmy To make things clear, you need to do those steps from your Gmail account online, not on the phone! So Log in to your GMail account>Settings>Forwarding and POP/IMAP>Enable Imap .”
Jose 12:00 am 01.17.08

“Hi Jimmy, For Gmail - make sure you go to Settings>Forwarding and POP/IMAP>Enable IMAP. For Yahoo, read the other comments. Enjoy!”
Jose 12:00 am 01.17.08

its great experiences phones
akhmad fauzie 12:00 am 01.18.08

i want my GPS.
Fahad Tamimi 12:00 am 01.19.08

hi many thanks it work for me i am well pleased now
dennis bramwell 12:00 am 01.22.08

How to get access to msn hotmail?
Peter Jermann 12:00 am 01.22.08

i like dis phone .. how much is it ?
Ali 12:00 am 01.23.08

hello.. how could i change my v11.0.026 to v15.0.015
wines 12:00 am 01.24.08

“And if you want to build Internet applications that run on your mobile device, you can get a free web server here: http://mymobilesite.net. It includes Python as well.”
Jukka 12:00 am 01.24.08

thanks
davud 12:00 am 01.25.08

“I have N73 i need rotate me application. Whenever i try installing it on my N73 it says product has expired so can you send/mail me the correct application on my Email ID: Karanstyle@gmail.com Thanks”
karan 12:00 am 01.26.08

thanks
DONALD 12:00 am 01.27.08

How do I delete an email account I set up on my N95-1
Chris 12:00 am 01.27.08

best
yaseen 12:00 am 01.28.08

i like this cellphone
nima 12:00 am 01.29.08

good one
hanan 12:00 am 01.29.08

Is there an accelerometer in N81?
George 12:00 am 01.30.08

my foe is the same nokia 95 and i tred all off that… it does work for me.. dis fone sucks
Romnick Monte 12:00 am 02.01.08

all good
pughy 12:00 am 02.03.08

this is all in the user manual if you bothered to read it.
Bukc Mulligan 12:00 am 02.06.08

“i downloaded the SUN wtk kit , then the mobile processing IDE, and now im lost. need help”
patteeh 12:00 am 02.13.08

good
gaga 12:00 am 02.16.08

!!!
mihai 12:00 am 02.18.08

n95
volkan 12:00 am 02.19.08

i downloadthe lightsaber but it ont open when i try to open it and i saved it to bth phone and memory card what is the problem
hi 12:00 am 02.21.08

very happy with nokia n95
pip 12:00 am 02.23.08

Brilliant device but now my can see if i stop for a pint from the laptop when I am out on a bike ride !!!!!!
Mark 12:00 am 02.25.08

“Hello everybody..i’d like to ask u a question…is there a Nokia which can read AutoCAD files, (dwg.files) if yes…just recommend me which one!!! Thanks /Bulgaria/”
Mr.Dimitroff 12:00 am 02.27.08

i will use it
mohammad 12:00 am 02.28.08

very goood
paolo 12:00 am 03.01.08

N82 is the most floop set of i ever seen in market.
thinkandguess 12:00 am 03.06.08

Very good!
Ricardo 12:00 am 03.17.08

I like that beatiful mobile n958gb
khalid tarek 12:00 am 03.18.08

i have this phone it is damn goooood!
Fillip 12:00 am 03.21.08

Just got the N95-4 and loving it.
stanjeff 12:00 am 03.26.08

“Inside the menu, instead of saying Nokia Maps, it instead says ’smart2go’. I opened the application and it loads to 100% but it goes back into menu. What happened? Pls help!!!”
Nathan 12:00 am 03.30.08

I downloaded the Nokia Maps 1.2 s60 3rd edition onto my phone but i installed it and says installation complete but it won’t open.
Nathan 12:00 am 03.30.08

this phone is the best and the coolest phone ever thanks to nokia…
McGrath 12:00 am 04.01.08

what about China N95 SERIES MOBILE settings ofGPRS & Internet?
D.N.Singh 12:00 am 04.30.08

“when comparing with any other phones nokia is the best, when comparing with all nokia phones n95 is fantastic”
naveen kumar 12:00 am 05.02.08

i want to get one mobile like that
ahmed zayed 12:00 am 05.03.08

That’s right - Yahhoo Go for mobile is the application that works to access your Yahoo email. The interface is nice and easy to use - however I’m not able to keep it active all the time. Any suggestio
Wilson 12:00 am 05.03.08

“I have N95 8gb on Vodafone branded in the UK & cant get the update, any idea when I will be able to get it???offter”
chris 12:00 am 05.06.08

ok
mario davidov 12:00 am 05.07.08

Its really a fantastic phone really full of features and …. simply excellent ……………
Prateek Srivastava 12:00 am 05.07.08

tutto ok
peppe 12:00 am 05.08.08

no
peppe 12:00 am 05.08.08

I like to down load muisc
leo jabbari 12:00 am 05.08.08

“I am on three network in UK and i cant update my firmware, it says no new firmware available right now..wht should i do, and when will the new firmware available???”
Cool 12:00 am 05.08.08

“The Normal N95 Is Much Better Than The 8GB Version… With The Normal N95 You Can Expand It To 32GB… I’m Still Going To Get The N96 Though… 16GB Built In And Again 32GB Expandable.. 48GB!”
Roger 12:00 am 05.08.08

n95 8GB is marvellous
hatemsalah 12:00 am 05.08.08

nokia n95 is the most advantantage will compare with other mobile phone
ranjith kumar 12:00 am 05.09.08

the n95 i ok i just the sat nv service should have been free?its all the the money thase days other wise its briliant.
keish 12:00 am 05.09.08

simple question- where and how to download it from? should i do it from my phone ? i wanted to download on my PC and then install it from computer onto the phone. Is it possible?
mel 12:00 am 05.10.08

still not able to disable the capture tone on the camera.
Jay 12:00 am 05.10.08

is there update in n95 that has auto screen rotator?
marion 12:00 am 05.10.08

gimmme
peter 12:00 am 05.11.08

Turn off the warning tones in settings-general-personalisation-tones and your camera will no longer make any noise.
Wagane 12:00 am 05.12.08

“If you turn off the warning tones in settings-general-personalisation-tones, you’ll find that the camera makes no moises at all. I prefer with the noise though.”
Wagane 12:00 am 05.12.08

hello
Phong 12:00 am 05.14.08

gracias
jordi ingles 12:00 am 05.14.08

“I wonder if the software has been tested before release, has it! Why does not Nokia respond to any e-mails with bug reports!”
JAO 12:00 am 05.15.08

“The device is useless as a PNP-device connected to a computer, as it is unable to control almost no devices and the picture- and audio quality is bad. When shooting video, the capture-stream hangs…”
JAO 12:00 am 05.15.08

“Starting up the camera is slow, very slow. When plugging in a handsfree set, the volume is muted without displaying the volume-muted icon on the screen. The same goes when the handsfree is detached.”
JAO 12:00 am 05.15.08

Unfortunately this release is pretty unstable. Upon receiving SMS my phone hangs and vibrates until I turn it off and back on again. This is the most annoying of the bugs found…
JAO 12:00 am 05.15.08

i need mt6227 driver for Vista. i use n95 8gb
Martin Caleni 12:00 am 05.16.08

usb
gtwose 12:00 am 05.16.08

very good
amr_muhamed 12:00 am 05.17.08

u should update the vesion of N91.i am waiting for it.do something.
deval 12:00 am 05.18.08

I have update the firmware of N95-2 but after that many programs hangs and my NNPCS didnt want to load in my PC. Can nokia helped me. I cant use Nseries pc suite in my computer to update my handphone
Angie 12:00 am 05.21.08

YOUR THE BEST
BLIPPEN 12:00 am 05.23.08

cool.. how can i get it or download it
bryan 12:00 am 05.27.08

“Where do I download this from?? Can I download it from the Nokia PC Suite? Thanks,”
Maad Sheikh 12:00 am 05.27.08

How get language pack with Bulgarian with new version softhware?
plamenko 12:00 am 05.31.08

when update nokia n95 firmware again? for automatic screen rotation!!!
theong 12:00 am 06.02.08

al sa7 2nda7 2npo
papo 12:00 am 06.03.08

kick ass
david chetwynd 12:00 am 06.14.08

“Nice, but easy to figure out just by playing with settinsg. Now, what would be even more interesting is how to increase the number of standby apps you can start, like to maybe 10 apps.”
Christopher 12:00 am 06.15.08

this rocks
Shirley 12:00 am 06.19.08

is it [pos to download dvds on to phone
mark 12:00 am 06.26.08

nice phone
rahabarali 12:00 am 06.29.08

n95 is very good cellphone very highteck thanks to nokia
james 2:26 am 07.17.08

i like nokia
james 2:27 am 07.17.08

I just bought nokia 95 8G becaues I need the map and GPS
maps 2.0 should be installed on it
dont know if it is or not
but cant go to eitherk, and when I do I get nothing but a ball in the ring “:earth” and no zoom or active maps
how can you help me, or did I made a bad buy
matthew karout 12:30 pm 07.27.08

battery low
amir 6:14 pm 08.07.08

battery low
no usefull battery
you must get better noki…
amir 6:32 pm 08.07.08

hallo
barendina spies 3:09 pm 08.11.08

i love the nokia features on there phones. a great looking phone with all these great features. i been a nokia user for years and i think they have the best phones and the nseries makes me believe it more. i have to get one ASAP!
Daryl Johnson 12:21 am 10.08.08

i love the nokia features on there phones. a great looking phone with all these great features. i been a nokia user for years and i think they have the best phones and the nseries makes me believe it more. i have to get one zakir….
rahilahusain 3:28 am 11.24.08

[...] @ Post original Nokia Workshop [...]
Think Again! » Cómo utilizar tu GPS para obtener un mapa de tu posición actual 8:19 pm 05.01.09