Skip to content

geojson-layer.md

Latest commit

 

History

History
358 lines (236 loc) · 15.7 KB

geojson-layer.md

File metadata and controls

358 lines (236 loc) · 15.7 KB

import {GeoJsonLayerDemo} from 'website-components/doc-demos/layers';

lighting

GeoJsonLayer

The GeoJsonLayer takes in GeoJSON formatted data and renders it as interactive 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)} />;
}

Installation

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({});

Properties

Inherits from all Base Layer and CompositeLayer properties.

data

The GeoJSONLayer accepts any of the following formats passed to the data prop:

  • A valid GeoJSON FeatureCollection, Feature, Geometry or GeometryCollection object.
  • An array of GeoJSON Feature objects.
  • An URL or Promise that resolves to the above formats.
  • loaders.gl's flat GeoJSON format.
pointType (String, optional)
  • Default: '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'.

Fill Options

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)
  • Default: 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) transition-enabled
  • Default: [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.

  • If an array is provided, it is used as the fill color for all features.
  • If a function is provided, it is called on each feature to retrieve its fill color.

Stroke Options

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)
  • Default: 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) transition-enabled
  • Default: [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.

  • If an array is provided, it is used as the line color for all features.
  • If a function is provided, it is called on each feature to retrieve its line color.
getLineWidth (Function|Number, optional) transition-enabled
  • Default: 1

The width of a line, in units specified by lineWidthUnits (default meters).

  • If a number is provided, it is used as the line width for all features.
  • If a function is provided, it is called on each feature to retrieve its line width.
lineWidthUnits (String, optional)
  • Default: 'meters'

The units of the line width, one of 'meters', 'common', and 'pixels'. See unit system.

lineWidthScale (Number, optional) transition-enabled
  • Default: 1

A multiplier that is applied to all line widths.

lineWidthMinPixels (Number, optional) transition-enabled
  • Default: 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) transition-enabled
  • Default: Number.MAX_SAFE_INTEGER

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)
  • Default: false

Type of line caps. If true, draw round caps. Otherwise draw square caps.

lineJointRounded (Boolean, optional)
  • Default: false

Type of line joint. If true, draw round joints. Otherwise draw miter joints.

lineMiterLimit (Number, optional) transition-enabled
  • Default: 4

The maximum extent of a joint in ratio to the stroke width. Only works if lineJointRounded is false.

lineBillboard (Boolean, optional)
  • Default: false

If true, extrude the line in screen space (width always faces the camera). If false, the width always faces up.

3D Options

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.

  • Default: false
wireframe (Boolean, optional)
  • Default: 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:

  • These lines are rendered with GL.LINE and will thus always be 1 pixel wide.
  • Wireframe and solid extrusions are exclusive, you'll need to create two layers with the same data if you want a combined rendering effect.
  • This is only effective if the extruded prop is set to true.
getElevation (Function|Number, optional) transition-enabled
  • Default: 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.

  • If a number is provided, it is used as the elevation for all polygon features.
  • If a function is provided, it is called on each polygon feature to retrieve its elevation.
elevationScale (Number, optional) transition-enabled
  • Default: 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)
  • Default: true

This is an object that contains material props for lighting effect applied on extruded polygons. Check the lighting guide for configurable settings.

pointType:circle Options

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

pointType:icon Options

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

pointType:text Options

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

Sub Layers

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'.

Remarks

  • Geometry transition can be enabled with props.transitions: {geometry: <transition_settings>}.
  • Input data must adhere to the GeoJSON specification. Most GIS software support exporting to GeoJSON format. You may validate your data with free tools such as this.
  • The GeoJsonLayer renders 3D geometries if each feature's coordinates contain 3D points.

Source

modules/layers/src/geojson-layer