Search code examples
here-api

How to create custom labels for HERE Map UI Labels 3.0?

We need to add custom labels for the Here Map UI layers. Currently, we are using createDefaultLayers to make the map layers and sending them into the UI creation.

   var maptypes = platform.createDefaultLayers({
        tileSize: devicePixelRatio > 1 ? 512 : 256,
        ppi: devicePixelRatio > 1 ? 320 : 72
   });
   ...... // some other map setup

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

We are using these versions:

<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>

Is there a simple way to replace just the labels on the UI map? I have tried looking at this question and following the tips in the answer there, but it looks like it won't work for us at our current version. The new layers don't show up at all and adding back the mapsettings after deleting it and creating a new one puts the map settings to the left of the scale indicator (looks a bit strange and map UI options don't work - might add screenshot shortly). Any tips on how to approach this?

picture

Thanks!

Solution

  • The problem why the answer from this question doesn't work is, that it's for recently released new version 3.1 of api where MapSettings object was redesigned. Here is the code which should work for you:

    let defaultLayers = platform.createDefaultLayers({
  tileSize: devicePixelRatio > 1 ? 512 : 256,
  ppi: devicePixelRatio > 1 ? 320 : 72
});

// remove old MapSettings
ui.removeControl('mapsettings');

// get Scalebar UI and remove it
let scalebar = ui.getControl('scalebar');
ui.removeControl('scalebar');

// create custom one
let mapSettings = new H.ui.MapSettingsControl( {
    entries : [ { 
      name: "Custom Normal",
      mapType: defaultLayers.normal
    }, {
      name: "Custom Satellite",
      mapType: defaultLayers.satellite
    }, {
      name:"Custom Terrain",
      mapType:defaultLayers.terrain
    }],
  incidents: defaultLayers.incidents
  });

// add customised MapSettings
ui.addControl("custom-mapsettings", mapSettings);

// add Scalebar back so it will be placed next to MapSettings
ui.addControl('scalebar', scalebar);