How do I create a dark Google Maps image for Google Glass?

Question

I need to create a dark/inverted map image for use on Google Glass, since the standard Google static maps image is too bright when displayed on the screen. How can I customize the map theme to look good on Glass?

Answer 1

The Google Static Maps API provides a number of customization options to change the colors of the map features. Here's an example of an activity that loads a dark/inverted static map image and displays it in a full-screen ImageView on Glass.

The description of the query parameters used to construct the URL can be found in the documentation for the Google Maps Static Maps API.

public class StaticMapActivity extends Activity {

    private static final String TAG = StaticMapActivity.class.getSimpleName();

    private static final String STATIC_MAP_URL_TEMPLATE =
            "https://maps.googleapis.com/maps/api/staticmap"
            + "?center=%.5f,%.5f"
            + "&zoom=%d"
            + "&sensor=true"
            + "&size=640x360"
            + "&scale=1"
            + "&style=element:geometry%%7Cinvert_lightness:true"
            + "&style=feature:landscape.natural.terrain%%7Celement:geometry%%7Cvisibility:on"
            + "&style=feature:landscape%%7Celement:geometry.fill%%7Ccolor:0x303030"
            + "&style=feature:poi%%7Celement:geometry.fill%%7Ccolor:0x404040"
            + "&style=feature:poi.park%%7Celement:geometry.fill%%7Ccolor:0x0a330a"
            + "&style=feature:water%%7Celement:geometry%%7Ccolor:0x00003a"
            + "&style=feature:transit%%7Celement:geometry%%7Cvisibility:on%%7Ccolor:0x101010"
            + "&style=feature:road%%7Celement:geometry.stroke%%7Cvisibility:on"
            + "&style=feature:road.local%%7Celement:geometry.fill%%7Ccolor:0x606060"
            + "&style=feature:road.arterial%%7Celement:geometry.fill%%7Ccolor:0x888888";

    /** Formats a Google static maps URL for the specified location and zoom level. */
    private static String makeStaticMapsUrl(double latitude, double longitude, int zoom) {
        return String.format(STATIC_MAP_URL_TEMPLATE, latitude, longitude, zoom);
    }

    private ImageView mMapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        mMapView = new ImageView(this);
        setContentView(mMapView);

        loadMap(37.8019, -122.4189, 18);
    }

    /** Load the map asynchronously and populate the ImageView when it's loaded. */
    private void loadMap(double latitude, double longitude, int zoom) {
        String url = makeStaticMapsUrl(latitude, longitude, zoom);
        new AsyncTask<String, Void, Bitmap>() {
            @Override
            protected Bitmap doInBackground(String... urls) {
                try {
                    HttpResponse response = new DefaultHttpClient().execute(new HttpGet(urls[0]));
                    InputStream is = response.getEntity().getContent();
                    return BitmapFactory.decodeStream(is);
                } catch (Exception e) {
                    Log.e(TAG, "Failed to load image", e);
                    return null;
                }
            }

            @Override
            protected void onPostExecute(Bitmap bitmap) {
                if (bitmap != null) {
                    mMapView.setImageBitmap(bitmap);
                }
            }
        }.execute(url);
    }
}