Could I use Javascript and Plotly.js to effectively display interactive, customizable maps within a static webpage?

Hi there,

I have really enjoyed using Dash to put together interactive maps. However, I’ve found that, when hosting these maps on (cheap) cloud servers like Azure or Google Cloud Platform, it takes a little bit of time to render the maps.

Therefore, for some mapping projects that don’t require much interactivity, I’ve simply used Plotly (within Python) to create HTML-based maps, then display those on static sites. This has also worked out well, and with a little Javascript, I can allow users to choose which map to display within a page.

However, for other maps and charts, I’d like to allow users to specify choices for a number of parameters, then create a customized map based on those parameters. Since these choices could lead to thousands of different possible combinations of maps, it wouldn’t make sense to pre-render each one–but I would also like to be able to display them within a static webpage if at all possible.

Would it be possible to implement a third approach that uses Javascript to import data (maybe from CSV and Geojson files); create a customized table of data to plot based on viewers’ selections; and then use Plotly.js to visualize that data on a static webpage? My goal would be to combine the customizability of a Dash-based approach with the speed and simplicity of a static site.

One minor flaw with this plan is that I don’t really know any Javascript, but I’d like to think that I could leverage my existing Python and Plotly knowledge to piick it up more quickly.

Thanks in advance for any input/feedback!