Search…
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.

Save map

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.
1
import KeplerGlSchema from 'kepler.gl/schemas';
2
3
const mapToSave = KeplerGlSchema.save(state.keplerGl.foo);
4
// mapToSave = {datasets: [], config: {}, info: {}};
5
6
const dataToSave = KeplerGlSchema.getDatasetToSave(state.keplerGl.foo);
7
// dataToSave = [{version: '', data: {id, label, color, allData, fields}}]
8
9
const configToSave = KeplerGlSchema.getConfigToSave(state.keplerGl.foo);
10
// configToSave = {version: '', config: {}}
Copied!

Load map

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 to addDataToMap 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.
1
import KeplerGlSchema from 'kepler.gl/schemas';
2
import {addDataToMap} from 'kepler.gl/actions';
3
4
const mapToLoad = KeplerGlSchema.load(savedDatasets, savedConfig);
5
// mapToLoad = {datasets: [], config: {}};
6
7
this.props.dispatch(addDataToMap(mapToLoad));
Copied!

Match config with another dataset

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.
1
import KeplerGlSchema from 'kepler.gl/schemas';
2
import {addDataToMap} from 'kepler.gl/actions';
3
4
// save current map data and config
5
const {datasets, config} = KeplerGlSchema.save(state.keplerGl.foo);
6
// mapToLoad = {datasets: [], config: {}};
7
8
// receive some new data
9
const newData = someNewData;
10
// newData = [{rows, fields}]
11
12
// match id with old datasets
13
const newDatasets = newData.map((d, i) => ({
14
version: datasets[i].version,
15
data: {
16
...datasets[i].data,
17
allData: d.rows,
18
fields: d.fields
19
}
20
}));
21
22
// load config with new datasets
23
const mapToLoad = KeplerGlSchema.load(newDatasets, config);
24
25
this.props.dispatch(addDataToMap(mapToLoad));
Copied!