LogoLogo
  • Welcome
  • What's new?
  • Docs
    • User guides
      • Get Started
      • Kepler.gl workflow
        • Add data to layers
          • Adding Data Layers
          • Create a Layer
          • Blend and Rearrange Layers
          • Hide, Edit and Delete Layers
        • Add Data to the Map
      • Layers
        • Point
        • S2 Layer
        • Icon
        • Line
        • Cluster
        • Polygon
        • Hexbin
        • Grid
        • H3
        • Heatmap
        • Arc
        • Trip layer
      • Layer Attributes
      • Color Palettes
      • Filters
      • Map Styles
      • Interactions
      • Map Settings
      • Time Playback
      • Save and Export
      • FAQ
    • API Reference
      • ecosystem
      • Get Started
      • Advanced usages
        • Saving and Loading Maps with Schema Manager
        • Replace UI Component with Component Dependency Injection
        • Forward Dispatch Actions
        • Reducer Plugin
        • Using Updaters
        • Custom reducer initial state
        • custom-mapbox-host
      • Components
      • Reducers
        • reducers
        • map-style
        • map-state
        • combine
        • overview
        • ui-state
        • vis-state
      • Processors
        • All processors
      • Schemas
      • Actions
        • All actions
      • Cloud providers
        • Provider
      • Custom theme
      • Localization
    • Jupyter Notebook
  • Examples
    • Node/Express
    • Demo App
    • Open modal
    • Open modal
    • UMD client
    • Customize kepler.gl Theme
    • Customize kepler.gl Reducer
  • Contributing
    • Developing Kepler.gl
    • Contributor Covenant Code of Conduct
  • Change Log
  • Upgrade Guide
Powered by GitBook
On this page
  • Save map
  • Load map
  • Match config with another dataset

Was this helpful?

  1. Docs
  2. API Reference
  3. Advanced usages

Saving and Loading Maps with Schema Manager

PreviousAdvanced usagesNextReplace UI Component with Component Dependency Injection

Last updated 5 years ago

Was this helpful?

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.

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: {}}

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.

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));

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.

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));