Search code examples
here-api

Blurry Map images using Here Maps API on mobile

We are running into an issue where the Here Map tiles are showing up as blurry on a test device (iphone) when it looks clear from a desktop emulator.

Clear on desktop / blurry on phone (not a perfect example because the image quality got messed up when uploading, but it is very crisp on desktop and blurry on iphone from my browser. However on both, the HERE terms of use message and the black icons are clear. Just the map tiles are blurry):

Clear on desktop Blurry on phone

Is there anything I need to make sure exists in the CSS or JS to make sure the resolution of the map tiles doesn't end up like this? Maybe its something related to the DPI of an iphone?

Sample fiddle of what we have: https://jsfiddle.net/bhe5jgdq/

But one thing to note is that it's still happening even on a DEAD simple version we have with just the map and no pin or flex, etc. I have a feeling it might have to do with the fact that the images being requested for the tiles don't specify are defaulting to the 72 ppi instead of using a higher resolution but I'm not sure how to pass that in.

Any areas we can try to attack to figure out why the maps are ending up blurry on our mobile devices? I'm thinking its probably related to the higher DPI on our mobile devices since it's also showing blurrier on my retina monitor. But I'm just not sure how to fix it?

Note, I saw on some documentation to add:

<meta name="viewport" content="initial-scale=1.0, width=device-width" />

for mobile device support, which doesn't seem to make a difference because the initial value for this was already set by the website we're building the page on like this:

<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, initial-scale=1, user-scalable=no, shrink-to-fit=no">

We are using:

<script src="https://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script>
Solution

  • Here is some way to adjust tile size depending on the device pixel ratio (unfortunately the framework does not do it itself)

    // Step 2: initialize layer
var defaultLayers = platform.createDefaultLayers({
  tileSize: devicePixelRatio > 1 ? 512 : 256,
  ppi: devicePixelRatio > 1 ? 320 : 72
});

// Step 3: initialize the map
var map = new H.Map(
  document.getElementById('map'),
  defaultLayers.normal.map,
  {
    center: { lat: 47.056, lng: 2.350 },
    zoom: 6,
    pixelRatio: Math.min(devicePixelRatio, 2)  // capping at 2 since some devices have a pixel ratio above 2 
  }
);