Serving interactive geospatial data in browser with Kepler.gl

1 minute read

Published:

Kepler.gl logo

Kepler.gl is a great geospatial data analytic tool coming from the Uber’s data analytics team. In my opinion, it is one of the easiest ways to visualize geospatial data from a variety of formats (csv/json/geojson). Other formats (gpx/xml/..) can easily be converted to these with existing libraries. Kepler.gl is a client-side application which means that we can visualize the data without any upload, thereby avoiding the risk to expose confidential data. The main framework is written in javascript and heavily usage deck.gl which gives us the power to explore large datasets.

Apart from the simple drag and drop function on the default demo page, we can easily integrate it with our development workflow, especially with its Python API which is seamlessly integrated with Jupyter-notebook already and very well documented by the team.

However, there is no CLI/IDE tool that is released by the core team to automatize the whole workflow. However, you can directly download keplergl_cli which is built upon the Kepler.gl python package and will give you more freedom. I slightly modified this package to save a custom HTML map to a user-defined location and it’s available on github.

Both Kepler.gl and keplergl_cli has wonderful documentation, therefore, there is no need to repeat anything. I wanted to serve the created maps in by embedding them directly in the markdown (or HTML). Therefore, I am attempting the same.

For the same, we need to save the config file which will have the settings of different layers in addition to the data. This can be done easily in the demo app (export map in JSON) or by exporting the created map from Python. After having this JSON file (data+map), we need to upload and provide absolute path. For instance, I’ve uploaded the exported data to Github for a road network in Delhi. Then, with Kepler.gl, we can show these data with the help of iframe, directly on the webpage by linking the demo app to our dataset as follow:

<iframe src="https://kepler.gl/#/demo?mapUrl=https://raw.githubusercontent.com/ikespand/ikespand.github.io/master/_data/sample_data/keplergl_road_network.json" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="800px" width="600px" allowfullscreen></iframe>

Within this iframe, we can change the settings as per our requirements. Following is the outcome: