Saving and Loading Maps with Schema Manager

Kelper.gl provides a schema manager to save and load maps. It converts current map data and configuration into a smaller JSON blob. You can then load that JSON blob into an empty map by passing it to
addDataToMap
.The reason kepler.gl provides a Schema manager is to make it easy for users to connect the kepler.gl client app to any database, saving map data / config and later load it back. With the schema manager, a map saved in an older version can still be parsed and loaded with the latest kepler.gl library.
Pass the instanceState to
SchemaManager.save()
SchemaManager.save()
will output a JSON blob including data and config.
Under the hood,
SchemaManager.save()
calls SchemaManager.getDatasetToSave()
and SchemaManager.getConfigToSave()
SchemaManager.getDatasetToSave()
will output an array of dataset.SchemaManager.getConfigToSave()
will output a JSON blob of the current config.
In the example blow,
foo
is the id of the KeplerGl instance to be save.import KeplerGlSchema from 'kepler.gl/schemas';
const mapToSave = KeplerGlSchema.save(state.keplerGl.foo);
// mapToSave = {datasets: [], config: {}, info: {}};
const dataToSave = KeplerGlSchema.getDatasetToSave(state.keplerGl.foo);
// dataToSave = [{version: '', data: {id, label, color, allData, fields}}]
const configToSave = KeplerGlSchema.getConfigToSave(state.keplerGl.foo);
// configToSave = {version: '', config: {}}
Pass saved data and config to
SchemaManager.load()
SchemaManager.load()
will parsed saved config and data, apply version control, the output can then be passed toaddDataToMap
directly.
Under the hood,
SchemaManager.load()
calls SchemaManager.parseSavedData()
and SchemaManager.parseSavedConfig()
SchemaManager.parseSavedData()
will output an array of parsed dataset.SchemaManager.parseSavedConfig()
will output a JSON blob of the parsed config.
import KeplerGlSchema from 'kepler.gl/schemas';
import {addDataToMap} from 'kepler.gl/actions';
const mapToLoad = KeplerGlSchema.load(savedDatasets, savedConfig);
// mapToLoad = {datasets: [], config: {}};
this.props.dispatch(addDataToMap(mapToLoad));
Often times, people want to keep a map config as template, then load it with different datasets. To match a config with a different dataset, you need to make sure
data.id
in the new dataset matches the old one.import KeplerGlSchema from 'kepler.gl/schemas';
import {addDataToMap} from 'kepler.gl/actions';
// save current map data and config
const {datasets, config} = KeplerGlSchema.save(state.keplerGl.foo);
// mapToLoad = {datasets: [], config: {}};
// receive some new data
const newData = someNewData;
// newData = [{rows, fields}]
// match id with old datasets
const newDatasets = newData.map((d, i) => ({
version: datasets[i].version,
data: {
...datasets[i].data,
allData: d.rows,
fields: d.fields
}
}));
// load config with new datasets
const mapToLoad = KeplerGlSchema.load(newDatasets, config);
this.props.dispatch(addDataToMap(mapToLoad));
Last modified 3yr ago