5

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.

Mark R
  • 63
  • 6

1 Answers1

5

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!

  • Hi Thanks, I am able to do that, however the default UI Controls using H.ui.UI.createDefault(hereMap, defaultLayers); does not have the terrain map. Meaning that if the user has changed to satellite or similar they will loss access to the terrain map. – Mark R Jul 22 '19 at 03:02
  • This does not answer the OP's question. - He is asking "I'd like to have Normal, Terrain and Satellite layers in the UI Controls " – TResponse Jul 22 '19 at 03:44
  • Hi Mark, we are investigating it and will answer ASAP. –  Jul 23 '19 at 00:47
  • @HEREDeveloperSupport thank you this adds the layers but now the traffic layer does not show on the map. I can add it to the control using the layers object in the MapSettingsControl options and use the defaultLayers.vector.normal.traffic as the source. Its ads it to the control but wont display on the map when clicked. Any ideas on this please? – TResponse Jul 28 '19 at 23:24
  • Hi @MarkR , please see added answers. –  Jul 29 '19 at 01:24
  • Thanks for this. Is there a raster traffic anymore for 3.1? I was hoping that this would work with traffic and raster: ` layers: [ { label: 'layer.traffic', layer: isIE11 ? layers.raster.normal.traffic : layers.vector.normal.traffic, }, { label: 'layer.incidents', layer: isIE11 ? layers.raster.normal.trafficincidents : layers.vector.normal.trafficincidents, }, ],` . I'm looking at the migration doc https://developer.here.com/documentation/maps/dev_guide/topics/migration.html – jackhowa Dec 04 '19 at 17:58