What's the simplest way to render a polygon in Deck.GL?

Question

I'm trying to understand conceptually how Deck.GL renders things so I'm working through the example layers from Lines to Polygons to GeoJson. Lines work fine but something is preventing me from rendering even the simplest polygons DeckGL has in their examples.

Here's some example line code that works

import React from "react";
import DeckGL, { LineLayer } from "deck.gl";
import { StaticMap } from "react-map-gl";

const MAPBOX_ACCESS_TOKEN = process.env.REACT_APP_MAPBOX_KEY;

// Viewport settings
const viewState = {
  longitude: -122.41669,
  latitude: 37.7853,
  zoom: 13,
  pitch: 0,
  bearing: 0
};

// Data to be used by the LineLayer
const data = [
  {
    sourcePosition: [-91.72307036099997, 31.814196736000035],
    targetPosition: [-122.41669, 37.781]
  },
  {
    sourcePosition: [-122.41669, 37.781],
    targetPosition: [-95.52274057225983, 30.131426214982195]
  }
];

// DeckGL react component
export default class ExampleMap extends React.Component {
  render() {
    const layers = [new LineLayer({ id: "line-layer", data })];

    return (
      <DeckGL initialViewState={viewState} controller={true} layers={[layers]}>
        <StaticMap mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN} />
      </DeckGL>
    );
  }
}

When I replace the LineLayer with this Polygon layer below - it completely fails to show anything

//examplepoly.js

import { PolygonLayer } from "deck.gl";

// Data to be used by the POLYLayer

const polygonData = [
  -91.72307036099997,
  31.814196736000035,
  0,
  -122.41669,
  37.781,
  0,
  -95.52274057225983,
  30.131426214982195,
  0,
  -91.72307036099997,
  31.814196736000035,
  0
];

const LAYER_POLY = [
  new PolygonLayer({
    id: "poly-layer",
    data: polygonData
  })
];

export default LAYER_POLY;

Can anyone show me a simple Polygon layer that I can use? The one from the documentation doesn't seem to work and GeoJson one is a bit too complicated for now

prestonsmith prestonsmith · Accepted Answer · 2019-03-01T16:53:25

Figured it out.

The PolygonLayer's getPolygon function didn't recognize my array's data so I needed to restructure it as below:

// examplePolygonLayer.js
import { PolygonLayer } from "deck.gl";

// Data to be used by the POLYLayer
const polygonData = [
  {
    contours: [
      [-91.72307036099997, 31.814196736000035],
      [-122.41669, 37.781],
      [-95.52274057225983, 30.131426214982195],
      [-91.72307036099997, 31.814196736000035]
    ],
    name: "firstPolygon"
  }
];

const LAYER_POLY = new PolygonLayer({
  id: "poly-layers",
  data: polygonData,
  stroked: true,
  filled: true,
  extruded: false,
  wireframe: true,
  lineWidthMinPixels: 1,
  getPolygon: d => d.contours,
  getLineColor: [80, 80, 80],
  getFillColor: [80, 80, 80],
  getLineWidth: 250
});
export default LAYER_POLY;

Shows this:

What's the simplest way to render a polygon in Deck.GL?

1 Answers