How to use geoAlbersUsa (or any projection) for GeoJsonLayer

[jhirn]

Hello.

I am trying to render a US Map not unlike the example here. https://observablehq.com/@d3/us-state-choropleth/2

I'm not quite sure how best to approach this and I've been stuck for a couple of days.

I'm able to render my layer just fine with the following GeoJsonLayer. I'm using fixed size to make the projection bounds easier for now.

// This worked well with the polygon layer
const initialViewState = {
  target: [305, 487, 0],
  zoom: 1
}

// This works best with the unprojected GeoJson
// const initialViewState = {
//   longitude: -98.5795,
//   latitude: 39.8283,
//   zoom: 3,
//   minZoom: 3,
//   maxZoom: 10,
//   pitch: 0,
//   bearing: 0
// }

  const layers = [
    new GeoJsonLayer({
      id: 'geojson-layer',
      data: countyGeoJson,
      pickable: true,
      stroked: true,
      filled: true,
      extruded: false,
      lineWidthScale: 20,
      lineWidthMinPixels: 1,
      getFillColor: function (f) {
        const revenue = f.properties.revenue
        if (!revenue) return [0, 0, 0, 0]

        const color = d3.color(quantileScale(revenue))
        const colorArray = [color.r, color.g, color.b, 255]
        return colorArray
      },
      getLineColor: [100, 100, 100, 100],
      getLineWidth: 0.2
    })
  ]

  return 
  <div className={cn('w-[975px] h-[610px] relative')}>
        <DeckGL
          initialViewState={viewState}
          onViewStateChange={handleViewStateChange}
          layers={layers}
          controller
        />
     </div>

I've rendered this data using the following projection in 2d Canvas and SVG before.

const projection = d3.geoAlbersUsa().fitSize([975, 610], countyGeoJson) 

This is my approach to converting the coordinates.

  countyGeoJson.features.forEach((feature) => {
    const geometry = feature.geometry
    if (geometry.type === 'Polygon') {
      geometry.coordinates = geometry.coordinates.map((coords) => {
        return coords.map(function (coord) {
          return projection(coord)
        })
      })
    } else if (geometry.type === 'MultiPolygon') {
      geometry.coordinates = geometry.coordinates.map((polygon) => {
        return polygon.map((coords) => {
          return coords.map(function (coord) {
            return projection(coord)
          })
        })
      })
    }
  })

I've also tried a few combinations of swapping out coordinateSystem for CARTESIAN and using OrthograhpicView but all i ever get is a blank canvas when loading the projected coordinates with GeoJson Layer.

I got very close by using PolygonLayer, however that has a caveat of not supporting MultiPolygon geometries. Only the first geometry is treated as the outer boundary and the rest as holes so territories LA county which has islands aren't filled correctly (well it's "correct" but not what I need). I suppose I could completely blow out the GeoJson to account for this and will as a last resort, but it feels heavy handed.

I honestly don't care about actually using the d3.geoAlbersUsa projection so much as I want to scale and transform Alaska. I'm aware there are some functions in Turf.js which can help with that but I want to make sure i'm not overlooking a simpler solution.

Thanks in advance.

[ghost]

+1. We would essentially like to use the default MapView for a GeoJSON layer but with D3's naturalEarth1 projection instead of the default WebMercator.