A few years ago, when I bought my first smart phone, one of the applications which I used more frequently was Google Maps. That was the time when I moved to a new city. And in the initial few days, wherever I go I had Google Maps open. After setting my destination, as I follow the route I keep wondering how this ‘Magical’ application works. But today, being a Developer at ThoughtWorks and having got opportunities to work on applications that use maps, I would say a map application is just a combination of a few moving parts which does the magic!
Though there are applications which show just a static image of map with little user interaction, a typical map application is one that allows users to interact with it. A good example is the app used for booking cabs. One can set his / her pickup point or choose the current location as the pickup point, pan the map, zoom in / out, see the cabs’ location (These are called Markers, which are nothing but images which mark points on the map), and after boarding the cab, see the route travelled (These are called Polylines, which are sequence of points).
Lets consider interactive map application. There are four primary players: User, who does the interactions; Device, which translates the user’s interactions into a language that the application can understand and shoulders some of the user’s task, say getting the current location; The Application itself; A Black Box, which provides the map images, addresses and lots more. We will get back to this Black Box in a short while. With this information, I will introduce the first two moving parts behind a map application. First one is the device itself. The device must be equipped enough to get user interactions and user location (using GPS or Network Provider). Second one is the piece of software (client-side library, used internally by the application) which does the heavy lifting work in presenting the maps, markers, polylines, etc. to the user.
In the process of looking into other moving parts, I shall demystify the black box mentioned earlier as well. There are so many data getting shown on a map application. First the map itself. There are even different images for the same location. One image show the geography, another shows transit information, another shows a dark image indicating its night time! And many many more. If you have noticed carefully, the entire map that’s being displayed is not a single image. Rather its made of many small images which together appears as a single image. These small images are called Tiles – Square shaped 256 x 256 pixel PNG images. And the component that provides these tiles is called the Tile Server. This is one of the little boxes within the black box.
Second, given an address the application correctly points out the location on the map. This process is called Geocoding – It basically means converting a human readable address to geographic coordinates. Third, the reverse process of Geocoding. A typical example is getting one’s current location. The GPS hardware in the device provides just the geographic coordinates. But the application shows the location in human readable address. This process is called Reverse Geocoding. And these are services (APIs) provided by a single or two different components. To keep it simple, lets have just tile server, Geocoding API and Reverse Geocoding API in the black box. However, there can be many other components and services involved depending on the complexity of the application.
So now that we know the various components involved, lets look at the tasks done by the client side library. As mentioned earlier, the client side library is the one that gels the user interactions and other components. Some of the work done by it are described below:
- Request the tile server to provide the tiles for the region which the user currently views.
- Handles zooming: Zoom level can be analogous to the height from which the user views a region. If the user zooms in, (s)he expects to get a closer look, and there by expects to see more details on the map. If the user zooms out, he / she probably wants a hawk eye view of the area rather than the intricate details. To support this, the tile server has tiles of different zoom levels. And the client library takes the responsibility of getting the tiles of appropriate zoom level.
- Allows panning: Whenever the user pans the map, the library calculates the missing tiles that are required to fill the view and requests those from the tile server.
- Provides the user the ability to add markers.
- Does the groundwork of converting a point from device (screen) coordinate system to geographic coordinate system and vice versa.
So the next time when you use any map application, I believe you wouldn’t be considering it to be a magic box.