Chevron DownAPI Reference
GreatCircleLayer
i

Explore GreatCircleLayer's API
Sample data


autoHighlight: false
getHeight: 0
getSourceColor: #40ff00
getTargetColor: #0080c8
getTilt: 0
getWidth: 1
greatCircle: true
highlightColor: #000080
opacity: 1
pickable: true
visible: true
widthMaxPixels: 9007199254740991
widthMinPixels: 5
widthScale: 1
wrapLongitude: false
View Code ↗

GreatCircleLayer

The GreatCircleLayer is a variation of the ArcLayer. It renders flat arcs along the great circle joining pairs of source and target points, specified as latitude/longitude coordinates.

Starting v8.2, using this layer is identical to using the ArcLayer with props greatCircle: true and getHeight: 0.

import DeckGL, {GreatCircleLayer} from 'deck.gl';

function App({data, viewState}) {
  /**
   * Data format:
   * [
   * {
   *   "from": {
   *     "type": "major",
   *     "name": "San Francisco Int'l",
   *     "abbrev": "SFO",
   *     "coordinates": [
   *       -122.38347034444931,
   *       37.61702508680534
   *     ]
   *   },
   *   "to": {
   *     "type": "major",
   *     "name": "Liverpool John Lennon",
   *     "abbrev": "LPL",
   *     "coordinates": [
   *       -2.858620657849378,
   *       53.3363751054422
   *     ]
   *   }
   *   ...
   * ]
   */
  const layer = new GreatCircleLayer({
    id: 'great-circle-layer',
    data,
    pickable: true,
    getStrokeWidth: 12,
    getSourcePosition: d => d.from.coordinates,
    getTargetPosition: d => d.to.coordinates,
    getSourceColor: [64, 255, 0],
    getTargetColor: [0, 128, 200]
  });

  return <DeckGL viewState={viewState}
    layers={[layer]}
    getTooltip={({object}) => object && `${object.from.name} to ${object.to.name}`} />;
}

Properties

Inherits from all Base Layer and ArcLayer properties.

Source

great-circle-layer