Deck.gl globe advice

Question

I was just wondering if anyone can provide an example of the globe being used within Deck.gl, is it an actual globe or is it just the view. As I would like to be able to view a globe, I've made a minor attempt at using it but this left me with a static map for a background and a global view laid on top which is not what I want.

Answer 1

I found the example of the globe view on the deck.gl site, I've changed the code to utilise React and this seems to work perfectly.

import React from 'react'
import {Deck, _GlobeView as GlobeView} from '@deck.gl/core';
import {SolidPolygonLayer, GeoJsonLayer, ArcLayer} from '@deck.gl/layers';
import { DeckGL } from 'deck.gl';

// source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
const COUNTRIES =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_admin_0_scale_rank.geojson'; //eslint-disable-line
const AIR_PORTS =
  'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';

const INITIAL_VIEW_STATE = {
  latitude: 50,
  longitude: 50,
  zoom: 0
};

export function Globe() {

    return (
        <DeckGL 
            views={ new GlobeView()}
            initialViewState={INITIAL_VIEW_STATE}
            controller={true}
            layers= {[
                // A GeoJSON polygon that covers the entire earth
                // See /docs/api-reference/globe-view.md#remarks
                new SolidPolygonLayer({
                    id: 'background',
                    data: [
                        // prettier-ignore
                        [[-180, 90], [0, 90], [180, 90], [180, -90], [0, -90], [-180, -90]]
                    ],
                    opacity: 0.5,
                    getPolygon: d => d,
                    stroked: false,
                    filled: true,
                    getFillColor: [32, 201, 218]
                }),
                new GeoJsonLayer({
                    id: 'base-map',
                    data: COUNTRIES,
                    // Styles
                    stroked: true,
                    filled: true,
                    lineWidthMinPixels: 2,
                    getLineColor: [35, 107, 19],
                    getFillColor: [41, 156, 22]
                }),
                new GeoJsonLayer({
                    id: 'airports',
                    data: AIR_PORTS,
                    // Styles
                    filled: true,
                    pointRadiusMinPixels: 2,
                    pointRadiusScale: 2000,
                    getRadius: f => 11 - f.properties.scalerank,
                    getFillColor: [200, 0, 80, 180],
                    // Interactive props
                    pickable: true,
                    autoHighlight: true,
                    onClick: info =>
                        // eslint-disable-next-line
                        info.object && alert(`${info.object.properties.name} (${info.object.properties.abbrev})`)
                }),
                new ArcLayer({
                    id: 'arcs',
                    data: AIR_PORTS,
                    dataTransform: d => d.features.filter(f => f.properties.scalerank < 4),
                    // Styles
                    getSourcePosition: f => [-0.4531566, 51.4709959], // London
                    getTargetPosition: f => f.geometry.coordinates,
                    getSourceColor: [0, 128, 200],
                    getTargetColor: [200, 0, 80],
                    getWidth: 1
                })
            ]}
        />   
    )
}