7

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
sveti petar
  • 3,637
  • 13
  • 67
  • 144
  • See examples: https://github.com/uber/kepler.gl/tree/master/examples/open-modal – stdob-- Dec 03 '18 at 17:36
  • 1
    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. – sveti petar Dec 04 '18 at 11:52
  • 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? – sveti petar Dec 04 '18 at 11:53
  • Yes, there is no embedding mechanism like google maps. Only programmatically. – stdob-- Dec 04 '18 at 12:49
  • 1
    Work is underway on this feature: https://github.com/uber/kepler.gl/issues/327 – sirhc Feb 12 '19 at 01:43

4 Answers4

3

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

mimau
  • 118
  • 6
0

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)
David Buck
  • 3,752
  • 35
  • 31
  • 35
Jose L Fiestas
  • 1
0

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.

ikespand
  • 21
  • 2
0

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_()
SeF
  • 3,864
  • 2
  • 28
  • 41