heremaps iterate through multiple coordinates and place markers

Question

I am trying to use Heremaps in my React application to display the coordinates of some vehicles from an external api but I am having issues with placing multiple markers.

I can place a marker for single coordinates or use the grouping feature but what I want is an individual marker for each pair of coords in the api response.

The coords from the api are given as: (lng, lat).

0: (2) [24.7576, 59.43742]
1: (2) [24.76396, 59.43277]
2: (2) [24.73415, 59.41136]
3: (2) [24.74368, 59.41902]
4: (2) [24.76765, 59.43184]

    const myLocationIcon = new H.map.Icon(
      'https://img.icons8.com/ultraviolet/40/000000/pin3.png',
      { size: { w: 32, h: 32 } }
    );


  const locationMarker = (map) => {
      const myMarker = new H.map.Marker(
        {
          lat: realLat,
          lng: realLong,
        },
        {
          icon: myLocationIcon,
        }
      );
      map.addObject(myMarker);
    };

      locationMarker(hMap);

This will give me a marker for a set of coords, but I am failing to understand how to iterate through the array values to put multiple.

I have tried looping, forEach and Map but nothing is coming close and any examples I find online are for googlemaps and I havn't been able to refactor to make it work with heremaps.

Has anyone got any ideas what I can try? without using their grouping option?

UPDATE:

Noticed another set up with DomMarker in Heremaps documentation so have refactored to this:

    const myLocationMarker = async (map) => {
      const tltVehicles = await gpsData.map(
        (vehicle) => vehicle.geometry.coordinates
      );

      const tltCoords = tltVehicles.map(([lng, lat]) => ({ lng, lat }));
      console.log('tltCoords', tltCoords);

      const getLng = tltCoords.map((longitude) => longitude.lng);
      const getLat = tltCoords.map((latitude) => latitude.lat);
      // console.log('test', test);

      const busIconUrl =
        '<svg width="24" height="24" ' +
        'xmlns="http://www.w3.org/2000/svg">' +
        '<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
        'height="22" /><text x="12" y="18" font-size="12pt" ' +
        'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
        'fill="white">H</text></svg>';
      const icon = new H.map.DomIcon(busIconUrl);
      const coords = {
        lng: getLng,
        lat: getLat,
      };
      const marker = new H.map.DomMarker(coords, { icon });
      map.setZoom(12);
      map.addObject(marker);
    };

My coords are now clearer as objs in an array but I am still getting errors.

0: {lng: 24.75396, lat: 59.43905}
1: {lng: 24.74562, lat: 59.41914}
2: {lng: 24.74326, lat: 59.42896}
3: {lng: 24.74463, lat: 59.41889}
4: {lng: 24.74474, lat: 59.41937}
5: {lng: 24.76047, lat: 59.43488}
6: {lng: 24.79472, lat: 59.42708}

Error in console is:

Uncaught (in promise) InvalidArgumentError: H.map.AbstractMarker#setGeometry (Argument #0 [object Object])
    at new D (https://js.api.here.com/v3/3.1/mapsjs-core.js:43:977)
    at Xf (https://js.api.here.com/v3/3.1/mapsjs-core.js:89:407)
    at ei.bi.ba (https://js.api.here.com/v3/3.1/mapsjs-core.js:177:548)
    at ei.bi [as constructor] (https://js.api.here.com/v3/3.1/mapsjs-core.js:177:309)
    at new ei (https://js.api.here.com/v3/3.1/mapsjs-core.js:180:387)
    at myLocationMarker (http://localhost:3000/static/js/12.chunk.js:491:22)

So hidden under their 'Best Practice' section Heremaps suggested something like this:

  const tltLocationMarkers = async (map) => {
      const tltVehicles = await gpsData.map(
        (vehicle) => vehicle.geometry.coordinates
      );

      const busIconUrl =
        '<svg width="24" height="24" ' +
        'xmlns="http://www.w3.org/2000/svg">' +
        '<rect stroke="white" fill="#1b468d" x="1" y="1" width="22" ' +
        'height="22" /><text x="12" y="18" font-size="12pt" ' +
        'font-family="Arial" font-weight="bold" text-anchor="middle" ' +
        'fill="white">H</text></svg>';

      const points = tltVehicles.map(([lng, lat]) => ({ lng, lat }));
      const markers = [];
      // Create single Icon instance
      const icon = new H.map.Icon(busIconUrl);

      console.log('points', points);
      console.log('markers', markers);

      for (let i = 0; i < points.length; i++) {
        markers.push(
          new H.map.Marker(points[i], {
            // Reuse the Icon instance:
            icon,
          })
        );
      }

      // const marker = new H.map.DomMarker(coords, { icon });
      map.setZoom(12);
      map.addObject(markers);
    };

The map now loads but with no markers and this error in the console:

Uncaught (in promise) InvalidArgumentError: H.Map#addObject (Argument #0 [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object 

As shown here: https://developer.here.com/documentation/maps/3.1.17.0/dev_guide/topics/best-practices.html