PolygonLayer
Edit on Codepen
The PolygonLayer
renders filled, stroked and/or extruded polygons.
PolygonLayer is a CompositeLayer that wraps around the SolidPolygonLayer and the PathLayer.
- JavaScript
- TypeScript
- React
import {Deck} from '@deck.gl/core';
import {PolygonLayer} from '@deck.gl/layers';
const layer = new PolygonLayer({
id: 'PolygonLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json',
getPolygon: d => d.contour,
getElevation: d => d.population / d.area / 10,
getFillColor: d => [d.population / d.area / 60, 140, 0],
getLineColor: [255, 255, 255],
getLineWidth: 20,
lineWidthMinPixels: 1,
pickable: true
});
new Deck({
initialViewState: {
longitude: -122.4,
latitude: 37.74,
zoom: 11
},
controller: true,
getTooltip: ({object}) => object && `${object.zipcode}\nPopulation: ${object.population}`,
layers: [layer]
});
import {Deck, PickingInfo} from '@deck.gl/core';
import {PolygonLayer} from '@deck.gl/layers';
type ZipCode = {
zipcode: number;
population: number;
area: number;
contour: [longitude: number, latitude: number][];
};
const layer = new PolygonLayer<ZipCode>({
id: 'PolygonLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json',
getPolygon: (d: ZipCode) => d.contour,
getElevation: (d: ZipCode) => d.population / d.area / 10,
getFillColor: (d: ZipCode) => [d.population / d.area / 60, 140, 0],
getLineColor: [255, 255, 255],
getLineWidth: 20,
lineWidthMinPixels: 1,
pickable: true
});
new Deck({
initialViewState: {
longitude: -122.4,
latitude: 37.74,
zoom: 11
},
controller: true,
getTooltip: ({object}: PickingInfo<ZipCode>) => object && `${object.zipcode}\nPopulation: ${object.population}`,
layers: [layer]
});
import React from 'react';
import {DeckGL} from '@deck.gl/react';
import {PolygonLayer} from '@deck.gl/layers';
import type {PickingInfo} from '@deck.gl/core';
type ZipCode = {
zipcode: number;
population: number;
area: number;
contour: [longitude: number, latitude: number][];
};
function App() {
const layer = new PolygonLayer<ZipCode>({
id: 'PolygonLayer',
data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/sf-zipcodes.json',
getPolygon: (d: ZipCode) => d.contour,
getElevation: (d: ZipCode) => d.population / d.area / 10,
getFillColor: (d: ZipCode) => [d.population / d.area / 60, 140, 0],
getLineColor: [255, 255, 255],
getLineWidth: 20,
lineWidthMinPixels: 1,
pickable: true
});
return <DeckGL
initialViewState={{
longitude: -122.4,
latitude: 37.74,
zoom: 11
}}
controller
getTooltip={({object}: PickingInfo<ZipCode>) => object && `${object.zipcode}\nPopulation: ${object.population}`}
layers={[layer]}
/>;
}
Installation
To install the dependencies from NPM:
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers
import {PolygonLayer} from '@deck.gl/layers';
import type {PolygonLayerProps} from '@deck.gl/layers';
new PolygonLayer<DataT>(...props: PolygonLayerProps<DataT>[]);
To use pre-bundled scripts:
<script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^9.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^9.0.0/dist.min.js"></script>
new deck.PolygonLayer({});