Unfolding is a library to create interactive maps and geo visualizations in Processing and Java. In this article, we will discuss what are the features of unfolding and how it is used to create interactive maps in Java and Processing.
The main purpose of using unfolding is to create not only static maps but also interactive maps in both java and processing. It can easily be installed on eclipse by downloading the unfolding template from the official website. It is widely used due to the features provided by unfolding like:
- Interaction Events: In unfolding, we can easily create interactive maps. The basic interactions like zoom and pan are included in this library. Apart from these, more advanced features like overview, details or multitouch gestures can also be easily added to the maps.
- Data Visualization: This library is very robust that it even lets users create geo-positioned markers to display the data on a map. This visual style can be freely adapted. This library also supports users to load and display user-defined shapes like points, lines or polygons.
- Styled Maps: This library is a title-based map library. This library allows map titles to have various geographic features and styles. It also comes with map providers like OpenStreetMap or TileMill.
- Clean & Extendable Code: This library allows the beginners to easily create simple maps. Advanced users can also sketch their prototypes or create their own sophisticated visualizations.
Approach:
In this implementation, let’s consider to draw two maps, one is Delhi and the other is Mumbai using this library. The map created is interactive as we can zoom in and zoom out. We need to set up our maps using the latitude and the longitude of the place. The draw function in the program runs repeatedly and draws the map repeatedly on the canvas.
Below is the implementation of the above approach:
Java
// Java implementation of using// unfolding maps// Importing the libraries in eclipseimport processing.core.PApplet;import de.fhpotsdam.unfolding.UnfoldingMap;import de.fhpotsdam.unfolding.geo.Location;import de.fhpotsdam.unfolding .providers.AbstractMapProvider;import de.fhpotsdam.unfolding .providers.Google;import de.fhpotsdam.unfolding .providers.MBTilesMapProvider;import de.fhpotsdam.unfolding .utils.MapUtils;// Class to make the mappublic class MakeYourMap extends PApplet { // To keep eclipse from reporting // a warning private static final long serialVersionUID = 1L; // Initializing the height and // width of the map private static int mapWidth = 350; private static int mapHeight = 500; // This map is used to display Mumbai UnfoldingMap map1; // This map is used to display Delhi UnfoldingMap map2; // Function which implements the unfolds // library public void setup() { // Set the Applet window to be // 900x600 width and height. // The OPENGL argument indicates // to use the Processing // library's 2D drawing size(900, 600, P2D); // This sets the background colour // for the Applet. Here, colour // blue is chosen this.background(0, 0, 128); // Select a map provider. // Here we are using google provider AbstractMapProvider provider = new Google.GoogleTerrainProvider(); // Set a zoom level to focus on // our specified location int zoomLevel = 10; // Creating the first map map1 = new UnfoldingMap( this, 40, 50, mapWidth, mapHeight, provider); // This line zooms in and centers // the map at 28.7041 (latitude) // and 77.1025° (longitude) for Mumbai. map1.zoomAndPanTo( zoomLevel, new Location(28.7041f, 77.1025f)); // This line makes the map interactive // as we can zoom in and out. And, here // we have zoomed our focus to the // Mumbai location by setting the // zoom level to 10. MapUtils .createDefaultEventDispatcher( this, map1); // Creating the same map for // Delhi AbstractMapProvider provider2 = new Google.GoogleMapProvider(); map2 = new UnfoldingMap( this, 40 + mapWidth + 10, 50, mapWidth, mapHeight, provider2); // 19.0760 (latitude) and // 72.8777 (longitude) are for Delhi map2.zoomAndPanTo( zoomLevel, new Location(19.0760f, 72.8777f)); // This line makes the map interactive MapUtils .createDefaultEventDispatcher( this, map2); } // Function to draw the applet window public void draw() { // The draw method is implemented // repeatedly by drawing our maps // again and again on the canvas map1.draw(); map2.draw(); }} |
Output: On running the above code, the following output is obtained:
