How to pass an array of coordinates to react-map-gl heatmap layer?

Question

having some trouble reconciling the docs to my use-case. I got a little stuck trying to get openstreet maps into react using d3, and have been playing around with react-map-gl...great library that's pretty dialed-in! This library is built on top of d3 and openstreetmaps and uses a lot of d3 plugins...here's the example I am trying to replicate:

https://github.com/uber/react-map-gl/blob/5.0-release/examples/heatmap/src/app.js

In this example, the data where the coordinates live is in a geoJson file, and it is accessed in a method that looks like this (Copied and pasted from the link above...in this code they are using the d3-request plugin to fetch and parse through the geoJson file, which contains other data about earthquakes etc):

  _handleMapLoaded = event => {
    const map = this._getMap();

    requestJson(
      'https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson',
      (error, response) => {
        if (!error) {
          // Note: In a real application you would do a validation of JSON data before doing anything with it,
          // but for demonstration purposes we ingore this part here and just trying to select needed data...
          const features = response.features;
          const endTime = features[0].properties.time;
          const startTime = features[features.length - 1].properties.time;

          this.setState({
            earthquakes: response,
            endTime,
            startTime,
            selectedTime: endTime
          });
          map.addSource(HEATMAP_SOURCE_ID, {type: 'geojson', data: response});
          map.addLayer(this._mkHeatmapLayer('heatmap-layer', HEATMAP_SOURCE_ID));
        }
      }
    );
  };

This is great if you are using GeoJson, and I have done this quite a bit to point d3 towards an object for US states, counties, or zipcodes...However what I am trying to do is much simpler! I have an array of data that I'm fetching, and passing down as props to this heatmap component, and it looks something like this:

[
{name: locationOne, latitude: 1.12345, longitude: -3.4567},
{name: locationTwo, latitude: 1.2345, longitude: -5.678},
...etc

]

So the question is, if I am not using geoJson, how do I tell the heatmap what coordinates to use? Any help is appreciated!!!

Brett DeWoody · Answer 1 · 2019-07-04T08:33:32.117

Even though the data in your array isn't geoJson, we can manipulate it into geoJSON. We can do this by creating a factory function to return valid geoJSON using the array data.

Once the data is converted to geoJSON it can be used as shown in the example you've found.

const rawData = [
  {name: 'Feature 1', value: 2, latitude: 1.12345, longitude: -3.4567},
  {name: 'Feature 2', value: 5, latitude: 1.2345, longitude: -5.678},
];

const makeGeoJSON = (data) => {
  return {
    type: 'FeatureCollection',
    features: data.map(feature => {
      return {
        "type": "Feature",
        "properties": {
          "id": feature.name,
          "value": feature.value
        },
        "geometry": {
          "type": "Point",
          "coordinates": [ feature.latitude, feature.longitude]
        }
      }
    })
  }
};

const myGeoJSONData = makeGeoJSON(rawData);

console.log(myGeoJSONData);

How to pass an array of coordinates to react-map-gl heatmap layer?

1 Answers1