changing state of kepler.gl on a button click - kepler.gl

Question

I am working on kepler.gl . i am trying to add another point on map and change the state of kepler.gl on a button click . I mean when i click the button another point is mapped on keppler.gl map . wright now i am having 4 point on the kepler.gl map and that's working fine ... here is the code of 4 point on the map
import React, { useState } from "react";
import keplerGlReducer, {mapStateUpdaters} from "kepler.gl/reducers";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { taskMiddleware } from "react-palm/tasks";
import { Provider, useDispatch } from "react-redux";
import KeplerGl from "kepler.gl";
import { addDataToMap } from "kepler.gl/actions";
import useSwr from "swr";
import {csv} from 'd3';
import datajson from './Data/data.json'
const reducers = combineReducers({
keplerGl: keplerGlReducer,
});
const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
export default function App() {
return (
<Provider store={store}>
<Map />
</Provider>
);
}
function Map() {
const dispatch = useDispatch();
const data=datajson;
React.useEffect(() => {
if (data) {
dispatch(
addDataToMap({
datasets: {
info: {
label: "COVID-19",
id: "covid19"
},
data
},
option: {
centerMap: true,
readOnly: false
},
config: {}
})
);
}
}, [dispatch, data]);
return (
// <button onClick ={this.handledata} >changedata</button>
<KeplerGl
id="covid"
mapboxApiAccessToken="pk.eyJ1IjoiYWxpcmF6YTcwNSIsImEiOiJjazh5d2hjb3AwOHBqM2VsY21wOHo5eXprIn0.9G5CE4KqfbvU9HQ6WBuo3w"
width={window.innerWidth}
height={window.innerHeight}
/>
);
}}
my data.jason file look like this ....
[
{
"id": 139010,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 60,
"consumedFreeMinutes": 0,
"id_user": 4627,
"id_vehicle": 245,
"from": "nan",
"to": "Sol",
"batt_diff": -8,
"duracion": 412,
"fecha": "2018-09-01",
"start30": "2018-09-01 08:00:00",
"end30": "2018-09-01 08:00:00",
"distancia": 2,
"latitude": 40.0,
"longitude": -4.0
},
{
"id": 138888,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 100,
"consumedFreeMinutes": 0,
"id_user": 4627,
"id_vehicle": 245,
"from": "Universidad",
"to": "Embajadores",
"batt_diff": -4,
"duracion": 646,
"fecha": "2018-09-01",
"start30": "2018-09-01 00:00:00",
"end30": "2018-09-01 00:00:00",
"distancia": 4,
"latitude": "40.0",
"longitude": "-4.0"
},
{
"id": 138878,
"state": 4,
"subState": 0,
"paid": 1,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 110,
"consumedFreeMinutes": 0,
"id_user": 10244,
"id_vehicle": 173,
"from": "Vallehermoso",
"to": "Cuatro Caminos",
"batt_diff": -7,
"duracion": 682,
"fecha": "2018-09-01",
"start30": "2018-09-01 00:00:00",
"end30": "2018-09-01 00:00:00",
"distancia": 3,
"latitude": "40.0",
"longitude": "-4.0"
},
{
"id": 138941,
"state": 4,
"subState": 0,
"paid": 0,
"stateReason": "Trip finished by user",
"id_turistic": 5,
"priceFinal": 170,
"consumedFreeMinutes": 0,
"id_user": 12133,
"id_vehicle": 207,
"from": "Justicia",
"to": "Prosperidad",
"batt_diff": -7,
"duracion": 1031,
"fecha": "2018-09-01",
"start30": "2018-09-01 02:00:00",
"end30": "2018-09-01 02:00:00",
"distancia": 5,
"latitude": "40.0",
"longitude": "-4.0"
}
]
now i want to add another point on a click of button ? like for example i want to add that point on a button click
{
"fields": [
{
"name": "id",
"format": "",
"type": "integer"
},
{
"name": "state",
"format": "",
"type": "integer"
},
{
"name": "substate",
"format": "",
"type": "integer"
},
{
"name": "paid",
"format": "",
"type": "integer"
},
{
"name": "stateReason",
"format": "",
"type": "string"
},
{
"name": "id_turistic",
"format": "",
"type": "integer"
},
{
"name": "priceFinal",
"format": "",
"type": "integer"
},
{
"name": "consumedFreeMinutes",
"format": "",
"type": "integer"
},
{
"name": "consumed",
"format": "",
"type": "integer"
},
{
"name": "id_user",
"format": "",
"type": "integer"
},
{
"name": "id_vehicle",
"format": "",
"type": "integer"
},
{
"name": "from",
"format": "",
"type": "string"
},
{
"name": "to",
"format": "",
"type": "string"
},
{
"name": "batt_diff",
"format": "",
"type": "string"
},
{
"name": "duracion",
"format": "",
"type": "string"
},
{
"name": "fecha",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "start30",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "end30",
"format": "YYYY-M-D H:m:s",
"type": "timestamp"
},
{
"name": "distancia",
"format": "",
"type": "integer"
},
{
"name": "latitude",
"format": "",
"type": "real"
},
{
"name": "longitude",
"format": "",
"type": "real"
},
{
"name": "lo",
"format": "",
"type": "real"
}
],
"rows": [
[
139010,
4,
0,
1,
"Trip finished by user",
5,
60,
0,
4627,
245,
"nan",
"Sol",
-8,
412,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
2,
40.0,
-12,
40.0
],
[
138888,
4,
0,
1,
"Trip finished by user",
5,
100,
0,
4627,
245,
"Universidad",
"Embajadores",
-4,
646,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
4,
40.0,
0,
40.0
],
[
138878,
4,
0,
1,
"Trip finished by user",
5,
110,
0,
10244,
173,
"Vallehermoso",
"Cuatro Caminos",
-7,
682,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
3,
40.0,
-8.0,
40.0
],
[
138941,
4,
0,
0,
"Trip finished by user",
5,
170,
0,
12133,
207,
"Justicia",
"Prosperidad",
-7,
1031,
"2018-09-01",
"2018-09-01 08:00:00",
"2018-09-01 08:00:00",
5,
40.0,
-4.0,
40.0
]
]
}
how can i do this can anyone help me for this? i already tried mapstateupdataer function but not been able to get desired results ?

Answer 1

I think you have not defined the button event handler. First, you need to define it and then you can dispatch the action with the new data.
For example, if you have a button with an event handler inside your render() method.
<Button onClick={addData}>Add Data</Button>
Update: To append existing data-set on the map. You have to import a new action from kepler/actions and dispatch it.
import {updateMap} from 'kepler.gl/actions'
const addData= () => {
const data = {latitude: 37.75043, longitude: -122.34679, width: 800, height: 1200};
dispatch(updateMap(data));
};
You have to assign your data (the array of objects in your question) to a variable. Let's call it as sampleData. And This is how your replaceData handler should be like:
const addData= () => {
const sampleData = ['your-new-data-set'];
const config = this.getMapConfig();
dispatch(
addDataToMap({
datasets: {
info: {
label: "COVID-19",
id: "covid19"
},
sampleData
},
option: {
centerMap: true,
readOnly: false
},
config: {}
})
);
};