HTML file couldn't be rendered with components.html

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>

Problem solved, thanks to @synode :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)
3 Likes