Are there any working react examples of kepler.gl?

Question

Right now there is an open, breaking bug in the provided kepler.gl React examples.

The open issue: https://github.com/keplergl/kepler.gl/issues/983

The React examples that currently don't seem to work: https://github.com/keplergl/kepler.gl/tree/master/examples

I'm trying to get a kepler.gl map working in my React app. I can see the sidebar and other extraneous things show up but the actual map itself does not. If anybody has any working examples of integrating a kepler map into a React app I would love to see it but also if anybody knows why my current integration is broken that would also be of great help.

In my index.js file I have:

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

And in my map component I have:

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);

Answer 1

I don't see anything glaringly out of order in your example but if the UI is showing up and the map is not, it could be the Mapbpox-related imports and tokens etc. Would be good to inspect your console for errors or warnings and also check the network tab.

I imported a working example I have with Create React App plus Typescript and KeplerGL into Codesandbox for your reference if you still need it: https://codesandbox.io/s/create-react-app-typescript-keplergl-bv0vb

Answer 2

Save a .env file in root and give ur React_API= it will work