The GeoJsonLayer
renders GeoJSON formatted data as polygons, lines and points (circles, icons and/or texts).
GeoJsonLayer
is a CompositeLayer. See the sub layers that it renders.
import DeckGL from '@deck.gl/react';
import {GeoJsonLayer} from '@deck.gl/layers';
function App({data, viewState}) {
/**
* Data format:
* Valid GeoJSON object
*/
const layer = new GeoJsonLayer({
id: 'geojson-layer',
data,
pickable: true,
stroked: false,
filled: true,
extruded: true,
pointType: 'circle',
lineWidthScale: 20,
lineWidthMinPixels: 2,
getFillColor: [160, 160, 180, 200],
getLineColor: d => colorToRGBArray(d.properties.color),
getPointRadius: 100,
getLineWidth: 1,
getElevation: 30
});
return <DeckGL viewState={viewState}
layers={[layer]}
getTooltip={({object}) => object && (object.properties.name || object.properties.station)} />;
}
To install the dependencies from NPM:
npm install deck.gl
# or
npm install @deck.gl/core @deck.gl/layers
import {GeoJsonLayer} from '@deck.gl/layers';
new GeoJsonLayer({});
To use pre-bundled scripts:
<script src="https://unpkg.com/deck.gl@^8.0.0/dist.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
<script src="https://unpkg.com/@deck.gl/layers@^8.0.0/dist.min.js"></script>
new deck.GeoJsonLayer({});
Inherits from all Base Layer and CompositeLayer properties.
data
The GeoJSONLayer
accepts any of the following formats passed to the data
prop:
FeatureCollection
, Feature
, Geometry
or GeometryCollection
object.Feature
objects.pointType
(String, optional)'circle'
How to render Point
and MultiPoint
features in the data. Supported types are:
circle
icon
text
To use more than one type, join the names with +
, for example pointType: 'icon+text'
.
The following props control the solid fill of Polygon
and MultiPolygon
features, and the Point
and MultiPoint
features if pointType
is 'circle'
.
filled
(Boolean, optional)true
Whether to draw filled polygons (solid fill) and points (circles). Note that for each polygon, only the area between the outer polygon and any holes will be filled. This prop is effective only when the polygon is NOT extruded.
getFillColor
(Function|Array, optional) [0, 0, 0, 255]
The solid color of the polygon and points (circles).
Format is [r, g, b, [a]]
. Each channel is a number between 0-255 and a
is 255 if not supplied.
The following props control the LineString
and MultiLineString
features,
the outline for Polygon
and MultiPolygon
features, and the outline for Point
and MultiPoint
features if pointType
is 'circle'
.
stroked
(Boolean, optional)true
Whether to draw an outline around polygons and points (circles). Note that for complex polygons, both the outer polygon as well the outlines of any holes will be drawn.
getLineColor
(Function|Array, optional) [0, 0, 0, 255]
The rgba color of a line is in the format of [r, g, b, [a]]
. Each channel is a number between 0-255 and a
is 255 if not supplied.
getLineWidth
(Function|Number, optional) 1
The width of a line, in units specified by lineWidthUnits
(default meters).
lineWidthUnits
(String, optional)'meters'
The units of the line width, one of 'meters'
, 'common'
, and 'pixels'
. See unit system.
lineWidthScale
(Number, optional) 1
A multiplier that is applied to all line widths.
lineWidthMinPixels
(Number, optional) 0
The minimum line width in pixels. This prop can be used to prevent the line from getting too thin when zoomed out.
lineWidthMaxPixels
(Number, optional) The maximum line width in pixels. This prop can be used to prevent the line from getting too thick when zoomed in.
lineCapRounded
(Boolean, optional)false
Type of line caps. If true
, draw round caps. Otherwise draw square caps.
lineJointRounded
(Boolean, optional)false
Type of line joint. If true
, draw round joints. Otherwise draw miter joints.
lineMiterLimit
(Number, optional) 4
The maximum extent of a joint in ratio to the stroke width.
Only works if lineJointRounded
is false
.
lineBillboard
(Boolean, optional)false
If true
, extrude the line in screen space (width always faces the camera).
If false
, the width always faces up.
The following props control the extrusion of Polygon
and MultiPolygon
features.
extruded
(Boolean, optional)Extrude Polygon and MultiPolygon features along the z-axis if set to
true. The height of the drawn features is obtained using the getElevation
accessor.
false
wireframe
(Boolean, optional)false
Whether to generate a line wireframe of the hexagon. The outline will have "horizontal" lines closing the top and bottom polygons and a vertical line (a "strut") for each vertex on the polygon.
Remarks:
GL.LINE
and will thus always be 1 pixel wide.extruded
prop is set to true.getElevation
(Function|Number, optional) 1000
The elevation of a polygon feature (when extruded
is true).
If a cartographic projection mode is used, height will be interpreted as meters, otherwise will be in unit coordinates.
elevationScale
(Number, optional) 1
Elevation multiplier. The final elevation is calculated by
elevationScale * getElevation(d)
. elevationScale
is a handy property to scale
all polygon elevation without updating the data.
material
(Object, optional)true
This is an object that contains material props for lighting effect applied on extruded polygons. Check the lighting guide for configurable settings.
The following props are forwarded to a ScatterplotLayer
if pointType
is 'circle'
.
Prop name | Default value | ScatterplotLayer equivalent |
---|---|---|
getPointRadius | 1 | getRadius |
pointRadiusUnits | 'meters' | radiusUnits |
pointRadiusScale | 1 | radiusScale |
pointRadiusMinPixels | 0 | radiusMinPixels |
pointRadiusMaxPixels | Number.MAX_SAFE_INTEGER | radiusMaxPixels |
pointAntialiasing | true | antialiasing |
pointBillboard | false | billboard |
The following props are forwarded to an IconLayer
if pointType
is 'icon'
.
Prop name | Default value | IconLayer equivalent |
---|---|---|
iconAtlas | null | iconAtlas |
iconMapping | {} | iconMapping |
getIcon | f => f.properties.icon | getIcon |
getIconSize | 1 | getSize |
getIconColor | [0, 0, 0, 255] | getColor |
getIconAngle | 0 | getAngle |
getIconPixelOffset | [0, 0] | getPixelOffset |
iconSizeUnits | 'pixels' | sizeUnits |
iconSizeScale | 1 | sizeScale |
iconSizeMinPixels | 0 | sizeMinPixels |
iconSizeMaxPixels | Number.MAX_SAFE_INTEGER | sizeMaxPixels |
iconBillboard | true | billboard |
iconAlphaCutoff | 0.05 | alphaCutoff |
The following props are forwarded to a TextLayer
if pointType
is 'text'
.
Prop name | Default value | TextLayer equivalent |
---|---|---|
getText | f => f.properties.text | getText |
getTextColor | [0, 0, 0, 255] | getColor |
getTextAngle | 0 | getAngle |
getTextSize | 32 | getSize |
getTextAnchor | 'middle' | getTextAnchor |
getTextAlignmentBaseline | 'center' | getAlignmentBaseline |
getTextPixelOffset | [0, 0] | getPixelOffset |
getTextBackgroundColor | [255, 255, 255, 255] | getBackgroundColor |
getTextBorderColor | [0, 0, 0, 255] | getBorderColor |
getTextBorderWidth | 0 | getBorderWidth |
textSizeUnits | 'pixels' | sizeUnits |
textSizeScale | 1 | sizeScale |
textSizeMinPixels | 0 | sizeMinPixels |
textSizeMaxPixels | Number.MAX_SAFE_INTEGER | sizeMaxPixels |
textCharacterSet | ASCII chars 32-128 | characterSet |
textFontFamily | 'Monaco, monospace' | fontFamily |
textFontWeight | 'normal' | fontWeight |
textLineHeight | 1 | lineHeight |
textMaxWidth | -1 | maxWidth |
textWordBreak | 'break-word' | wordBreak |
textBackground | false | background |
textBackgroundPadding | [0, 0] | backgroundPadding |
textOutlineColor | [0, 0, 0, 255] | outlineColor |
textOutlineWidth | 0 | outlineWidth |
textBillboard | true | billboard |
textFontSettings | {} | fontSettings |
The GeoJsonLayer renders the following sublayers:
polygons-fill
- a SolidPolygonLayer rendering all the Polygon
and MultiPolygon
features.polygons-stroke
- a PathLayer rendering the outline of all the Polygon
and MultiPolygon
features. Only rendered if stroked: true
and extruded: false
.linestrings
- a PathLayer rendering all the LineString
and MultiLineString
features.points-circle
- a ScatterplotLayer rendering all the Point
and MultiPoint
features if pointType
is 'circle'
.points-icon
- an IconLayer rendering all the Point
and MultiPoint
features if pointType
is 'icon'
.points-text
- a TextLayer rendering all the Point
and MultiPoint
features if pointType
is 'text'
.props.transitions: {geometry: <transition_settings>}
.coordinates
contain 3D points.