Why MobiMap?

When we started working on mobile prototype client applications for TagSpot, we quickly realized that we needed a component to display maps. In fact, maps were at the center of TagSpot's user experience.

But in the meantime, our main focus on TagSpot is the community and the information people share with one another. Hence maps are merely an accessory to make it possible for people to visualize their community and data in a more usable way.

That's why we didn't want to spend too much time on that part and instead try to reuse existing mapping components. On the J2ME platform, we were able to reuse 8motions' J2MEMap component. On Windows Mobile, we were stuck with Google's static map API. All of that lead us to very different user experiences on our two prototypes.

The next step was to get in touch with J2MEMap's author, to see if he would be ready to let us see his code: J2MEMap is free but not Open Source. But let's say his answer was not very enthusiastic.

Most location-based services rely on mapping capabilities and thanks to Google Maps API, it's very easy to add these capabilities to a web application. But on mobile platforms, let's say it's a little bit more complicated. Well, it WAS.

What is MobiMap?

MobiMap is a library that offers a generic, customizable and embeddable mapping component for your mobile applications. It uses the data connection of your mobile phone to download and cache map data coming from a variety of web mapping services, including Google, Yahoo, Microsoft and OpenStreetMaps. And thanks to its customizable architecture, it allows you to add new map data providers very easily.

For now, it's available for the JavaME platform but we're working on porting this library to Windows Mobile (.Net Compact) and iPhone OS, so that the same component with the same capabilities and API can be used on all major mobile platforms.

What does it do?

Here is the sample code that will display a map with which you can:

  • Move around and pan, either with arrow keys or with your finger if you have a touch screen
  • Zoom in and out, either using 1 and 7 numeric keys or by sliding the slider on the screen
  • Recenter the map on a given point by double-tapping it (touch screen only)
  • Display a list of waypoints with additional information
  • Browse through your waypoints and display an information window on top of them to get more details
  • Switch to another map data provider using the star (*) key
  • Switch to another mode (map/satellite/hybrid/etc.) using the sharp (#) key
  • Display a shortcut help dialog by pressing the 5 numeric key

What does it look like ?

If you click this link , a mobile emulator should start and you can see the MobiMap sample running. You can use Options/Select device... to see how it works on a bigger phone.

How do I do that?

Here is the WHOLE code of the sample application:

package org.epseelon.mobimap;

import org.epseelon.mobimap.util.Color;
import org.epseelon.mobimap.util.GeoPosition;
import org.epseelon.mobimap.waypoint.Waypoint;
import org.epseelon.mobimap.waypoint.WaypointSelectionListener;

import javax.microedition.lcdui.*;
import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;

/**
 * This MIDlet is merely here to serve as a demonstration for the MobiMap API
 */
public class MobiMapMIDlet extends MIDlet implements CommandListener {

    private Display display;
    private Command exitCommand;

    public void startApp() throws MIDletStateChangeException {

        try {
            display = Display.getDisplay(this);

            final MobiMap map = new MobiMap();
            map.setZoom(17);
            map.setFullScreenMode(true);
            map.setRecenterOnDoubleClickEnabled(true);

            exitCommand = new Command("Exit", Command.EXIT, 1);
            map.addCommand(exitCommand);
            map.setCommandListener(this);
            map.addWaypoint(new Waypoint(new GeoPosition(50.8720, 4.3813), Color.RED, 'A', "Home", "This is my appartment. Isn't it great?"));
            map.addWaypoint(new Waypoint(new GeoPosition(45.85, 7.80), Color.CYAN, 'B', "Other", "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer metus eros, vulputate ac, bibendum non, sollicitudin vel, diam. Quisque adipiscing, lacus ut auctor feugiat, odio urna congue neque, vitae sagittis quam ante ac ipsum. Integer feugiat tellus ut risus. Proin eleifend neque. Vivamus vitae nisi. Donec iaculis. Praesent at mauris lacinia nibh tempor lobortis. Suspendisse potenti. Pellentesque diam nulla, tristique a, vehicula ac, auctor eget, dui. Aliquam quis felis eget quam faucibus vulputate. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae ligula. Curabitur et dolor sit amet risus varius auctor. Quisque eget augue. "));
            map.showAllWaypoints();

            map.setWaypointSelectionListener(new WaypointSelectionListener(){
                public void waypointSelected(Waypoint selection) {
                    display.setCurrent(new Alert(selection.getDetails()), map);
                }
            });

            display.setCurrent(map);
        } catch (Exception e) {
            showException(e);
        }
    }

    public void exitMIDlet() throws MIDletStateChangeException {
        display.setCurrent(null);
        destroyApp(true);
        notifyDestroyed();
    }

    public void pauseApp() {

    }

    public void destroyApp(boolean unconditional) throws MIDletStateChangeException {
        notifyDestroyed();
    }

    public void commandAction(Command command, Displayable d) {
        if (command == exitCommand) {
            try {
                exitMIDlet();
            } catch (MIDletStateChangeException e) {
                showException(e);
            }
        }
    }

    public void showException(Exception e) {
        Alert alert = new Alert("Error");
        alert.setString(e.getMessage());
        alert.setType(AlertType.ERROR);
        alert.setTimeout(Alert.FOREVER);
        display.setCurrent(alert);
    }
}

If you want more information about MobiMap's API, you can have a look at the API documentation .