'How to embed kepler.gl map in HTML page?

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:

enter image description here

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
mapbox-gl-jsdeck.glkepler.gl


Solution 1:[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.

enter image description here

Solution 2:[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)

Solution 3:[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.

Solution 4:[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_()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 mimau
Solution 2 David Buck
Solution 3 ikespand
Solution 4 SeF

Related Questions