Here Maps It looks white in React

Question

I am trying to implement an app with ReactJS and Here Maps, but my map looks white, but it loads the logos correctly, apparently it says that my ApiKey does not have access, but it does since I have another app built in AngularJS that uses the same one and it works

I also followed the documentation here:

https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/react-practices.html#define-react-components-to-display-restaurant-entries- in-a-grid

I tried several ways to pass the ApiKey and it remained the same, as you can see I opened the URL that the console returned and it gave me this error:

Error403

These are the errors in the console of my stack in React:

errors

code:

import Map from './Maps';
import React, { useState } from 'react';

const apikey = 'MiAPiKey'

function App() {
  return (
    <div>
      <Map apikey={apikey} />
    </div>
  );
};

export default App;

import React, { useEffect, useRef } from 'react';
import H from '@here/maps-api-for-javascript';

const Map = ( props ) => {
  const mapRef = useRef(null);
  const map = useRef(null);
  const platform = useRef(null)
  const { apikey } = props;
  
  useEffect(
    () => {
      // Check if the map object has already been created
      if (!map.current) {
        // Create a platform object with the API key
        platform.current = new H.service.Platform({ apikey });
        // Create a new Raster Tile service instance
        const rasterTileService = platform.current.getRasterTileService({
          queryParams: {
            style: "explore.day",
            size: 512,
          },
        });
        // Creates a new instance of the H.service.rasterTile.Provider class
        // The class provides raster tiles for a given tile layer ID and pixel format
        const rasterTileProvider = new H.service.rasterTile.Provider(
          rasterTileService
        );
        // Create a new Tile layer with the Raster Tile provider
        const rasterTileLayer = new H.map.layer.TileLayer(rasterTileProvider);
        // Create a new map instance with the Tile layer, center and zoom level
        const newMap = new H.Map(mapRef.current, rasterTileLayer, {
          pixelRatio: window.devicePixelRatio,
          center: {
            lat: 4.5977444,
            lng: -74.1122391,
          },
          zoom: 16,
        });
  
        // Add panning and zooming behavior to the map
        const behavior = new H.mapevents.Behavior(
          new H.mapevents.MapEvents(newMap)
        );

        // Create the default UI components
        const ui = H.ui.UI.createDefault(newMap, rasterTileLayer);
  
        // Set the map object to the reference
        map.current = newMap;
      }
    },
    // Dependencies array
    [apikey]
  );
    // Return a div element to hold the map
    return <div style={ { width: "100vw", height: "90vh" } } ref={mapRef} />;
}
export default Map;

Answer 1

The setup looks correct, please retry by creating a new API KEY with a new APP ID.