Kepler.gl + Dropbox = Map Save & Share

Giuseppe Macrì
vis.gl
Published in
4 min readApr 22, 2019

In my previous post, I covered how to use Kepler.gl to display the location and magnitude of California earthquakes during the last 40 years.

In this post, I will cover new Kepler.gl functionality which allows users to save and share maps using Dropbox.

Dropbox integration

Background

After launching Kepler.gl, we received a lot of feedback from users about the way they use the tool and what they would like to see in the future.

While going through feedback from users, we noticed an interesting trend where users were asking for functionalities to save and share their maps with other users.

As a workaround to the lack of the cloud storing feature, Kepler.gl has always provided the ability to export map (configuration and/or data) to CSV/JSON files.

We began looking into possible options to store user maps but with the strict requirement that users must always be in control of their data and data should always be living on users’ browser or cloud accounts without using any back-end services to handle operations.

Sharing a Map

Users are able to create beautiful maps with Kepler.gl and they want to share them with other users.

Multi Maps

Until now, sharing maps was really tricky because there was no ability to store data and configuration in the same file. To workaround this limitation, users had to share Kepler.gl by exporting the map configuration and sharing both files (data and configuration) with other users.

Kepler.gl should provide the ability to easily share maps with other people without having to worry about downloading and re-uploading files; at the same time, the application must be aware of users’ data privacy. As a reminder, the Kepler.gl data policy is as follows:

Kepler.gl is a client-side application with no server backend; data lives only on your machine/browser and no information or map data is sent to any server.

Having the Kepler.gl data policy in mind, we had to come up with a solution that did not use a backend side component and gave users control over their own data..

After reviewing a few options, we implemented the Map Saving functionality using Dropbox as cloud storage. Read below for details on how to use the new feature.

Let’s map it!

Now, we have introduced all actors in this picture, let’s actually start working on a new map and take advantage of new save and share functionality:

  1. Once you have your Dropbox login credentials, visit Kepler.gl and click Get Started to create a new map. For the sake of this tutorial, we are going to use one of the provided samples to generate a map and save it. Click Try Sample Data.
Add sample data to map
  • Once all samples are loaded, click NYC Taxi Trips (or a different example/your own custom data).
NYC taxi
  • Now that we have a spectacular view of NYC taxi trips, and are ready to share, we click the Share button. The button will provide a list of share/export options. Click Share Public Url.
  • The saving modal dialog provides a list of third-party storage options (currently only Dropbox). Click Dropbox Login (if you have already logged into Dropbox through Kepler.gl you will see Upload).
Saving options
  • Kepler.gl will now open a new modal window which allows users to log into their Dropbox account safely using OAuth. Once successfully logged in, the new window will automatically close and the Dropbox Login button will turn into Upload.
  • Click Upload and Kepler.gl will start uploading your newly created map into your Dropbox Account. When the operation is complete, you can see your newly saved map URLs (kepler.gl permalink and map raw file).

Now, your map is saved and you can share other people or social media.

Conclusions

Saving and sharing will save time when you create and share maps with other users. Users can also build on top of their existing works without starting from scratch.

We are always looking for feedback in order to improve Kepler.gl and cover new use cases.

Feel free to check out the Kepler.gl roadmap and if you have new ideas or recommendations feel free to create a new Github issue.

--

--