Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Integrating HERE Maps in LWUIT application

From Wiki
Jump to: navigation, search

This article explains you can use the HERE Maps library in a LWUIT based application

Note.pngNote: This is an entry in the Asha Touch Competition 2012Q3

See Also

Article Metadata
Code ExampleTested with
Devices(s): X3-02, Asha 311, Asha 501
Dependencies: HERE Maps API for Java ME v1.3, LWUIT
Created: shaii (26 Aug 2012)
Last edited: hamishwillee (01 Nov 2013)


Lightweight UI Toolkit (LWUIT) is a popular UI framework and widget library for creating J2ME Apps, however in its current state it does not include a Map component to display maps, route, markers etc. Nokia has an excellent map and navigation services and they recently added support of it for their Series 40 devices, you can check out the full details about it here. My aim is to create a bridge between the library that Nokia offers for use and the LWUIT library by creating a Map component.

Note.pngNote: In order to use HERE maps and the attached component you need to register your app and obtain a token for the maps

The implementation

The HERE Maps API for Java ME is not open source which mean we only have access to what the library jar exposes to us to work with.

The implementation is divided into two classes

  • MapCanvas - This is a simple class which inherits the MapCanvas of the HERE maps library. It is needed to expose the pointerPressed(), pointerReleased(), keyPressed(), keyReleased() etc. methods to call them from the LWUIT component.
  • Map - This is the LWUIT component class. It extends the LWUIT Component class and implements the MapListener interface from the HERE Maps library. This class also initiates the MapCanvas and is responsible for drawing the MapCanvas to the display. Lastly, it also supports adding markers to the map.

The MapCanvas has absolutely nothing special and you can check out its full code in the attached source.

The Map Component most important method is actually is its paint() method.

Here is where the trick of binding the two seperate libs come together we use the MapDisplay class that we obtain from the MapCanvas and paint it and all other map components to a helper image graphics, we then create a LWUIT based image from the helper image and draw that to the lwuit graphics display.

public void paint(Graphics g)
if (helperImg == null)
helperImg = javax.microedition.lcdui.Image.createImage(getWidth(), getHeight());
helperImgGraphics = helperImg.getGraphics();
MapComponent[] comps = mapDisplay.getAllMapComponents();
for (int i = 0; i < comps.length; i++)
com.sun.lwuit.Image img = com.sun.lwuit.Image.createImage(helperImg);
g.drawImage(img, 0, 0);

Another good piece of code to look at is the Map constructor, it takes as an arguement the MIDLet Display class since the MapCanvas requires it as well as the AppID and token.

public Map(Display display,String appID, String token)
mapCanvas = new MapCanvas(display);
factory = mapCanvas.getMapFactory();
mapDisplay = mapCanvas.getMapDisplay();
mapDisplay.setCenter(new GeoCoordinate(51.477, 0.0, 0));
mapDisplay.setZoomLevel(15, 0, 0);
markerCount = 0;
markerDataTable = new Hashtable();


You can use the ready made component I created to integrate HERE maps library to your own LWUIT based application, it supports both touch & joystick navigation inside the map.

This page was last modified on 1 November 2013, at 05:52.
74 page views in the last 30 days.