vis.gl
Published in

vis.gl

Kepler.gl: Export Map

Developed by Uber and contributed to the LF Urban Computing Foundation, Kepler.gl is an open source geospatial analysis tool for large-scale data sets.

I previously posted two articles where I described some of the application features. Both articles are the following:

In this article we are going to describe the export map feature in Kepler.gl.

Let’s create a simple map

In order to export our map, you first need to create a map. Kepler.gl website has some predefined maps:

The new map will look like the screenshot below, showing all California earthquakes over the past 40 years.

California Earthquake Map

Once you are happy with the map and all the layers you can create on it (user guide), let’s move on to exporting the current visualization by clicking on the share button (top left corner),

Highlighted Share Button

upon clicking the Share button, you will be provided with a list of options as shown below.

Export Options

Click on Export Map.

After clicking on Export Map, Kepler.gl will show a modal dialog where you can select the format of your exported map. As shown in the following screenshot

Export modal dialog

Kepler.gl provides two different options:

  • HTML: create a single HTML file of your map with data and configuration.
  • JSON: create a JSON file with your current map data and config. You can later load it back to kepler.gl

Export Map as HTML

The default export map option is HTML, see HTML export modal dialog image. As part of HTML export options, you can provide a Mapbox token to be saved in the HTML file.

If you don’t provide a Mapbox token, Kepler.gl will use a temporary one which can expire later. We recommend to use your own Mapbox token.

If you don’t have an access token when you export the map, you can always create a new token and update the generated HTML file later one when necessary.

Data and configuration will be inlined in the single HTML file. You can use it as a static page and share it with other people.

Export to html

The generate HTML file can be pretty big since it contains all map data.

Export Map as JSON

JSON is the second available option to export your map. Once you click on JSON button, Kepler.gl will show the following modal window.

Export JSON Map

The lower part of the modal dialog shows the current map configuration.

The map configuration is coupled with loaded datasets; each part of the configuration will contain a dataId which will refer to one of the loaded datasets.

Once you click on Export, Kepler.gl will create a JSON file containing both map configuration and data. The newly generated file can be used to recreate our original map. See below

Export to JSON

The generate JSON file can be pretty big since it contains all map data.

Conclusions

In this post we reviewed the Kepler.gl export map functionality to create an HTML or JSON file.

HTML export can be really useful if you want a static representation of our map to include on your website, share it with other users or visualizing it offline on our computer.

JSON is a lean representation of our map and the file can be stored in a CDN, share with other people and load it later to reproduce the exact same map.

Exporting map and data is part of the core abilities Kepler.gl provides and we are continuing working on improving and adding new features.

If you want to know more about Kepler.gl export features, check the user guides.

--

--

--

Open-source, WebGL-powered visualization frameworks

Recommended from Medium

Murphy’s Law, a Coder’s Tale

Why GPT-3 feels like Programming

2.5D Game Development

upcoming coding sprints!

R Data Types

How To Host a React Application on AWS S3

Overview of AWS and Cloud Computing

The Case Against Tiny Houses

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Giuseppe Macrì

Giuseppe Macrì

More from Medium

How to deploy an Angular/Node App on AWS EC2 (Linux 2 AMI) with SSL (CertBot)

How to delete temporary files in Windows 10?

The windows key on the keyboard

How To Develop and Build MEAN Stack

How to install Firebase Dynamic Links to Ionic