How to load data from url in Kepler? - kepler.gl

Question

After embedding kepler.gl into my application, how can I add the feature of adding the data from url? By default, I am able to add csv file into the modal of kepler.

Answer 1

from the kepler.gl dashboard initial page use the 'Load map uising url' and point your csv there. Reference screenshot

Answer 2

I did it this way but i actually trying to get it work with multiple data:
const reducers = combineReducers({
keplerGl: keplerGlReducer,
});
const store = createStore(reducers, {}, applyMiddleware(taskMiddleware));
const mapboxApiAccessToken = "YOUR-API-KEY";
export default function Keplerglcomp() {
return (
<Provider store={store}>
<Map/>
</Provider>
);
}
function Map() {
const dispatch = useDispatch();
const {data} = useSwr("datacap", async () => {
const response = await fetch(
"https://placeholder.com/data.json"
);
const data = await response.json();
return data;
})
React.useEffect(() => {
if (data) {
dispatch(
addDataToMap({
datasets: {
info: {
label: "Datalabel-1",
id: "Dataid-1"
},
data
},
option: {
centerMap: true,
readOnly: true
},
config: {}
}),
);
}
}, [dispatch, data]);
return (
<div>
<AutoSizer>
{({height, width}) => (
<KeplerGl
id="magic"
mapboxApiAccessToken={mapboxApiAccessToken}
width={window.innerWidth}
height={window.innerHeight}
/>
)}
</AutoSizer>
</div>
);
}