geojson layer does not display when I load through d3.json

Question

The geojson layer does not display when I load the geojson through d3.json as a data object. However, if I reference the geojson as a URL, then it displays properly.

I am using deck.gl: 6.3.2, mapbox-gl: v0.52.0. I am using vanilla javascript. When I run this code, it does not display. I checked the 'geomdata'. It is fine.

d3.json("roads.json", function(geomdata) { 
    deckgl = new deck.DeckGL({
      container,
      map: mapboxgl,
      mapboxApiAccessToken:
        "<myMapBoxKey>,
      mapStyle: "mapbox://styles/mapbox/light-v9",
      longitude: -98.58,
      latitude: 39.82,
      zoom: 4,
      layers: [
        new deck.GeoJsonLayer({
          geomdata,
          stroked: true,
          filled: true,
          lineWidthMinPixels: 2,
          opacity: 0.4,
          getLineColor: [255, 100, 100],
          getFillColor: [200, 160, 0, 180]
        })
      ]
    });
  });

However, when I run this where the geojson is a URL, it displays just fine.

d3.json("roads.json", function(geomdata) {      
var US_MAP_GEOJSON =
  "https://raw.githubusercontent.com/uber-common/deck.gl-data/master/examples/highway/roads.json";

    deckgl = new deck.DeckGL({
      container,
      map: mapboxgl,
      mapboxApiAccessToken:
        "<myMapBoxAccessKey>",
      mapStyle: "mapbox://styles/mapbox/light-v9",
      longitude: -98.58,
      latitude: 39.82,
      zoom: 4,
      layers: [
        new deck.GeoJsonLayer({
          data: US_MAP_GEOJSON ,
          stroked: true,
          filled: true,
          lineWidthMinPixels: 2,
          opacity: 0.4,
          getLineColor: [255, 100, 100],
          getFillColor: [200, 160, 0, 180]
        })
      ]
    });
  });

Any hints/ideas? Thanks

Answer 1

It looks like you have to pass an object into your GeoJsonLayer. But your first field is not key: value combo, it is just a value. Try setting your data like this data: geomdata.

    new deck.GeoJsonLayer({
      data: geomdata,
      stroked: true,
      filled: true,
      lineWidthMinPixels: 2,
      opacity: 0.4,
      getLineColor: [255, 100, 100],
      getFillColor: [200, 160, 0, 180]
    })