Integrating Folium with Dash
Dashboard applications are a very useful intelligence tool for displaying interactive data visualizations in a wide range of interesting and intuitive ways. On the back end, the dashboard applications connected to your database, api and any other repositories for your files. On the front end it displays this information in forms of interconnected graphs and tables. Dashboards can be customized to meet the specific needs of your organization and as such they have been widely adopted by the private, public and non-profit sectors for both internal and external processes.
What is Dash?
Dash is a Python framework for building analytic web applications (wait for it….) without JavaScript. It is built on top of Plotly.js, React and Flask. Dash takes your python analytic code and, within its framework, generates the relevant html code which displays the front end of your web app. The most important quality of dash, however is that it is extremely user-friendly.
In my first Dash app I wanted to create an interactive map of New York City that displayed locations of job openings depending on a salary range selected by the user. The salary scale would be in the form of a slider and the map would be updated each time the slider was moved in order to accommodate the change in salary range.
To generate the map I looked to the Folium library. It also has the distinct trait of being very intuitive. The basic process is as follows:
- Import Folium and any other dependencies you need.
2. Pass in the coordinates for the base map (in my case, New York City )
3. Generate base map.
4. Generate markers for job locations and add to map
After generating the map my challenge was integrating it with dash. Dash has its built in core components and can easily be integrated with some libraries and apis using this core component framework. Folium, unfortunately, isn’t one of them. So I hit the internet in search of a solution and found one!
Enter the Iframe
An iframe (short for inline frame) is an HTML element that allows an external webpage to be embedded in an HTML document. Unlike traditional frames, which were used to create the structure of a webpage, iframes can be inserted anywhere within a webpage layout.
Since Dash generates html code, it follows that its html component should include an iframe tag, and it does. If I can convert my folium map to an html document I should be able to pass that html doc into Dash’s iframe component and have it displayed on my app. This can be done as follows:
- Save the newly created map as an html file.
2. Set up your Dash environment and pass the html file through iframe component.
3. Test your Dash app.
Conclusion.
In my quest to find a way to integrate my map generator with dash, I stumbled into something much bigger: the iframe. From the concept of the iframe it follows that anything that can be converted to html (not just folium) can be integrated with dash. This makes for endless possibilities for things that can be incorporated to your web app e.g videos, animations, external dashboards, the list goes on and on and on.
