How to create HERE Map with only normal map and satellite view, no additional layers?

user_843400 0
Viewed 1218

we are having trouble refactoring our code to no longer use the "createDefaultLayers()" from Platform and instead strip our map down to only use the basic "normal" map and "satellite" map.

We currently have:

        var maptypes = platform.createDefaultLayers();
        hereMap = new H.Map(
            document.getElementById('map-container'),
            maptypes.normal.map,
            {
                zoom: ...,
                center: ...,
                pixelRatio: Math.min(devicePixelRatio, 2)
            }
        );
        var ui = H.ui.UI.createDefault(hereMap, maptypes);

Doing this, we end up with an extra map type, and 3 different map options (traffic, incidents, public transportation) that we don't want loaded in at all.

I'm having trouble finding a barebones example of creating our own basic map and satellite layer and plugging it into the ui and map. Especially because createDefaultLayers() returns an entirely separate type, DefaultLayers rather than a collection of layers.

Any help would be appreciated!

here-api
1 Answers

This example creates custom normal and satellite H.map.layer.TileLayers, adds them to a H.Map, then wires up the H.ui.UI:

<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, 
      width=device-width" />
    <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>
    <link rel="stylesheet" type="text/css" 
      href="https://js.api.here.com/v3/3.0/mapsjs-ui.css" />
  </head>
  <body>
  <div style="width: 640px; height: 480px" id="mapContainer"></div>
  <script>

    // Initialize the platform object:
    var platform = new H.service.Platform({
    'app_id': 'app_id',
    'app_code': 'app_code'
    });

    // Via:
    // https://developer.here.com/documentation/geovisualization/topics/js-initialize-map.html
    //
    // createTileLayer (tileType, scheme, tileSize, format, opt_additionalParameters, opt_opacity, opt_dark, opt_options) : {H.map.layer.TileLayer}
    var normalLayer = platform.getMapTileService({type: 'base'}).createTileLayer(
      'maptile',
      'reduced.night',
      256,
      'png'
    );    

    var satelliteLayer = platform.getMapTileService({type: 'aerial'}).createTileLayer(
      'maptile',
      'satellite.day',
      256,
      'png8'
    );    

    // Instantiate (and display) a map object:
    // H.Map(element := {Element}, baseLayer := {H.map.layer.Layer}, opt_options := {H.Map.Options=} [optional])
    // Via:
    // https://developer.here.com/documentation/maps/topics_api/h-map.html
    var map = new H.Map(
      document.getElementById('mapContainer'),
      normalLayer,
      {
        pixelRatio: 1,
        center:  new H.geo.Point(40.769832, -73.974726),
        zoom: 14
      }
    );

    // Create a barebones H.service.DefaultLayers object
    // Note: the UI map settings incorrectly initially enables traffic and 
    // public transport selections
    var maptypes = new Object();
    maptypes.normal = new Object();
    maptypes.normal.map = normalLayer;
    maptypes.satellite = new Object();
    maptypes.satellite.map = satelliteLayer;
    var ui = H.ui.UI.createDefault(map, maptypes);
    var menuEntries = ui.getControl('mapsettings').getChildren()[1].getChildren();
    menuEntries[0].getElement().style.borderBottom = 'none';
    for (let i=1; i<menuEntries.length; i++)
        menuEntries[i].setVisibility(false);
  </script>
  </body>
</html>

JSFiddle: https://jsfiddle.net/iokevins/7m5dcjgs/

As you noted, createDefaultLayers() returns an Object with five pre-configured results:

  1. normal: {H.service.MapType}
  2. satellite: {H.service.MapType}
  3. terrain: {H.service.MapType}
  4. incidents: {H.map.layer.MarkerTileLayer}
  5. venues: {H.map.layer.TileLayer}

It appears only createDefaultLayers() produces these named MapType objects. That is, no other API seems to support creating an equivalent "normal" or "satellite" MapType object. If you choose to manually create them, you'll also have to create the sub-objects within each (e.g., normal.traffic). Therefore, depending on your use case, you may wish to consider approaching the problem as a task of deleting unwanted values, rather than building from scratch:

var maptypes = platform.createDefaultLayers();
delete maptypes.terrain;
delete maptypes.normal.traffic;
...

I found the Map Tile API Examples helpful. E.g., select Satellite Map > View Code > Maps API for JavaScript, which shows example code.

The Maps API for JavaScript has similar Examples.

Finally, to clean up the unwanted display of the H.ui.UI map settings options Traffic Conditions and Public Transport, I used a workaround via this answer: https://stackoverflow.com/a/51729080/182742 (it looks like you also got a separate answer from HERE Support)

user_1827420
Related