HERE Maps JS API controls rending behind map

Question

I'm trying to add the UI controls (zoom in/out and scale) to a HERE map and I see the svg for the zoom icon render and then the map render on top of the svg. Wondering if anyone can help me spot the issue. Looking at the documentation (https://developer.here.com/documentation/maps/3.1.22.0/api_reference/H.ui.UI.html) I thought H.ui.UI.createDefault(hereMap, layers) would render the zoom controls on the map.

code

class HereMap extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
    this.map = null;
  }

  state = {
    lat: this.props.lat,
    lng: this.props.lng,
    zoom: this.props.zoom,
  };

  componentDidMount() {
    if (!this.map) {
      const platform = new H.service.Platform({
        apikey: 'my_api_key',
      });
      const layers = platform.createDefaultLayers();
      this.layers = layers;
      const hereMap = new H.Map(this.mapRef.current, layers.vector.normal.map, {
        pixelRation: window.devicePixelRatio,
        center: {lat: this.state.lat, lng: this.state.lng},
        zoom: this.props.zoom,
      });

      hereMap.addEventListener('mapviewchange', this.handleMapViewChange);
      new H.mapevents.Behavior(new H.mapevents.MapEvents(hereMap));
          
      // This is where I thought the zoom controls would get attached to the map
      H.ui.UI.createDefault(hereMap, layers);

      this.map = hereMap;
    }
  }

  componentWillUnmount() {
    // Cleanup after the map to avoid memory leaks when this component exits the page
    if (this.map) {
      this.map.dispose();
    }
  }

  handleMapViewChange = (zoom, lat, lng) => {
    this.setState({
      lat,
      lng,
      zoom,
    });
  };

  render() {
    return (
      <>
        <div ref={this.mapRef} style={{height: '500px', width: '300px'}} />
      </>
    );
  }
}

export default HereMap;

Answer 1

Have you added the UI libraries and the css file in the tag ?

<script src="https://js.api.here.com/v3/3.1/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />