HERE maps (clustering) integration to react app

Question

I am able to integrate the Here maps clustering overlay with dummy data but not able to manipulate the data I am getting from an api to use it correctly.

I have been messing about with so many different JS array and object methods for the last 2 days the I have lost track of what I have tried and haven't tried.

My JSON response from the api is:

[0 … 99]
0:
coordinates: Array(2)
0: 24.77234
1: 59.43862
length: 2
__proto__: Array(0)
type: "Point"
__proto__: Object
1: {type: "Point", coordinates: Array(2)}

and code for this function:

    const getTlnBusData = async () => {
      const test = await gpsData.flatMap((vehicle) => [vehicle.geometry]);
      console.log('test', test);
      const testValues = Object.values(test);
      console.log('testValues', testValues);
      // const coords = [el.geometry.coordinates];
      // console.log('batman', coords);

      const dataPoints = [];
      // const dataPoints = [test];
      // dataPoints.push(new H.clustering.DataPoint([test.coordinates]);
      dataPoints.push(new H.clustering.DataPoint(50.04, 1.01));
      dataPoints.push(new H.clustering.DataPoint(51.45, 1.01));
      dataPoints.push(new H.clustering.DataPoint(51.01, 2.01));

      /**
       * Assuming that 'dataPoints' and 'map'
       * is initialized and available, create a data provider:
       */
      const clusteredDataProvider = new H.clustering.Provider(dataPoints);

      // Create a layer that includes the data provider and its data points:
      const layer = new H.map.layer.ObjectLayer(clusteredDataProvider);

      // Add the layer to the map:
      hMap.addLayer(layer);
    };
    getTlnBusData();

I have tried variations of forEach, loop, map/flatMap and I can't seem to replace the dummy data with any of my solutions.

Can anyone point me in the right direction please?

TIA!

score 0 · Answer 1 · answered Jul 18 '20 at 11:41

Solution I found:

    const getTlnBusData = async () => {
      const vehicles = await gpsData.flatMap((vehicle) => [vehicle.geometry]);

      const dataPoints = vehicles.map(
        (item, idx) =>
          new H.clustering.DataPoint(
            item.coordinates[1],
            item.coordinates[0],
            null,
            item
          )
      );

      console.log('bounty', dataPoints);

      /**
       * Assuming that 'dataPoints' and 'map'
       * is initialized and available, create a data provider:
       */
      const clusteredDataProvider = new H.clustering.Provider(dataPoints);

      // Create a layer that includes the data provider and its data points:
      const layer = new H.map.layer.ObjectLayer(clusteredDataProvider);

      // Add the layer to the map:
      hMap.addLayer(layer);
    };
    getTlnBusData();

HERE maps (clustering) integration to react app

1 Answers1