How to get clickable data from iframe to pythondash application

Dash Python
1

I had a map in HTML format using the leaflets package which is in iframe and I wanted to capture the clickable data from the iframe component in map HTML to the Python-dash application.

@Emil can you help me here?

from dash import Dash, dcc, html
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
from . import content

def render(app: Dash) → html.Div:

@app.callback([Output('output', 'children')],
              [Input('iframe','src')],
              # events=[Event("my-iframe", "message")]
                    )
def update_output(output):
    captured_data = output
    print('/////////////mhhm/////')
    print(output)
    return captured_data

return html.Div([
    dbc.Row([
        dbc.Col([
            html.Iframe( id='iframe',
                src="../../assets/watersheds_project 3.html",
                style={"height": "300%", "width": "100%", "max-height": "300%", "max-width": "100%",
                       "overflow": "auto"}
            )
        ], width=6),
        dbc.Col([
            content.render(app),
        ], width=6)
    ], justify="right"),

html.Div(id='output')

])
2

I would recommend replacing the map in the iframe with a dash leaflet map component; then you’ll be able to listen to click events from that component.

3

Hi Emil,

Thanks for the reply. Our map is bit a complex 4 layers have been included in the map. And we are unable to capture the hover data which was needed in the python dash application.

watersheds_project 2
watersheds_project 21920×1024 225 KB

4

Hello @Saikankatala,

Welcome to the community!

I am assuming the js project that you created this with has some sort of way to pull the data, you just need to wrangle this data into a dcc.Store and then have Dash sync it.

You can add an event listener to the click data of the projects maps, place the data into a session/local storage object depending upon how you set it up, then have a message that the frame can send to the parent to trigger a clientside callback to update the dcc.Store appropriately:

"""function (n) {
    return localStorage.get('yourStoreName')
}""" ,
Output('yourStoreName', 'data'), Input('hidden_button', 'n_clicks')

This will allow Dash to sync with your alternate source of data.

Now, how to get your other project’s data, I dont know how to do that.

5

If you recreate the map in dash leaflet using the GeoJSON component, you will be able to capture the hover data via the hover_feature prop.

3 Likes
6

Hi Emil, as per your suggestion we have created the map using the dash leaflet component and now we are trying to display the data when a user clicks on the map.

image
image772×412 15.5 KB

From the code, you can observe that I have written a callback function to capture the data. I was able to get latitude, and longitude but the feature is getting as null. Can you suggest the best way to capture the data when the user clicks on the map? Whereas the feature is a property in the JSON file.

This is the JSON file structure:

image
image775×936 110 KB

7

If you hook the callback up to the GeoJSON component itself, you should be able to get the feature data from the click_feature property.

8

Hi Emil,

Thanks for your response. We will try to implement this in our project. Which editor is user-friendly to develop dash applications?

9

That is a matter of taste, but personally I would recommend Pycharm or Visual Studio Code :slight_smile:

10

Hello Community,

Can we access the return value from a call back function which is present in a file to the other file in the same dash application?

If we can access, how can achieve that?

image
image720×1280 126 KB

From the above code, we are capturing an ID info from map. Render() and I need that ID, so I can use the same ID in content. Render().