Different device resolutions

Nutiteq SDK does not do automatic reconfiguration based on device screen size and display density, so with new "full HD" / XXHDPI screen you may see too small texts.

Map tile adjustment

Many tile sources is that their texts and other styles are designed based on web usage, and do not support higher resolution tiles. Desktop DPI is much lower than mobile device, so the texts are too small. So if you show the tiles with 1:1 pixels (as Nutiteq SDK by default also does) then you may see get something like (click on image to see full screenshot):


There are two ways to solve this problem: using special tiles, or rescale existing tiles.

Use special "high-resolution" tiles

Some tile sources support "high resolution" or "retina" tile versions, which look nicer in most smartphones (except LDPI), so we suggest to use these.

a) MapBox tiles can be configured for 2x tiles in map settings. Nutiteq account has variations for "normal" and "retina" tiles for both Streets and Satellite tilesets, so you just use different map ID:

• nutiteq.map-78tlnlmb - Satellite retina
• nutiteq.map-f0sfyluv - Satellite non-retina
• nutiteq.map-aasha5ru - Streets retina
• nutiteq.map-j6a1wkx0 - Streets non-retina

    // MapBox Streets for Retina
    mapView.getLayers().setBaseLayer(new TMSMapLayer(proj, 0, 19, 123,
        "http://api.tiles.mapbox.com/v3/nutiteq.map-aasha5ru/", "/", ".png"));

See AdvancedMapActivity.java in AdvancedMap for code sample.

b) CloudMade tiles have also variation for high DPI devices, with string @2x after style ID. So the code which detects DPI and uses 2x tiles for any device with at least MEDIUM DPI:

	// use special style for high-density devices
	DisplayMetrics metrics = new DisplayMetrics();
	getWindowManager().getDefaultDisplay().getMetrics(metrics);
	String cloudMadeStyle = "997";

	if(metrics.densityDpi >= DisplayMetrics.DENSITY_MEDIUM){
	    cloudMadeStyle  += "@2x";
	}
		
        TMSMapLayer mapLayer = new TMSMapLayer(new EPSG3857(), 0, 19, 321,
                "http://b.tile.cloudmade.com/"+CLOUDMADE_KEY+"/"+cloudMadeStyle+"/256/", "/", ".png");
        mapView.getLayers().setBaseLayer(mapLayer);

See CloudMadeRoutingActivity.java in AdvancedMap for code sample.

Use "digital zoom"

Sometimes you do not have higher DPI tiles available, e.g. with MapQuest tiles. For this case Nutiteq SDK has special method mapView.getOptions().setTileZoomLevelBias() to enforce loading lower zoom (therefore lower resolution) tiles. This looks like tiles are "digitally zoomed" or rescaled 2x. You can turn it on with following code:

    DisplayMetrics metrics = new DisplayMetrics();
    getWindowManager().getDefaultDisplay().getMetrics(metrics);
    float dpi = metrics.densityDpi;

    // you may want to adjust multipliers based on your tile source
    // default adjustment is 0.0, use -1.0 to get tiles from 1 zoom level down, 1.0 for one zoom up.
    // following is equal to  -log2(dpi / Base_DPI). For Base we use HIGH as it seems to give good results
    float adjustment = (float) - (Math.log(dpi / DisplayMetrics.DENSITY_HIGH) / Math.log(2));
    Log.debug("adjust DPI = "+dpi+" as zoom adjustment = "+adjustment);
    mapView.getOptions().setTileZoomLevelBias(adjustment);

Result:


DefaultLabel text size adjustment

If you use DefaultLabels, then you have similar problem, texts are quite hard to read:

There are two elements in this label: title and description. You should set increased font size for both:

   LabelStyle labelStyle = 
      LabelStyle.builder()
             .setEdgePadding(24)
             .setLinePadding(12)
             .setTitleFont(Typeface.create("Arial", Typeface.BOLD), 32)
             .setDescriptionFont(Typeface.create("Arial", Typeface.NORMAL), 32)
             .build();
        
   Label markerLabel = new DefaultLabel("San Francisco", "Here is a marker", labelStyle);

  // ... now crete Marker with the markerLabel

In your case you may want to adjust the size based on real DPI, or use sample from this stackoverflow question, knowing that setTextSize is used from Paint.

The result:

Text sizes

For vector texts on map there is simply texts size parameter TextStyle.setSize(), so you may want to adjust it based on DPI.

Marker sizes

To set Marker size use MarkerStyle.setSize() parameter. This size is in OpenGL units, not in pixels, and one size should remain quite same for different resolution screens, something between 0.5 and 1.0 should work fine. You may want to adjust this size based on physical screen size, not DPI, so it is smaller on small screens where too big screen portion would be taken otherwise.

Use higher resolution images, at least 64x64 pixels, so it looks good on XXHDPI screen also. We suggest to use UnscaledBitmapLoader.decodeResource() method, as in code samples to avoid Android builder to downscale the image. Put the image to drawable folder, without density selection.