here api - How to setStyle to tileLayer?

Question

Using Here Maps Javascript 3.1, we have a working map implementation using createDefaultLayers.

const platform = new window.H.service.Platform({
  apikey: APIKEY_HERE
});

const defaultLayers = platform.createDefaultLayers({});

const baseLayer = defaultLayers.vector.normal.day;
  
const container = document.getElementById("here-map");
const map = new window.H.Map(container, baseLayer, {
  center: this.center,
  zoom: this.zoom,
  autoColor: false,
  pixelRatio: 1
});

We need to add custom styles to get the map to be displayed in a way we want (colours, some zoom-level alterations etc)

var provider = map.getBaseLayer().getProvider();
var style = new window.H.map.Style('/custom.yaml',
  'https://js.api.here.com/v3/3.1/styles/omv/');
provider.setStyle(style);

This is working ok but we would want to use normal.day.mobile as a baseLayer to get bigger text sizes out of the box.

It can be added this way:

var mapTileService = platform.getMapTileService({
      type: 'base'
    });
    var parameters = {
        ppi: '250'};
    var tileLayer = mapTileService.createTileLayer(
        'maptile',
        'normal.day.mobile',
        256,
        'png8',
        parameters
      );

However if we now define

map.setBaseLayer(tileLayer);

Code fails because setStyle is not a function. How can one achieve normal.day.mobile as a baseLayer with custom styles?

If we do this instead the code does not fail and we can see the mobile map but the custom styles are on different layer and cannot be seen by the user.

map.setBaseLayer(baseLayer);
map.addLayer(tileLayer);

Is there any way to get "normal.day.mobile" as the map and add custom styles on top?

question from:https://stackoverflow.com/questions/65829383/how-to-setstyle-to-tilelayer

Answer 1

The problem is, you mix raster and vector layers. Error is already in the second code snippet, where you get the provider of raster base layer. This provider is instance of H.map.provider.ImageTileProvider and it doesn't have setStyle method.

On order to get the OMV Provider from baseLayer you should set your baseLayer as this: const baseLayer = defaultLayers.vector.normal.map;

Regarding bigger labels: The ppi parameter works only for raster layers, therefore I suggest you to update the text sizes in your style custom.yaml