First steps with MapView

Some minor bug fixes and cleanups aside, the main theme for yesterday was MapView. Given a coordinate pair, I wanted to display it on map, with a small label like in Google’s mobile Map application. MapView tutorial is straightforward, except I had some confusion with Google Maps API keys. These are generated based on app signing certificates, and there are different certificates for debug and release mode (details).

One thing that I initially thought will be difficult to get right, were the labels. I wanted my label boxes to have small callouts like Google Maps:

Nine-patch to the rescue! Nine-patch is a regular .png image, with 1 pixel extra border, which is used for marking stretchable parts of the picture. I think the idea of putting meta-information in the picture itself is great! It’s easy to understand, and convenient to work with in graphics editor. Much much better than, say, defining stretchable portions in some XML file in some custom format. Also I’d love to see similar convention supported by web browsers. Techniques like CSS “sliding doors” do work but are not nearly as elegant as this nine-patch format.

Anyway, does nine-patch help in my label-with-tip case? Yes it does, it turns out, on each axis you can have several stretchable regions! Here’s how my artwork looks:

On horizontal axis, portions left and right from the tip are marked as stretchable, middle stays unaffected. The actual graphic might need to be done more carefully, but as a proof of concept it works!

Getting the label on map is easy. If there’s going to be many of them, tutorial explains how to use ItemizedOverlay. In my case I had only one, so I used MapView.addView(). Conveniently, MapView takes care of repositioning my label when map is scrolled and zoomed by user.

Advertisements