Есть ли какие-нибудь рабочие примеры kepler.gl? - PullRequest
Новая
       30

Есть ли какие-нибудь рабочие примеры kepler.gl?

0 голосов
/ 04 марта 2020

В настоящее время в открытых примерах kepler.gl React есть открытая, критическая ошибка.

Открытая проблема: https://github.com/keplergl/kepler.gl/issues/983

Примеры React, которые в настоящее время, похоже, не работает: https://github.com/keplergl/kepler.gl/tree/master/examples

Я пытаюсь заставить карту kepler.gl работать в моем приложении React. Я вижу боковую панель и другие посторонние предметы, но сама карта не показывает. Если у кого-нибудь есть какие-либо рабочие примеры интеграции карты кеплера в приложение React, я бы с удовольствием посмотрел ее, но также если бы кто-нибудь знал, почему моя текущая интеграция нарушена, это также очень помогло бы.

В моем указателе. js файл у меня есть: 

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, combineReducers, compose} from 'redux';
import { Provider } from 'react-redux'
import ReduxThunk from 'redux-thunk'
import * as serviceWorker from './serviceWorker';
import axios from 'axios';

import App from './components/App';
import config from './config';

// reducers
import auth from './reducers/auth';
import runtime from './reducers/runtime';
import navigation from './reducers/navigation';
import posts from './reducers/posts';
// import reducers from './reducers';

import keplerGlReducer from 'kepler.gl/reducers';
import {enhanceReduxMiddleware} from 'kepler.gl/middleware';

axios.defaults.baseURL = config.baseURLApi;
axios.defaults.headers.common['Content-Type'] = "application/json";
const token = localStorage.getItem('token');
if (token) {
    axios.defaults.headers.common['Authorization'] = "Bearer " + token;
}

const reducers = combineReducers({
    auth,
    runtime,
    navigation,
    posts,
    // <-- mount kepler.gl reducer in your app
    keplerGl: keplerGlReducer,
  });

const store = createStore(
  reducers,
  applyMiddleware(
    ReduxThunk
  )
);

ReactDOM.render(
    <Provider store={store}>
        <link rel="stylesheet" href="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/uber-fonts/4.0.0/superfine.css"></link>
        <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.1.1/mapbox-gl.css" rel="stylesheet"></link>
        <script src="https://unpkg.com/kepler.gl/umd/keplergl.min.js"></script>
        <App />
    </Provider>,
    document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

И в моем компоненте карты у меня есть: 

import React from 'react';
import {connect} from 'react-redux';

import KeplerGl from 'kepler.gl';
import {addDataToMap} from 'kepler.gl/actions';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';


const sampleTripData = {
  fields: [
    {name: 'tpep_pickup_datetime', format: 'YYYY-M-D H:m:s', type: 'timestamp'},
    {name: 'pickup_longitude', format: '', type: 'real'},
    {name: 'pickup_latitude', format: '', type: 'real'}
  ],
  rows: [
    ['2015-01-15 19:05:39 +00:00', -73.99389648, 40.75011063],
    ['2015-01-15 19:05:39 +00:00', -73.97642517, 40.73981094],
    ['2015-01-15 19:05:40 +00:00', -73.96870422, 40.75424576]
  ]
};

const sampleConfig = {
  visState: {
    filters: [
      {
        id: 'me',
        dataId: 'test_trip_data',
        name: 'tpep_pickup_datetime',
        type: 'timeRange',
        enlarged: true
      }
    ]
  }
};

class Maps extends React.Component {

  componentDidMount() {
    this.props.dispatch(
      addDataToMap({
        datasets: {
          info: {
            label: 'Sample Taxi Trips in New York City',
            id: 'test_trip_data'
          },
          data: sampleTripData
        },
        option: {
          centerMap: true,
          readOnly: false
        },
        config: sampleConfig
      })
    );
  }

  render() {
    return (
      <div style={{position: 'absolute', left: 0, width: '100vw', height: '100vh'}}>
        soimething
        <AutoSizer>
        {({height, width}) => (
          <KeplerGl
          id="map"
          width={width}
          mapboxApiAccessToken={"my mapbox token"}
          height={height}
          />
        )}
      </AutoSizer>
      </div>

    );
  }
}

const mapStateToProps = state => state;
const dispatchToProps = dispatch => ({dispatch});

export default connect(mapStateToProps, dispatchToProps)(Maps);
...