HERE Maps Info bubble not rendering correctly using React

I’m currently developing a React application using HERE Maps Javascript SDK.

My Problem:
I want to open an info bubble on a marker when I click on it.

Instead
This strange artifact gets rendered, and the map ends up going kaputt:

Here is the relevant source code:

const addEventsToMap = (events, H, hMap, ui) =>{
         let markers = [];
         events.map((el)=>{
          var icon = new H.map.DomIcon(svgMarkup),
           coords = {lat: el.Latitude, lng: el.Longitude},
           marker = new H.map.DomMarker(coords, {icon: icon});
           marker.setData("Hello world")
           marker.addEventListener('tap', event=>{
             const bubble = new H.ui.InfoBubble({lat:el.Latitude, lng:el.Longitude},
              {
               content: event.target.getData()
             })
             ui.addBubble(bubble);
           }, false)
          hMap.addObject(marker);
          console.log(el);
         })
     }
     
    React.useLayoutEffect(() => {
      // `mapRef.current` will be `undefined` when this hook first runs; edge case that
      if (!mapRef.current) return;
      console.log(userLocation);
      const H = window.H;
      const platform = new H.service.Platform({
          apikey: `${process.env.REACT_APP_API_KEY}`,
          app_id: "XXXXX"
      });
      const defaultLayers = platform.createDefaultLayers();
      const hMap = new H.Map(mapRef.current, defaultLayers.vector.normal.map, {
        center: { lat:userLocation.lat, lng: userLocation.lgn},
        zoom: 13,
        pixelRatio: window.devicePixelRatio || 1
      });

    var icon = new H.map.DomIcon(svgMarkup),
    coords = {lat: userLocation.lat, lng: userLocation.lgn},
    marker = new H.map.DomMarker(coords, {icon: icon});

    hMap.addObject(marker);
      
      //add initial events to be displayed
      
      const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(hMap));
  
      const ui = H.ui.UI.createDefault(hMap, defaultLayers);
      addEventsToMap(posts, H, hMap, ui);
    

      // This will act as a cleanup to run once this hook runs again.
      // This includes when the component un-mounts
      return () => {
        hMap.dispose();
      };
    }, [mapRef]);

My attempted solution
I tried passing a H.GeoPoint object as an argument to the InfoBubble, as event.target.getPosition() returns getPosition is not a function.

Would be really grateful if somebody would point me to the right direction!

EDIT

As it turns out the giant black artifact is the “close icon of the infobubble”. The following screenshot shows the content I want to be displayed:

Now the question is why is it getting rendered this way and is there a fix for it.

As mentioned earlier I’m using the code provided by the HERE API documentation!

Answer

I had the exact same problem. You also probably noted that oyu don’t have the UI menu available (a gigantic “+” -the zoom I guess- was also showing at map default generation).

Solution : if you installed here-js-api you need to import here-js-api/styles/mapsjs-ui.css in your code, or <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" /> otherwise.

Works like a charm.

Advertisement

Answer