I’m trying to display a choropleth map using Plotly and PySide6. I want to ensure that all resources, including world_110m.json, are loaded locally and not fetched from the CDN. I already have a custom GeoJSON file (map1.geojson) and the required world_110m.json file stored locally.
Here’s the code I’m using:
import sys
from PySide6.QtWidgets import QApplication
from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtCore import QUrl
from pathlib import Path
import plotly
import plotly.graph_objs as go
import json
sys.argv.append("--disable-web-security")
app = QApplication(sys.argv)
# Load the GeoJSON file
geojson_path = Path(__file__).resolve().parent / 'map1.geojson'
with open(geojson_path, 'r') as f:
geojson_data = json.load(f)
# Create the choropleth map
fig = go.Figure(go.Choropleth(
geojson=geojson_data,
locations=[feature['properties']['region'] for feature in geojson_data['features']],
z=[1 for _ in geojson_data['features']],
hoverinfo='location+z',
colorbar_title="Values"
))
# Set layout to configure the map appearance
fig.update_layout(
geo=dict(
visible=True,
showland=True,
landcolor='rgb(243, 243, 243)',
projection_type="mercator",
showframe=False,
),
margin={"r": 0, "t": 0, "l": 0, "b": 0},
width=800,
height=600
)
# Get the directory of the current script to load the local JS
CURRENT_DIRECTORY = Path(__file__).resolve().parent
local_js_url = QUrl.fromLocalFile(CURRENT_DIRECTORY / "plotly-latest.min.js").toString()
# HTML content with local plotly JS
raw_html = '<html><head><meta charset="utf-8" />'
raw_html += f'<script src="{local_js_url}"></script></head>'
raw_html += '<body>'
raw_html += plotly.offline.plot(fig, include_plotlyjs=False, output_type='div')
raw_html += '</body></html>'
# Create the QWebEngineView and load the HTML
view = QWebEngineView()
view.setHtml(raw_html, QUrl.fromLocalFile(CURRENT_DIRECTORY)) # baseUrl to resolve resources
view.show()
sys.exit(app.exec())
Problem:
When I run this code, Plotly tries to fetch the world_110m.json file from an external CDN (https://cdn.plot.ly/world_110m.json) and throws the following error:
js: Uncaught (in promise) Error: unexpected error while fetching topojson file at https://cdn.plot.ly/world_110m.json
I want to:
- Prevent Plotly from fetching the
world_110m.jsonfile from the CDN. - Load the
world_110m.jsonfile from my local directory instead.
How can I modify the code to ensure Plotly uses the local world_110m.json file for the map background instead of fetching it from the internet? Is there a way to explicitly provide the file path or bypass this default behavior?
Additional Information:
I’ve come across a solution that involves setting up a Flask app to serve the world_110m.json file locally. However, this requires setting up a web server, which adds complexity (especially for someone unfamiliar with Flask or server configuration).
Is there a more direct method to accomplish this without setting up a web server? For example, can Plotly access the world_110m.json file directly from the filesystem or through a simpler mechanism?
Voice is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.