Scattergeo loading map offline from local topojson (with Python) [Solved]

šŸ“Š Plotly Python
1

Iā€™ve created a scattergeo plot with plotly offline & Python to be used in an offline html dashboard.

The plot uses the default world map; the topojson file ā€œworld_110m.json,ā€ which is clearly retrieved from cdn.plot.ly.

  • Iā€™ve downloaded the world_110m.json from cdn.plot.ly.
  • Iā€™d like to place this .json in a folder ā€œtopojson,ā€ in the same directory as the local html copy of my scattergeo plot in order for the map to load without an internet connection.

Does anyone have any idea how to achieve this?

I didnā€™t expect it to work; but so far I tried specifying the following in the plot configuration: {ā€˜topojsonURLā€™:ā€™./topojson/ā€™}

With this method; opening the plot with chrome I get the following error messages in the browser console:

  • Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
  • Error: unexpected error while fetching topojson file at ./topojson/world_110m.json

Thanks

2

Hi @davedoode,

Youā€™ve got the right idea, the trouble is youā€™re running in to your browserā€™s same-origin policy, which prevents loading generic data files (like json) from the file system. The three.js project has nice page covering this concept and some ways to work around it (see https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally).

Basically you can open the html file using a webserver (not as involved as it may sound, you can do this using a single Python command) or change your browsers security settings.

Hope that helps!
-Jon

3

Thanks Jon, your advice pointed me in the right direction. It was the same origin policy blocking me.

My solution goes a bit off topic but hopefully will help others.

In the end I rolled my dashboard into a node-webkit app and disabled Chromiumā€™s same origin policy with the following line in my app manifest file:

"chromium-args": "--allow-file-access-from-files --allow-file-access --user-data-dir"

The line in the html output should be:
"topojsonURL": process.cwd() + "\\files\\topojson\\"

To prevent ā€œprocess.cwd()ā€ being added as a string value I did the following in Python:

html_plt = plot(fig, output_type='div', config={'topojsonURL': '*process.cwd()*' + '\\' + 'files\\topojson\\'})
html_plt = html_plt.replace('"*process.cwd()*', 'process.cwd() + "')

I then just wrote ā€œhtml_pltā€ out as a html file.

Loads fine without a connection or server :slightly_smiling_face:

1 Like
4

Hi @davedoode, iā€™m looking for ways you can load custom topojson file into plotly. Wondering how you do that. Would you mind to share how?

Thank you.

5

did you ever figure this out?