With Kepler.gl, I need to display a polygon layer but it doesn’t show on my app, the layer is created. The issue isn’t the data because it came directly from kepler.gl demo site (export -> Export Map -> JSON) and when I tried it on the same demo-app, everything works fine! So the issue must come from my app but I can’t figure it out (I’m pretty new with react)!
Here’s my app: 
Here’s kerpler demo with the same data: 
Here’s my code:
import React, { Component, useContext} from 'react';
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import { addDataToMap, wrapTo } from '@kepler.gl/actions';
import KeplerGl from '@kepler.gl/components';
import { processKeplerglJSON } from '@kepler.gl/processors';
import styled from 'styled-components';
import cadastreData from './data/kepler.gl.json'
const StyledWrapper = styled.div`
position: absolute;
width: 100vw;
height: 100vh;
`;
export default class FreshMap extends Component {
static contextType = SelectedNamesContext;
componentDidMount() {
this.props.dispatch(addDataToMap(processKeplerglJSON(cadastreData)));
}
render() {
const { id } = this.props;
return (
<StyledWrapper>
<AutoSizer>
{({ height, width }) => (
<KeplerGl
mapboxApiAccessToken={TOKEN}
id={id}
width={width}
height={height}
/>
)}
</AutoSizer>
</StyledWrapper>
);
}
}
And here’s how I call it in my app.js,
class App extends Component {
render() {
return (
<div style={{ position: 'absolute', width: '100%', height: '100%' }}>
<SelectedNamesProvider>
<TabView> // tab from primereact
<TabPanel header="dashboard">
// ...
</TabPanel>
<TabPanel header="map">
<div height='500px'>
<FreshMap
dispatch={this.props.dispatch}
id="foo">
</FreshMap>
</div>
</TabPanel>
</TabView >
</SelectedNamesProvider>
</div >
);
}
}
const mapStateToProps = state => state;
const dispatchToProps = dispatch => ({ dispatch });
export default connect(mapStateToProps, dispatchToProps)(App);
Here’s my store.js:
import keplerGlReducer from '@kepler.gl/reducers';
import {legacy_createStore, combineReducers, applyMiddleware} from 'redux';
import {taskMiddleware} from 'react-palm/tasks';
import appReducer from './app-reducer';
const reducer = combineReducers({
// <-- mount kepler.gl reducer in your app
keplerGl: keplerGlReducer,
// Your other reducers here
app: appReducer
});
// create store
export default legacy_createStore(reducer, {}, applyMiddleware(taskMiddleware));
appReducer:
import { createAction, handleActions } from 'redux-actions';
// CONSTANTS
export const INIT = 'INIT';
// ACTIONS
export const appInit = createAction(INIT);
// INITIAL_STATE
const initialState = {
appName: 'highqmap',
loaded: false,
modal: null,
selectedNames: []
};
// REDUCER
const appReducer = handleActions(
{
[INIT]: (state, action) => ({
...state,
loaded: true
}),
},
initialState
);
export default appReducer;
And here’s my package.json:
{
"name": "highqmap",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"assert": "^2.1.0",
"chart.js": "^4.4.3",
"chartjs-plugin-zoom": "^2.0.1",
"kepler.gl": "^3.0.0",
"primeflex": "^3.3.1",
"primeicons": "^7.0.0",
"primereact": "^10.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4",
"webpack": "^5.93.0"
},
"scripts": {
"start": "react-scripts --openssl-legacy-provider start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
