High-resolution maps using the HERE Maps API

Question

How would I display a high-resolution map similar to the one at https://beta.here.com using the HERE Maps API for JavaScript?

From the API reference there is an option to change the pixelRatio when creating a map.

var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.normal.map,
    { pixelRatio: 2 }
);

This works great and produces a high-resolution map on high-DPI screens, however, this changes the scale of the map and all map objects become small and text becomes difficult to read.

Answer 1

The PPI settings aren't documented very well in the JavaScript API reference, but is documented in the Map Tile API.

Pixels per inch. Resolution that can be requested, valid values are: 72 – normal, used by default if no value provided 250 – mobile 320 – hi-res

You can specify the PPI when creating a default layer (second option).

var defaultLayers = platform.createDefaultLayers(512, 320);

var map = new H.Map(
    document.getElementById('map'),
    defaultLayers.normal.map,
    { pixelRatio: 2 }
);