HTML file couldn't be rendered with components.html

🎈 Using Streamlit
1

Hi everyone, I’m trying to show an html output using components.html(), but it doesn’t do the job.
Seems like something simple, but I’m stuck here :confused:
Any help is appreciated :pray:

Here is a snippet:

    import streamlit as st

    import streamlit.components.v1 as components

    st.title('HTML test')

    HtmlFile = open('sgmap.html', 'r', encoding='utf-8')

    source_code = HtmlFile.read()

    components.html(source_code,height=500)

and here is the html file:

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
  <style>
    #mapb03c1d62d3414aa780da10f9fe972b5a {
      height:100%;
    }
  </style> 
</head>
<body>
  <div id="mapb03c1d62d3414aa780da10f9fe972b5a"></div>
<script text="text/javascript">
var map = L.map('mapb03c1d62d3414aa780da10f9fe972b5a');
L.tileLayer(
  "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
  {maxZoom:19, attribution: '<a href="https://github.com/jwass/mplleaflet">mplleaflet</a> | Map data (c) <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'}).addTo(map);
var gjData = {"type": "FeatureCollection", "features": [{"type": "Feature", "geometry": {"type": "LineString", "coordinates": [[-102.28259279999999, 21.8823395], [-115.4544601, 32.6278114], [-110.300499, 24.144369100000002], [-90.5255432, 19.843860600000003], [-99.1276627, 19.4284706], [-93.11308290000001, 16.759729399999998], [-106.08889009999999, 28.635280600000005], [-101.0053024, 25.423210100000002], [-103.7271423, 19.249969500000002], [-103.4958801, 25.5698509], [-101.2591019, 21.0185795], [-99.9089127, 16.849420499999997], [-98.7332916, 20.1169701], [-103.3918228, 20.6668205], [-99.65323640000001, 19.2878609], [-101.184433, 19.700780899999998], [-99.230751, 18.926099800000003], [-104.8956909, 21.509510000000002], [-100.3184662, 25.6750698], [-96.72364809999999, 17.0654202], [-98.30352020000001, 19.0640602], [-100.38806149999999, 20.5880604], [-86.84655759999998, 21.1742897], [-100.97915649999999, 22.149820300000002], [-106.4061966, 23.2329006], [-110.97731780000001, 29.1026001], [-92.93028259999998, 17.9868908], [-98.288353, 26.0806103], [-98.19981999999999, 19.31905], [-96.1428986, 19.180950199999998], [-89.134857, 20.400417], [-102.58140999999999, 22.76843]]}, "properties": {"color": "#0000FF", "weight": 1.5, "opacity": 1}}]};

if (gjData.features.length != 0) {
  var gj = L.geoJson(gjData, {
    style: function (feature) {
      return feature.properties;
    },
    pointToLayer: function (feature, latlng) {
      var icon = L.divIcon({'html': feature.properties.html, 
        iconAnchor: [feature.properties.anchor_x, 
                     feature.properties.anchor_y], 
          className: 'empty'});  // What can I do about empty?
      return L.marker(latlng, {icon: icon});
    }
  });
  gj.addTo(map);
  
  map.fitBounds(gj.getBounds());
} else {
  map.setView([0, 0], 1);
}
</script>
</body>
2

Problem solved, thanks to @okld :balloon:

here is how:

import base64
import streamlit as st
import streamlit.components.v1 as components
st.title('HTML test')
HtmlFile = open('sgmap.html', 'r')
raw_html = HtmlFile.read().encode("utf-8")
raw_html = base64.b64encode(raw_html).decode()
components.iframe(f"data:text/html;base64,{raw_html}", height=400)
4 Likes
3

This solution helped me as well! My issue was the html file wasn’t expanding to fit the container even when fiddling with both the height/width parameters on streamlit and the html file. Why does encoding and decoding work here?