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;

score 3 · Accepted Answer · answered Feb 09 '21 at 07:10

3

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

answered Feb 09 '21 at 07:10

Shruti Kuber

387
4
5

1

This did it! Thank you!! I'm surprised I needed to load the CSS even after adding the NPM package so if that means I'm doing something wrong please let me know. – Rob Nordberg Feb 09 '21 at 14:07
For Vue or other webpack based frameworks import the CSS from `node_modules` in your `main.js` – nonNumericalFloat Sep 20 '22 at 16:03

HERE Maps JS API controls rending behind map

1 Answers1