Recently I had to work with OSM data at University and we had to provide the data by visualising them with JMapViewer. It’s a small project which supports you to connect your OSM data with a Java Swing application. For example this is useful for user interactions when calculating routes with OSM data. So I started investigating the project and found their documentation: http://wiki.openstreetmap.org/wiki/JMapViewer It just gives a quick overview of the project, but no nice starting guide. Therefore I want to provide such a (short) tutorial here.

Update your Maven pom.xml

First of all you should add the josm repository to your Maven pom.xml and also add a dependency:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

    <!-- ... -->

    <repositories>
        <repository>
            <id>josm-public</id>
            <name>josm public releases</name>
            <url>https://josm.openstreetmap.de/nexus/content/groups/public</url>
        </repository>
    </repositories>

    <dependencies>
        <dependency>
            <groupId>org.openstreetmap.jmapviewer</groupId>
            <artifactId>jmapviewer</artifactId>
            <version>2.0</version>
        </dependency>
        <!-- other dependencies -->
    </dependencies>

    <!-- ... -->

</project>

Because the JMapViewer artifact is not available in Maven Central, you need to add the jsom repository to your pom.xml. They’ve added Maven support with this issue: https://josm.openstreetmap.de/ticket/12263 . Note: There are similar projects called JXMapViewer and JXMapViewer2 which won’t be discussed here. The latter one is still maintained and can be found on Maven central, so you don’t need any extra repository.

2. Create a running example

Now you can create a class to start JMapViewer. Therefore you have to extend javax.swing.JFrame as well as setting up the JFrame by adding a layout (lines 22-23). You can also set some options for the map, e.g. tile loading (this loads the different images for a map, e.g. if you zoom) or that markers should be visible (line 29-32). We won’t add any markers yet, because this will be discussed in another blog post.

/**
 * Based on http://svn.openstreetmap.org/applications/viewer/jmapviewer/src/org/openstreetmap/gui/jmapviewer/Demo.java by Jan Peter Stotz
 */
public class OsmMapViewer extends JFrame implements JMapViewerEventListener {

    private static final long serialVersionUID = 1L;

    private JMapViewerTree treeMap;
    private JLabel zoomLabel;
    private JLabel zoomValue;
    private JLabel mperpLabelName;
    private JLabel mperpLabelValue;


    /**
     * Setups the JFrame layout, sets some default options for the JMapViewerTree and displays a map in the window.
     */
    public OsmMapViewer() {
        super("JMapViewer Demo");
        treeMap = new JMapViewerTree("Zones");
        setupJFrame();
        setupPanels();

        // Listen to the map viewer for user operations so components will
        // receive events and updates
        map().addJMVListener(this);

        // Set some options, e.g. tile source and that markers are visible
        map().setTileSource(new OsmTileSource.Mapnik());
        map().setTileLoader(new OsmTileLoader(map()));
        map().setMapMarkerVisible(true);
        map().setZoomContolsVisible(true);

        // activate map in window
        treeMap.setTreeVisible(true);
        add(treeMap, BorderLayout.CENTER);
    }

    // ... further methods like setupJFrame() or setupPanels()

    private JMapViewer map() {
        return treeMap.getViewer();
    }


    /**
     * @param args Main program arguments
     */
    public static void main(String[] args) {
        new OsmMapViewer().setVisible(true);
    }


    @Override
    public void processCommand(JMVCommandEvent command) {
        // ...
    }
}

Finally you just call new OsmMapViewer().setVisible(true) (line 50) and run the code. Most noteworthy I’ve removed some methods from the code above for reasons of readability. You can see the full code in this GitHub Gist.

If you run the code, the following window should be shown:

It’s not a fancy UI, but it provides some basic functionality. An alternative solution with a better UI would be Leaflet.

In a next blog post I’ll describe how to add markers and connect them to a routing algorithm.