Deck.GL ScatterplotLayer не отображает точки

Я слишком долго ломал голову над этим. У меня есть простейшее приложение React, которое передает некоторые данные в качестве опоры в WhateverMap (так называемое, потому что я пробовал много разных библиотек карт).

Однако, когда я пытаюсь построить точки данных на Deck.GL с помощью ScatterplotLayer, я просто не вижу их на визуализированной карте.

Согласно React Developer Tools, компонент ScatterplotLayer действительно получил мои точки данных.

Я ожидаю увидеть указатели на определенной части железнодорожных путей в Берлине.

import React, { Component } from 'react';
import Header from './Header';
import WhateverMap from './Map';
import Table from './Table';

class App extends Component {
  state = {
    // Trip along the Ringbahn
    data: [
        {'timestamp': Date.now()-10000, 'coordinates': [52.536131,13.447444], 'temperature': 19},
        {'timestamp': Date.now()-9000, 'coordinates': [52.538221,13.44376], 'temperature': 20},
        {'timestamp': Date.now()-8000, 'coordinates': [52.540247,13.43899], 'temperature': 21},
        {'timestamp': Date.now()-7000, 'coordinates': [52.541751,13.43513], 'temperature': 22},
        {'timestamp': Date.now()-6000, 'coordinates': [52.54264,13.433692], 'temperature': 23},
        {'timestamp': Date.now()-5000, 'coordinates': [52.543007,13.431339], 'temperature': 24},
        {'timestamp': Date.now()-4000, 'coordinates': [52.543755,13.428731], 'temperature': 25},
        {'timestamp': Date.now()-3000, 'coordinates': [52.544295,13.427207], 'temperature': 27}
    ]
  };
  render() {
    return (
      <div className="container">
        <Header />
        <WhateverMap data={this.state.data} />
        <Table data={this.state.data} />
      </div>
    );
  }
}

export default App;

WhateverMap:

import React, { PureComponent } from 'react';
import MapGL from 'react-map-gl';
import DeckGL, { ScatterplotLayer } from 'deck.gl';

const mapbox_token = ''
const mapConfig = {
  center: [52.540875, 13.438545],
  zoom: 13
};

class WhateverMap extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      viewport: {
        width: 960,
        height: 600,
        latitude: mapConfig.center[0],
        longitude: mapConfig.center[1],
        zoom: mapConfig.zoom,
        startDragLngLat: mapConfig.center,
      },
    };

    this.onChangeViewport = this.onChangeViewport.bind(this);
  }

  onChangeViewport(viewport) {
    this.setState({
      viewport: { ...this.state.viewport, ...viewport }
    });
  }

  initialize(gl) {
    gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE, gl.ONE_MINUS_DST_ALPHA, gl.ONE);
    gl.blendEquation(gl.FUNC_ADD);
  }

  render() {
    const { viewport } = this.state;
    const { data } = this.props;

    const plot_position_layer = new ScatterplotLayer({
        id: 'scatterplot-layer',
        data,
        pickable: true,
        opacity: 0.8,
        radiusScale: 6,
        radiusMinPixels: 1,
        radiusMaxPixels: 100,
        getPosition: d => d.coordinates,
    })

    return (
      <div className="reactmapgldeckgl">
        <MapGL
          {...viewport}
          mapboxApiAccessToken={mapbox_token}
          mapStyle="mapbox://styles/mapbox/dark-v9"
          onChangeViewport={this.onChangeViewport}
        >
          <DeckGL
            {...viewport}
            onWebGLInitialized={this.initialize}
            layers={[plot_position_layer]}
          />
        </MapGL>
      </div>
    );
  }
}

export default WhateverMap;