I have developed a small web application using Plotly to display a map inside an HTML iframe
.
I have prepared a small MWE using flask
:
from flask import Flask, send_from_directory
import plotly.graph_objects as go
import plotly.io as pio
import json
app = Flask('test', static_folder='static')
@app.route('/')
def index():
return send_from_directory(app.static_folder, 'test.html')
@app.route('/run')
def compute_route():
# Coordinates for Sagrada Familia in Barcelona
latitude = 41.4036
longitude = 2.1744
fig = go.Figure(go.Scattermapbox(
lat=[latitude],
lon=[longitude],
mode='markers',
marker=go.scattermapbox.Marker(
size=14,
color='red'
),
))
fig.update_layout(
mapbox_style="open-street-map",
mapbox_center={
"lat": latitude,
"lon": longitude
},
mapbox_zoom=15,
height=800,
margin={
'r': 30,
't': 30,
'l': 30,
'b': 30
}
)
html = pio.to_html(fig, full_html=True)
return json.dumps({
'html': html,
})
if __name__ == '__main__':
app.run(host='0.0.0.0', port='8000', debug=True)
Inside the static
folder I have the following test.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="data:image/png;base64,iVBORw0KGgo=">
<title>Test</title>
<style>
iframe {
width: 100%;
height: 816px;
margin: 20px 0;
border: 1px solid #ccc;
border-radius: 0.5em;
background-color: #ffffff;
}
</style>
</head>
<body>
<iframe id="map-frame" src="about:blank"></iframe>
<script>
async function getData() {
const frame = document.getElementById('map-frame');
frame.style.display = "none";
frame.src = "about:blank";
try {
const response = await fetch('/run');
const json = await response.json();
frame.srcdoc = json.html;
frame.style.display = "block";
} catch (error) {
console.log(`Error: ${error.message}`);
}
}
getData();
</script>
</body>
</html>
Executing python3 test.py
and navigating to the default page http://127.0.0.1:8000/
, I see, as expected, a map showing a red dot on the Sagrada Familia, inside an iframe
:
Now, if I switch from go.Scattermapbox
to go.Scattermap
and from go.scattermapbox.Marker
to go.scattermap.Marker
as instructed here, I donβt see the map anymore, even though the control elements of the Plotly UI are still present:
Whatβs wrong here?