Friday, June 22, 2012

My First Google Map Application - Displaying Static Maps



Long time after .. may be after 2 years, I thought to write a Java ME app to display static google map image on a mobile phone screen.

Anyways, since it is quite a long time, I downloaded the latest Java ME SDK 3.0 for development. The SDK is good and it comes with an IDE. SDK 3.0 is a successor to the WTK 2.5.2 and Java toolkit 1.0 for CDC. It integrates CDC, CLDC, Blue-ray (BD-J) technology into one SDK. It has a development environment based on netbeans platform.

1) Java ME WTK 2.5.2_01:

- Installation was pretty easy and i assume it would ask for some pre-requisite such as Java. Since i already have those installed, it did not ask me anything.

- The 2.5.2 version has the working directory and the install directory concept. When a new project is created, the project is created under working directory. which will be the users logon directory typically, C:\Documents and Settings\mPortal.MPORTAL-A463062\j2mewtk\2.5.2\wtklib. The installation d
irectory contains few apps which are there for demonstration purposes.

the app is pretty simple and it connects to a URL and gets and image and displays on a MIDP Form.

I was little amazed the way Google has provided the static Map APIs. The following are the attractions i felt

- Simple. All based on query parameters. there is no post body etc
- The delimiter concept is simple. uses '|' to separate different parameters to the API.

The various parameters in the query string are:

  • center: specifies the center of the Map. Accepts the geocode (comma separated latitude, longitude pairs) or the location address on the face of earth. This center will be equidistant from all edges of the Map.
  • zoom: Specifies the magnification level of the map. the value can vary between 0 and 21.
  • visible: This parameter lets to construct a map image that includes all the locations specified in the visible attribute. This allows to not specify the zoom level but all the locations come in the view port
  • size: specifies the size of the static image. the map returned will be scaled to fit the size given. the maximum size that can be specified is 640x640
  • format: specifies the output format. several formats are supported png/png8 specifies 8 bit png format. png32 specifies 32 bit png format. gif/jpg/jpg-baseline specifies GIF, JPEG, JPEG non progressive compression format.
  • maptype: Type of the Map. The values could be roadmap,satellite, hybrid,terrain. maptype roadmap is the default map if no maptype is specified in the request. The roadmap retrieves with highlights to roads and streets on the map. maptype satellite specifies the satellite image. Terrain specifies physical relief map image showing terrain and vegetation. Hybrid specifies hybrid of terrain and roadmap map showing transparent layer of major street and place names on the satellite image.
  • markers: Markers used to show the marker images at a definite location.markerskeyword is used to specify the markers. One or more marker can be specified in a URL. Marker styles can be associated with markers. marker style attributes include size, color and label. the size parameter has the options such as tiny, mid, small. The terms are bit confusing. The following image gives an idea of what is tiny, mid and small. Only Mid is capable of showing the label given. Another interesting fact is that, the markers parameter specifies the zoom level. The map image will be constructed such that all the marker parameters are in the image auto adjusting the zoom level. It is an alternative to the visible parameter.
Extra Items:
Jpg-baseline : Most of the JPG formats are progressive. Meaning, they load a coarser image first and as the data receives, it refines the image resolution.


Examples:
1) View Entire Earth (Zoom level 0)
http://maps.google.com/maps/api/staticmap?zoom=0&size=240x320&maptype=roadmap&sensor=false&key=API_KEY

2) Use Of Visible - Automatic Zoom Level - Shows Map having Seoul and Vienna without specifying Zoom level

http://maps.google.com/maps/api/staticmap?markers=size:mid|color:red|Seoul,South+Korea|Chain+Bridge+Rd+Vienna,VA+22181&visible=Seoul,South+Korea|Chain+Bridge+Rd+Vienna,VA+22181&size=240x320&sensor=false&key=<>API_KEY>

3) Markers - Marker Style and sizes - The following URL shows My office, home, and near by shopping mall

http://maps.google.com/maps/api/staticmap?size=240x320&markers=color:blue|label:O|7900+Westpark+Dr+McLean,VA+22102&markers=size:tiny|color:green|label:S|Chain+Bridge+Rd,+Vienna,+VA+22181&markers=size:mid|color:0xFFFF00|label:H|180+Maple+Avenue+West+Vienna,+VA+22180&sensor=false&key=

4)