How to embed kepler.gl map in HTML page?

Question

I have downloaded the source codes for kepler.gl from https://github.com/uber/kepler.gl and I have successfully created a local map using a dataset stored in geojson:

Now my question is, how do I embed this map into an HTML page on my website?

I have the JSON with the data, I have the source codes, but the documentation doesn't seem to tell me how to embed this into a webpage. The docs focus on using this interface to build maps and export data, but give no information on embedding a map in a webpage as far as I can see:

https://github.com/uber/kepler.gl/tree/master/docs

Quennie

See examples: github.com/uber/kepler.gl/tree/master/examples/open-modal – Amain

I don't understand how that is supposed to help. All that does is open the same interface as the other demo example, except it opens it at the click of a button. I need to show the map itself, without the side panel and the configuration options. – Quennie

I suppose it would be too much to ask for them to have a simple embed code, like Google Maps does for example? I.e, include a script, add a path to your JSON as a parameter, and it displays the map to the user? – Quennie

Yes, there is no embedding mechanism like google maps. Only programmatically. – Amain

Work is underway on this feature: github.com/uber/kepler.gl/issues/327 – Shinberg

Answer 1

In the Kepler interface click on the "share" button and "export map".

You will download a html page containing all the needed code.

The simplest way is to include it in your page using an iframe object.

Lavonna

Answer 2

Use save_to_html to generate HTML file

map3=KeplerGl(height=500,data={'Peru Covid distrito':perudist})
map3.save_to_html(file_name='mapadist.html',read_only=True)

Cornia

Answer 3

As mentioned by others, you can export the map in HTML and use it. Alternatively, export map in JSON which will combine the raw data and the map settings into a single JSON and then you can use live kepler.gl website to show this data. For instance my exported JSON data is at GitHub and I can visualize this in kepler.gl with iframe 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>

You can find full explanation here.

Avuncular

Answer 4

Another option in addition to the ones already mentioned is to use the private method ._repr_html_.

You can export an empty map as html with:

map_1 = KeplerGl(data={}, height=800)
map_1._repr_html_()

Myrtismyrtle