Joshua Marinacci's Blog

Tricked out maps and a new tile provider.

In previous blogs I introduced the JXMapViewer and JXMapKit, all part of the SwingX-WS project. We're still working on improving these classes and have more good stuff coming. I recently added support for non-rectangular maps, which makes the 1:2 Blue Marble map tile properly. I also added variable size tiles which allows the JXMapKit zoom out further. These are all nice improvements, but don't really matter if mapping isn't important.

I've been blogging about the JXMapViewer for a while now and some of you may wonder: why do I do this? Why does mapping matter? Well, I think it matters a great deal because maps are the way that we interact with the world on any scale larger than a few blocks. Maps let us find out where things are, and visually show information to others. In short; maps are an important way of visualizing information; and that means Java needs great support for mapping.

The problem, however, is that we currently only have access to some NASA imagery, which some people feel isn't very useful. Well, I have two answers to that:

Doing cool things with NASA's Blue Marble images

The best way to show people that maps can be pretty and useful is simply to do it. Here is a screenshot of a JXMapKit that has been tricked out with Painters and the Timing Framework. It is a simple travelog showing various points on the globe that I have visited, along with some descriptive text. The screenshot is pretty but you really need to see it live to get a feel for how the animations and rollovers work.

Fancy JXMapViewerApplet. Run it live

Though the data in this demo is hard coded it could easily be specified using applet parameters. This would let non-programmers embed it in their webpages, showing their own travelogs! All of the effects you see here were done using stock Painters and the Timing Framework, all part of Swing Labs.

But what about the second part....

Getting a new free map source: Open Street Maps

We can now view street maps from the Open Street Maps project! If you haven't heard of this project before you should really check it out. It is a map put together by individuals tagging and uploading GPS traces to a shared database. They only have a few cities so far (mostly in Europe) but they are growing every day and could use more help. A simply amazing project! Here's a screenshot:

JXMapViewer showing Open Street Maps of London

To get Open Street Maps in your own application use this provider:

        final int max = 17;
        TileFactoryInfo info = new TileFactoryInfo(0,max,max,
                256, true, true,
                "http://tile.openstreetmap.org",
                "x","y","z") {
            public String getTileUrl(int x, int y, int zoom) {
                zoom = max-zoom;
                return = this.baseURL +"/"+zoom+"/"+x+"/"+y+".png";
            }
        };
        info.setDefaultZoomLevel(1);
        
        TileFactory tf = new DefaultTileFactory(info);
        JXMapKit map = new JXMapKit();
        map.setTileFactory(tf);
        map.setCenterPosition(new GeoPosition(51,30,25,0,7,39)); // the center of London

And that's it. Street maps in your own app.

But of course, the best thing to convince others that the JXMapViewer is worthwhile is quite simple: get people to build more apps! So lets build some more. If you have any application you've written using the JXMapViewer please email me or post it here. We'll highlight it on the SwingX-WS webpage and try to get it into the JavaDesktop.org project spotlight.

Thanks everyone!

- Josh

Postscript: here is the source to both the applet demo and the OSM tile provider. The required jars are included.

Comments

• HiLooks nice, can we see the source?

  I would to know how do the overlay with the travel description. I'm working on a GPX/GPS applicartion to visualize data logged by my WTB 200 GPS when ridinging my MTB.It uses swing including jxmapviewer for the client side and tomcat/hessian/hibernate for the server side.Take a look here http://navicon.dk/com/gpx.pngCarsten

  Posted by: cmadsen_dk on February 23, 2007 at 01:40 AM

• I agree with Carsten. An example like this that uses JXMapViewer, Painters, and the Timing Framework would be very useful to have available. It would be great to see the source!

  Dean

  Posted by: diverson on February 23, 2007 at 08:05 AM

• I've reposted the blog with a link to the source. Let me know if you have any problems.

  Carsten. Your app looks pretty cool. What dataset are you using?

  Posted by: joshy on February 23, 2007 at 11:25 AM

• Thanks for the source Josh! Look here to see the results.I ran over a few bumps when switching from the old version but all in all in seems like an improvement.
  I fly "under the radar" with regards to the data set being used.
  Thanks

  Posted by: cmadsen_dk on February 24, 2007 at 10:37 AM

• Nice app !
  I saw a glitch, when my dummy brain made me double click on the 'next' icons on the bottom. The top info box flickered, and became grayish, with a pale red. I never was able to get it white and red again, despite many single clicks.

  Posted by: pepe on February 26, 2007 at 05:41 AM

• try reloading the applet and hitting the nex/prev buttons slowly. I think it's a bug in how I initialize the animations.

  Posted by: joshy on February 26, 2007 at 08:31 AM

• I agree on the importance of maps. I've done two GIS projects in the past and am working an app right now that i believe could benefit from at least a simple map.

  Posted by: mnuttall on March 01, 2007 at 07:24 AM

• Cool. If you have anything that you can publically show then please let me know and I'll blog about it or get it featured.

  Posted by: joshy on March 01, 2007 at 04:59 PM

• I'm trying to plot a route with timestamps and direction arrows. See here.
  The problem is it seems like I need a two pass solution first plot the route points then plot the timestamps and the direction arrows in order to avoid the route overlapping the timestamps and the arrows. So is there a way to make a compund waypoint renderer?

  The system is online and web start enabled drop me an email for the URL.

  Posted by: cmadsen_dk on April 03, 2007 at 12:51 AM

• cmadsen_dk waypoint renderers are just Painters, which are classes which implement a paint method. You can combine any number of painters together by wrapping them in a CompoundPainter. I have provided a default waypoint renderer implementation which handles the coordinate conversion for you, but you could easily write your own to render waypoints or any other data you wish. It would be quite easy to combine multiple waypoint renderers using the compound painter and then set that as the overlay on the JXMapViewer. The Painter and CompoundPainter classes are in the SwingX project. You can find out more at swingx.dev.java.net and at swinglabs.org.

  Posted by: joshy on April 11, 2007 at 08:37 AM

• I'll use a own tile files ( from images created using ImageTileCutter application ), that work OK using the code of JXMapViewerTest, but if I try to use the JXMapKit Class like Map Demos, the Application stop with an error when I'll try to run br/ the error is a java.lang.ArrayIndexOutOfBoundsException: 7 at ...TileFactoryInfo.getMapWidthInTilesAtZoom(TileFactoryInfo.java:169) My portion code is TileFactoryInfo info = new TileFactoryInfo( 0, 5, 5, 256, true, true, "file:/ImageTileCutter/tiles", "x","y","z") { public String getTileUrl(int x, int y, int zoom) { String url = this.baseURL + "/"+zoom+"/"+"outputimage."+zoom+"-" + x + "-"+y+".jpg"; return url; } }; , I'll try to follow the source to determinate the problem without succes, could you please give me any idea about the problem? Thanks in advance

  Posted by: averan on June 30, 2007 at 05:39 PM

• Hey Josh, I am really enjoying this framework for mapping and am experimenting with using it for electrical and mechanical blueprint markups. I was interested in 2 things:1) the source link for this "Tricked out map" example seems to lead to a dead end (Oct 16, 2007) and 2) I cant seem to find the ability to turn off the horizontal wrapping of my map tiles (JXMapKit handles the vertical alright). I would like a single set of tiles for a given zoom to appear (no infinite wrap).averan: Try adjusting the "new TileFactoryInfo( 0, 5, 5, 256, true, true..." to a lower value such as "new TileFactoryInfo( 0, 4, 4, 256, true, true..." and ensure you are using "JXMapKit.setZoom(...)" and not "TileFactoryInfo.setDefaultZoomLevel(...)". I had the same problem and it seems to have fixed it.

  Posted by: tjpinet on October 16, 2007 at 08:42 AM

• tjpinet I've just updated SwingX-WS to include a horizontallyWrapped boolean property. It is true by default, but if you set it to false and turn on restrictOutsidePanning then the user will be restricted to just the main part of the map.

  Posted by: joshy on November 24, 2007 at 03:06 PM

• joshy: sweeeet. I take a look tonight. Thanks mate!

  Posted by: tjpinet on January 16, 2008 at 10:17 AM

• I have another question for you that is probably simple and already implemented...yet eludes me. I have my own custom map (tile image server) of a campus of buildings. I created my own TileFactoryInfo accordingly and the map shows just fine in the viewer. Now...I would like to use my GPS to find a reference point (which i have done at the NW corner of our main building lets say) and apply this to my TileFactoryInfo profiles for the map tiles at a default zoom level. Is there a way to do this and also have the correct value returned at a different zoom level? Thanks, Tim

  Posted by: tjpinet on January 17, 2008 at 12:22 PM

• I'm not exactly sure what you are asking. The TileFactory has methods to convert from screen coordinates to gps coordinates and vice versa. By default these methods convert using one of the standard map projections for the globe (Mercator, Cylindrical, etc). It sounds like you have your map configured to just show the area of the world where your campus is, so you don't really have the map set up in the standard way for the whole globe. In *theory* (though I haven't actually tried this), you could subclass DefaultTileFactory and override those conversion methods to use your own equations such that the GPS coords of your reference point is converted into a local coordinate system. Alternatively you could overlay your images onto the standard globe and then restrict panning to just the area of your campus.

  Posted by: joshy on January 19, 2008 at 10:06 AM

• Hi Josh,

  Great work.
  The link for the source code seems to be dead.

  Thanks in advance,

  Olivier

  Posted by: odoremieux on February 04, 2008 at 11:15 PM

• I've fixed the source link. Thanks for catching that.

  Posted by: joshy on March 11, 2008 at 04:30 PM

This work is licensed under a Creative Commons License.