javascript - How do I get a Terrain Map in UI Controls HERE Maps v3.1

Question

After upgrading to the v3.1 Javascript SDK with vector/WebGL rendering, there is now no terrain layer in the default UI Controls.

I have looked into the API documentation but there is no clear example that I could find that shows how to specify what shows up in the UI Controls.

    var platform = new H.service.Platform({
            apikey: 'key'
    });

    var layers = platform.createDefaultLayers();

    var hereMap = new H.Map(
        document.getElementById(mapCanvasDiv),
        defaultLayers.vector.normal.map,
        {
            zoom: mapOptions.zoom,
            center: mapOptions.center
    });

    var ui = H.ui.UI.createDefault(hereMap, defaultLayers);

    // Guessing I can change "ui" in some way to include the terrain layer which is a raster layer.

    hereMap.UIControls = ui;

I'd like to have Normal, Terrain and Satellite layers in the UI Controls like when we were on v3.0 as some of our customers use this layer.

Answer 1

Please see below two links about

"Setting the base map type". https://developer.here.com/documentation/maps/topics/map-types.html

"Raster" https://developer.here.com/documentation/maps/topics/raster.html

"H.ui.MapSettingsControl.Options" https://developer.here.com/documentation/maps/topics_api/h-ui-mapsettingscontrol-options.html#h-ui-mapsettingscontrol-options

In order to use satellite and terrain please use raster map type.

defaultLayers.raster.terrain.map
defaultLayers.raster.satellite.map

For example to customize Map Setting Control

var defaultLayers = platform.createDefaultLayers();
var map = new H.Map(document.getElementById('map'),
    defaultLayers.raster.terrain.map, {
    center: {lat: 52.51477270923461, lng: 13.39846691425174},
    zoom: 13,
    pixelRatio: window.devicePixelRatio || 1
});
var ui = H.ui.UI.createDefault(map, defaultLayers);
//remove default mapsettings control
ui.removeControl("mapsettings");
// create custom one
var ms = new H.ui.MapSettingsControl( {
    baseLayers : [ { 
      label:"normal",layer:defaultLayers.raster.normal.map
    },{
      label:"satellite",layer:defaultLayers.raster.satellite.map
    }, {
      label:"terrain",layer:defaultLayers.raster.terrain.map
    }
    ],
  layers : [{
        label: "layer.traffic", layer: defaultLayers.vector.normal.traffic
    },
    {
        label: "layer.incidents", layer: defaultLayers.vector.normal.trafficincidents
    }
]
  });
ui.addControl("customized",ms);

Happy coding!