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;

It is the same one that is in the documentation, but I already edited the post with this — Diego GT
– Diego GT, Commented Feb 13, 2024 at 20:16

user23558221 · Accepted Answer · 2024-03-08 07:43:53Z

0

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

answered Mar 8, 2024 at 7:43

user23558221

1

Sign up to request clarification or add additional context in comments.

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Here Maps It looks white in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related