Convert KeplerGl html file to iframe

Question

I have created a map using KeplerGl in Databricks. I saved the file using:

map_1._repr_html_().decode("utf-8")

I opened the html file in a text editor to find the iframe information, but it didn't exist. I then tried some of the src links in the text editor, but those just brought up more lines of code. I'm trying to embed into a sharepoint site. Is there a way for me to embed my html map into sharepoint, and interact with it as you would with a google maps embed?

I don't know how useful the html code would be, but I can't post it because of the spam filter, and I don't know how to get around that.

I think keplergl 0.2.0 had a function that allowed you to embed, but I'm not sure how I could use that version.

I also thought about loading the html map into mapbox, and then getting my embed from there, but I have no idea how I'd even start to do that either.

score 0 · Answer 1 · answered Jul 28 '23 at 23:56

You can use the keplergl module's built in function to save the html "this will save map with provided data and config". Then you can saved html, in here "first_map.html" inside a iframe in your web application. Hope this will works for you.

keplergl.save_to_html(data={"data_1": df}, config=config, file_name='first_map.html')

score -1 · Answer 2 · answered Jun 06 '23 at 08:23

To convert a KeplerGl HTML file into an iframe, you can follow these steps:

Prepare the KeplerGl HTML File:

Make sure you have the KeplerGl HTML file ready. This file is typically generated when you save a KeplerGl visualization. Ensure that the HTML file is accessible on a web server or can be served from a local directory. Create an HTML File to Embed the iframe:

Copy code
<!DOCTYPE html>
<html>
  <head>
    <title>KeplerGl Visualization</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      iframe {
        width: 100%;
        height: 100vh;
        border: none;
      }
    </style>
  </head>
  <body>
    <iframe src="path/to/kepler-gl.html"></iframe>
  </body>
</html>

Replace "path/to/kepler-gl.html" with the actual path to your KeplerGl HTML file. Save the HTML File:

Save the HTML file with a suitable name, such as index.html, in the same directory as your KeplerGl HTML file. Open the HTML File in a Web Browser:

Open the newly created HTML file (index.html) in a web browser.

Many of your recent answers appear likely to have been entirely or partially written by AI (e.g., ChatGPT). Please be aware that [posting of AI-generated content is banned here](//meta.stackoverflow.com/q/421831). If you used an AI tool to assist with any answer, I would encourage you to delete it. — NotTheDr01ds, Jun 11 '23 at 13:01
**Readers should review this answer carefully and critically, as AI-generated information often contains fundamental errors and misinformation.** If you observe quality issues and/or have reason to believe that this answer was generated by AI, please leave feedback accordingly. The moderation team can use your help to identify quality issues. — NotTheDr01ds, Jun 11 '23 at 13:01

Convert KeplerGl html file to iframe

2 Answers2