0

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 ?

Ali Raza
  • 148
  • 2
  • 12

1 Answers1

3

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: {}
        })
      );
};
Ajin Kabeer
  • 2,096
  • 2
  • 9
  • 18
  • sir there is an issue .... sir this code will only add sampledata on a button click .. sir what my question is i want to merge both the data my previous data with my sample data and for that i think mapstateupdater will be used but i am confused how to use this .. – Ali Raza Apr 20 '20 at 15:42
  • Oh, got it now. I think you can use `import {updateMap} from 'kepler.gl/actions' ` for that. I will update the code with that. I have updated the code. You can take a look at it. – Ajin Kabeer Apr 20 '20 at 15:45
  • Any logs on the console when you dispatch the action? – Ajin Kabeer Apr 20 '20 at 17:33